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

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 -

_{(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 -

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