使用 flutter 獲得此設計布局的最佳方法是什么？

Question

布局

在 flutter 中獲得這種布局的最佳方式或方法是什么？

Answer 1

通過使用 Chip 和 Wrap 小部件：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Chip"),
      ),
      body: Wrap(
        children: [
          Chip(
            label: Text("test"),
          ),
          Chip(
            label: Text("test"),
          ),
          Chip(
            label: Text("test"),
          ),
          Chip(
            label: Text("test"),
          ),
          Chip(
            label: Text("test"),
          ),
          Chip(
            label: Text("test"),
          ),
          Chip(
            label: Text("test"),
          ),
          Chip(
            label: Text("test"),
          ),
          Chip(
            label: Text("test"),
          ),
        ]
      ),
    );
  }
}

Answer 2

您可以使用filter_list package 過濾您的數據並實現您想要的設計

樣本結果：