如何让 Widget 在 Flutter Web 上不溢出 ListView

Question

Context : I'm trying to make a web app with Flutter - so this is all in Chrome

Problem : I have a chart, from the charts_flutter library, and it renders OK when inside a Column. The issue is that I want to be able to scroll and add more content below the chart. When I try changing the column to a ListView, it overflows (seems the Chart is trying to be as big as possible and the ListView has infinite height). I'm not sure how to get around this issue.

Current Code : Just the scaffold, because that's all that I think is important here

Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: ListView(
        children: <Widget>[
          Row(
            children: <Widget>[
              FlatButton(onPressed: (){
                print("flat button pressed");
              }, child: Text("Flat Button 1")),
              FlatButton(onPressed: (){
                print("flat button pressed");
              }, child: Text("Flat Button 2")),
              FlatButton(onPressed: (){
                print("flat button pressed");
              }, child: Text("Flat Button 3")),
            ],
            mainAxisAlignment: MainAxisAlignment.center,
          ),
          Flexible(child: GroupedStackedBarChart.withRandomData()),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );

Answer 1

buddy just wraps your Listview with Expanded and Expand your widget with Column like this:

body: Column(
        children: <Widget>[
          Expanded( 
            child: ListView(
              children: <Widget>[

              ],
            ),
          ),

Answer 2

I think the Flexible causes the chart to fill the parent's height, which is infinite. Try wrapping it in a Column instead to give a pre-calculated size.

body: ListView(
    children: <Widget>[
      Row(
        children: <Widget>[
          FlatButton(onPressed: (){
            print("flat button pressed");
          }, child: Text("Flat Button 1")),
          FlatButton(onPressed: (){
            print("flat button pressed");
          }, child: Text("Flat Button 2")),
          FlatButton(onPressed: (){
            print("flat button pressed");
          }, child: Text("Flat Button 3")),
        ],
        mainAxisAlignment: MainAxisAlignment.center,
      ),
      Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [GroupedStackedBarChart.withRandomData()],
      ),
    ],
  ),