Flutter 如何在Flatter中创建包含圆形项目的列表视图或类别

Flutter 如何在Flatter中创建包含圆形项目的列表视图或类别,flutter,flutter-layout,Flutter,Flutter Layout,我如何制作一个带有子类别(如图)的itemCategories列表,有什么建议吗 谢谢 您可以检查以下使用Wrap小部件的示例 导入“包装:颤振/材料.省道”; void main(){ runApp( 材料聚丙烯( 主页:MyWidget(), ), ); } 类MyWidget扩展了无状态Widget{ @凌驾 小部件构建(构建上下文){ 风险值数据=[ {'name':'Shopping','color':Colors.blue,'icon':Icons.local_shipping},

我如何制作一个带有子类别(如图)的itemCategories列表,有什么建议吗

谢谢


您可以检查以下使用
Wrap
小部件的示例

导入“包装:颤振/材料.省道”;
void main(){
runApp(
材料聚丙烯(
主页:MyWidget(),
),
);
}
类MyWidget扩展了无状态Widget{
@凌驾
小部件构建(构建上下文){
风险值数据=[
{'name':'Shopping','color':Colors.blue,'icon':Icons.local_shipping},
{'name':'Service','color':Colors.red,'icon':Icons.room_Service},
{'name':'Hotel','color':Colors.green,'icon':Icons.Hotel},
{'name':'More','color':Colors.amber,'icon':Icons.More},
{'name':'Custom','color':Colors.orange,'icon':Icons.add_to_photos},
];
返回脚手架(
正文:中(
孩子:包裹(
对齐:wrappalignment.center,
间距:8.0,//相邻芯片之间的间隙
行间距:4.0,//行间距
儿童:数据
.map((e)=>列(
儿童:[
阴蒂(
子:容器(
颜色:e[“颜色”],
孩子:大小盒子(
宽度:50,
身高:50,
子:图标(
e[“图标”],
颜色:颜色,白色,
尺码:30,
)),
),
),
文本(e[“名称”])
],
))
.toList());
}
}

Sanjay Sharma谢谢,但我还想要一个子类别,例如{'name':'Shopping','color':Colors.blue,'icon':Icons.local_shipping,'sub':['children','women']},子类别将是一个带边框的文本。您可以分享屏幕截图或线框的外观吗?当我单击某个类别时,我想显示子类别,您可以单击图标显示弹出菜单。你不能吗?你能检查一下这些问题吗