Как создать ListView или категории с элементами круга во Flutter

Question

Как я могу составить список категорий товаров с подкатегориями, такими как это изображение, любые предложения

Спасибо

Answer 1

Вы можете проверить следующий пример, в котором используется Wrap виджет

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: MyWidget(),
    ),
  );
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var data = [
      {'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},
    ];
    return Scaffold(
        body: Center(
            child: Wrap(
                alignment: WrapAlignment.center,
                spacing: 8.0, // gap between adjacent chips
                runSpacing: 4.0, // gap between lines
                children: data
                    .map((e) => Column(
                          children: <Widget>[
                            ClipOval(
                              child: Container(
                                color: e["color"],
                                child: SizedBox(
                                    width: 50,
                                    height: 50,
                                    child: Icon(
                                      e["icon"],
                                      color: Colors.white,
                                      size: 30,
                                    )),
                              ),
                            ),
                            Text(e["name"])
                          ],
                        ))
                    .toList())));
  }
}