Child inside Column shrinkwrap when height is short and scrollable when height is overflow

Question

Let say there is a Column widget that is always fits its children size. The ContentWidget is a widget with dynamic size. And the ContentWidget is showing with its height when the height is short than the screen size; and will allow scrolling when its height is reaching the screen size overflow.

Is there any way I can obtain this layout?

I have faced this kind of design quite many times, the easiest solution i have used is to use MultiChildLayout to get the height during the build and call its rebuild again, but this is not a good solution as this required to draw once. Just want to know if there is any more precise way to do this. Thank you!

Eg.

Short:

Long:

white color background is the whole screen. red + yellow is the column

red + yellow is showing as its height unless yellow is too high that let the Column(red+yellow) is larger than the screen (white area), then the yellow part will be scrollable

Update: I have tried following code, but the the singleChildScrollView will overflow the bottom. Do you have any advice?

 @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.yellow,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        mainAxisSize: MainAxisSize.min,
        children: [
          Text('header'),
          SingleChildScrollView(
              child: Text(
                  'long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long text')),
          Text('footer'),
        ],
      ),
    );
  }
}

Answer 1

Here is your example. The key you are missing is a Widget called Flexible. It's an important Widget for these types of cases you will learn about it after you have been doing Flutter dev for a while.

      import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final exampleText = Text(
      'long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long text');
  List<Widget> content = [];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Container(
            child: Center(child: Text('header')),
            color: Colors.red,
          ),
          Flexible(
            child: SingleChildScrollView(
                child: Container(
              color: Colors.yellow,
              child: Column(children: content),
            )),
          ),
          Container(
            child: Center(child: Text('footer')),
            color: Colors.red,
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          setState(() {
            content.add(exampleText);
          });
        },
      ),
    );
  }
}

Official Flutter video about it.