Flutter column widget: childs with different heights - flutter

Question

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:
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() => _SampleAppPageState();
}
class _SampleAppPageState extends State<SampleAppPage> {
FxManager fxManager;
bool showLoadingDialog = true;
#override
void initState() {
super.initState();
//loadData();
fxManager = FxManager();
fxManager.init().then( (dynamic) => initInterface() );
}
void initInterface(){
setState(() {
showLoadingDialog = false;
});
}
getBody() {
if (showLoadingDialog) {
return getProgressDialog();
} else {
return getEffectsWidget();//getListView();
}
}
getProgressDialog() {
return Center(child: CircularProgressIndicator());
}
getEffectsWidget() {
return
Column(
children: <Widget>[
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<Widget> widgets = [];
for (int i = 0; i < 100; i++) {
widgets.add(Padding(
padding: EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
/*
Expanded(
child: Container(),
),*/
FlatButton(
onPressed: () => {},
color: Colors.orange,
padding: EdgeInsets.all(10.0),
child: Column(
// Replace with a Row for horizontal icon + text
children: <Widget>[Icon(Icons.add), Text("Add")],
)),
],
)));
}
return widgets;
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Sample App"),
),
body: getBody());
}
}
produce this result:
I would like to make the green box's height as small as possible:
If the ListView widget is a direct children of the Column widget, the usual Horizontal viewport was given unbounded height exception is thrown. So i have to embed it inside a Flexible or Expanded.

Answer 1

Desired Output:
getEffectsWidget() {
return Column(children: <Widget>[
Expanded(
child: Container(
color: Color.fromARGB(255, 255, 0, 0),
child: Center(child: Text("Image")))),
Container(
color: Color.fromARGB(255, 0, 255, 0),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: _getListData(),
),
),
)
]);
}
static _getListData() {
List<Widget> widgets = [];
for (int i = 0; i < 100; i++) {
widgets.add(Padding(
padding: EdgeInsets.only(right: 10.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
/*
Expanded(
child: Container(),
),*/
FlatButton(
onPressed: () => {},
color: Colors.orange,
padding: EdgeInsets.all(10.0),
child: Column(
mainAxisSize: MainAxisSize.min,
// Replace with a Row for horizontal icon + text
children: <Widget>[Icon(Icons.add), Text("Add")],
)),
],
)));
}
return widgets;
}