How to render a specific number of lines for Wrap in Flutter?

Issue

I am trying to make a filter for a list in flutter. I wish to show a few of the filters above the list. Something like this –

UI From Figma
(source: imge.to)

I can not figure out how to render only 2 lines of these filters and then render a chip with "+X" letting the user know how many more filters are also applied. So I am stuck with something like this –

Flutter Screenshot
(source: imge.to)

Code for how I am generating this ‘filter glance’ widget –

class FilterGlance extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return 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(
          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("Open"),
              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: ColorDarkFG,
        padding: EdgeInsets.fromLTRB(5.0, 0.0, 5.0, 0.0),
      ),
      margin: EdgeInsets.only(left: 10, right: 3, top: 0, bottom: 0),
    );
  }
}

I need only 2 lines of filters and then a chip with "+X" letting the user know how many more filters are present. The current code will keep on adding lines as I add more chips/filters.

Solution

There is no option like that may be for now you should go with this.

I have added BoxConstraints with SingleChildScrollView to your Wrap.

        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"),
                    ],
                    ),
                ),
                ),
            ],
            );

enter image description here

Answered By – Amit Prajapati

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published