How to wrap column items in a card with an header with Flutter

Question

I'm new to Flutter/Dart, so maybe the problem I'have is just lack of knowledge. My goal is to build a card with an horizontal header on top of the card and then the card should display a list of item/value pairs vertically, wrapping them to a new column if the device is large enough. I've added a Column, for two children (the header and the Wrap), but if it's embedded in a column there's no wrapping at all.

I tried a lot of combinations but I didn't find a solution. If I remove the column, the Wrap widget works perfectly.

class TestApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return
      MaterialApp(
        title: 'Wrap Test',
        theme: ThemeData(
          primarySwatch: Colors.red,
        ),
        home: TestScreen(),
    );
  }
}

class TestScreen extends StatelessWidget {
  /*
  Builds a single item/value pair
  */
  Widget _text(int i) {
    var container = Container(
      height: 50,
      child: Row(
        children: <Widget>[
          Container(
            width: 200,
            child: Text(
              'item $i',
            ),
          ),
          Text(
            'value $i',
          ),
        ],
      ),
    );
    return container;
  }

  /*
  Builds a list of item/value pairs
   */
  List<Widget> _items(int n) {
    List<Widget> widgetList = [];

    for (int i = 1; i <= n; i++) {
      widgetList.add(_text(i));
    }

    return widgetList;
  }

  /*
  This way Wrap widget isn't working as I thought...the reason is that it seems bounded by
  the column and the column does not expands itself due to wrapping
   */
  Widget buildWrapNotWorking(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Wrap Test"),
      ),
      body: Card(
        color: Colors.yellow,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              "Header",
            ),
            Wrap(
              direction: Axis.vertical,
              runSpacing: 50,
              crossAxisAlignment: WrapCrossAlignment.start,
              spacing: 20,
              children: _items(20),
            ),
          ],
        ),
      ),
    );
  }


  /*
  This way Wrap widget is working, because I removed the column. But I need to have a card header
  on top of the card.
   */
  Widget buildWrapWorkingButNoHeader(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Wrap Test"),
      ),
      body: Card(
        color: Colors.yellow,
        child: Wrap(
          direction: Axis.vertical,
          runSpacing: 100,
          crossAxisAlignment: WrapCrossAlignment.start,
          spacing: 20,
          children: _items(20),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return buildWrapNotWorking(context);
//    return buildWrapWorkingButNoHeader(context);
  }
}

I'm expecting that calling buildWrapNotWorking(context) will work as desired.

The problem is similar to that one: How to wrap row items in a card with flutter

Answer 1

Simply wrap you Wrap widget with - Expanded - this was it will get enough space in column.

code:

  Widget buildWrapNotWorking(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Wrap Test"),
      ),
      body: Card(
        color: Colors.yellow,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              "Header",
            ),
            Expanded(
              child: Wrap(
                direction: Axis.vertical,
                runSpacing: 50,
                crossAxisAlignment: WrapCrossAlignment.start,
                spacing: 20,
                children: _items(20),
              ),
            ),
          ],
        ),
      ),
    );
  }