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

Question

I need to implement a design like this . I have tried Grid and ListViews but i cant achieve this design. Primary goal is to show a List of Strings in the given design.

Answer 1

Try this template code

    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

You can use Wrap Widget that takes a list of Widgets as it's child, in this case that would be a containers with text inside. All the widgets that are not fitting in the row will be moved to the next line. You can set the spacing vertically and horizontally too.

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,
      ),
    );
  }
}

Although in this case I hard coded the container width. In most cases it should've just wrapped around the padding. Needs some thinking there, but I hope you get the idea, try running this.