如何在抖动中实现如下设计？

Question

我需要实现一个this之类的设计。我已经尝试了Grid和ListViews，但我无法实现此设计。主要目标是在给定的设计中显示字符串列表。

Answer 1

尝试使用此模板代码

    import 'package:flutter/material.dart';

    void main() => runApp(MyApp());

    class MyApp extends StatefulWidget {
    @override
    _MyAppState createState() => _MyAppState();
    }

    class _MyAppState extends State<MyApp> {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
        debugShowCheckedModeBanner: false,
        darkTheme: ThemeData.dark(),
        title: 'Widget of the weeks',
        home: Scaffold(
            body: SafeArea(
            child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                Padding(
                    padding: EdgeInsets.fromLTRB(10.0, 10.0, 5, 0),
                    child: Text("FILTER",
                        style: TextStyle(
                            color: Colors.white30, fontWeight: FontWeight.bold)),
                ),

            Container(
                    constraints: BoxConstraints(minHeight: 100, maxHeight: 100),
                    child: SingleChildScrollView(
                    child: Wrap(
                        crossAxisAlignment: WrapCrossAlignment.center,
                        verticalDirection: VerticalDirection.down,
                        runSpacing: 3.0,
                        spacing: 3.0,
                        children: <Widget>[
                        ChipDesign("Lifetime"),
                        ChipDesign("Student"),
                        ChipDesign("Salaried"),
                        ChipDesign("Corporate"),
                        ChipDesign("Open1"),
                        ChipDesign("Open2"),
                        ChipDesign("Open2"),
                        ChipDesign("Open4"),
                        ChipDesign("Open5"),
                        ChipDesign("Open6"),
                        ChipDesign("Open7"),
                        ChipDesign("Open9"),
                        ChipDesign("Open10"),
                        ChipDesign("Open11"),
                        ChipDesign("Open12"),
                        ChipDesign("My Referral Code Users"),
                        ChipDesign("+10"),
                        ],
                    ),
                    ),
                ),
                ],
            ),

        ),
        ),
        );
    }
    }

    class ChipDesign extends StatelessWidget{
    final String _label;

    ChipDesign(this._label);

    @override
    Widget build(BuildContext context){
        return Container(
        child: Chip(
            label: Text(
            _label,
            style: TextStyle(color: Colors.white),
            ),
            backgroundColor: Colors.red,
            padding: EdgeInsets.fromLTRB(5.0, 0.0, 5.0, 0.0),
        ),
        margin: EdgeInsets.only(left: 10, right: 3, top: 0, bottom: 0),
        );
    }
    }

Answer 2

https://www.froglogic.com/blog/analysing-test-reports-from-automated-executions-using-the-squish-ide/您可以使用Wrap Widget，它以Widget的子项作为子项，在这种情况下，它将是一个内部包含文本的容器。该行中不适合的所有小部件都将移至下一行。您也可以垂直和水平设置间距。

class GridWidget extends StatefulWidget {
  @override
  _GridWidgetState createState() => _GridWidgetState();
}

class _GridWidgetState extends State<GridWidget> {
  List<String> text = ['Android', 'IOS', 'Flutter', 'IOT', 'Text', 'Text', 'Text'];
  List<Widget> widgets;
  @override
  void initState() {
    widgets = List.generate(text.length, (index)=>Container(
      width: (text[index].length * 16).toDouble(),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.all(Radius.circular(15)),
        border: Border.all(
          color: Colors.black54,
          width: 2,
        )
      ),
      child: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Center(
            child: Text(text[index], textAlign: TextAlign.center,),
          ),
        ),
      ),
    ), growable: false);
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Wrap(
        runSpacing: 10,
        spacing: 10,
        direction: Axis.horizontal,
        children: widgets,
      ),
    );
  }
}

尽管在这种情况下，我对容器的宽度进行了硬编码。在大多数情况下，它应该只是包裹在填充物周围。在那里需要一些思考，但是我希望您能理解，尝试运行此操作。