title: Flutter column widget: childs with different heights
body: <p>I am trying to create a small test app with a large central area onto which i will render an image and a smaller bottom area that will contains an horizontal scrollable list of widgets. Here is the code:</p>
  
  <pre><code>import 'dart:convert';
  
  import 'package:flutter/material.dart';
  import 'package:http/http.dart' as http;
  import 'dart:async';
  import 'dart:isolate';    
  import 'package:fluttertoast/fluttertoast.dart';    
  import 'package:photo_app_ui_test/fxmanager/fx_manager.dart';
  
  ////    
  void main() {
    runApp(SampleApp());
  }
  
  class SampleApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Sample App',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: SampleAppPage(),
      );
    }
  }
  
  class SampleAppPage extends StatefulWidget {
    SampleAppPage({Key key}) : super(key: key);
  
    @override
    _SampleAppPageState createState() =&gt; _SampleAppPageState();
  }
  
  class _SampleAppPageState extends State&lt;SampleAppPage&gt; {
    FxManager fxManager;
    bool      showLoadingDialog = true;
  
    @override
    void initState() {
      super.initState();
      //loadData();
      fxManager = FxManager();
      fxManager.init().then( (dynamic) =&gt; initInterface() );
    }
  
  
    void initInterface(){
      setState(() {
        showLoadingDialog = false;
      });
    }
  
    getBody() {
      if (showLoadingDialog) {
        return getProgressDialog();
      } else {
        return getEffectsWidget();//getListView();
      }
    }
  
    getProgressDialog() {
      return Center(child: CircularProgressIndicator());
    }
  
    getEffectsWidget() {
      return
  
        Column(
            children: &lt;Widget&gt;[
  
              Expanded(child: Container(color: Color.fromARGB(255, 255, 0, 0),
                  child: Center(child: Text("Image")))),
              Flexible( child: Container(
                  color: Color.fromARGB(255, 0, 255, 0),
                  child: ListView(
                      scrollDirection: Axis.horizontal,
                      children: _getListData()
                  )))
            ]);
    }
  
    _getListData() {
      List&lt;Widget&gt; widgets = [];
      for (int i = 0; i &lt; 100; i++) {
        widgets.add(Padding(
            padding: EdgeInsets.all(10.0),
            child: Column(
              children: &lt;Widget&gt;[
                /*
                Expanded(
                  child: Container(),
                ),*/
                FlatButton(
                    onPressed: () =&gt; {},
                    color: Colors.orange,
                    padding: EdgeInsets.all(10.0),
                    child: Column(
                      // Replace with a Row for horizontal icon + text
                      children: &lt;Widget&gt;[Icon(Icons.add), Text("Add")],
                    )),
              ],
            )));
      }
      return widgets;
    }
  
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
          appBar: AppBar(
            title: Text("Sample App"),
          ),
          body: getBody());
    }
  
  
  }
  </code></pre>
  
  <p>produce this result:</p>
  
  <p><a href="https://i.stack.imgur.com/4y9cj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4y9cj.png" alt="enter image description here"></a></p>
  
  <p>I would like to make the green box's height as small as possible:</p>
  
  <p><a href="https://i.stack.imgur.com/ho8DJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ho8DJ.png" alt="enter image description here"></a></p>
  
  <p>If the <code>ListView</code> widget is a direct children of the <code>Column</code> widget, the usual <code>Horizontal viewport was given unbounded height</code> exception is thrown. So i have to embed it inside a <code>Flexible</code> or <code>Expanded</code>.</p>