Make widget Expanded size as min height in SingleChildScrollView Widget

Question

Here is my code

child: Scaffold(
        resizeToAvoidBottomPadding: false,
        appBar: AppBar(),
        drawer: MyDrawer(),
        body: SingleChildScrollView(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            // direction: Axis.vertical,
            children: [
              Container(
                height: 400,
                child: Text('PageOne'),
              ),
              IntrinsicHeight(
                child: Expanded(
                  child: Container(
                    width: double.infinity,
                    color: Colors.grey,
                    child: Text(
                      'Hi',
                      textAlign: TextAlign.center,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),

I want this grey container in the screenshot fill the height as min height, I need it responsively with rotate the screen phone and for all phone screen size, it's only takes static height size when use SingleChildScrollView because unlimited height is available, i try to find way to make him take the remaining height of the screen as min height of container.

any ideas?

Answer 1

If you do know the height of the top part, you could use a mix of LayoutBuilder and ConstrainedBox like so:

import 'dart:math';

import 'package:flutter/material.dart';

main() {
  runApp(MaterialApp(home: MyApp()));
}

class MyApp extends StatelessWidget {
  final double headerHeight = 400;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomPadding: false,
      appBar: AppBar(),
      body: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
            return SingleChildScrollView(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                // direction: Axis.vertical,
                children: [
                  Container(
                    color: Colors.red,
                    height: headerHeight,
                    child: Text('PageOne'),
                  ),
                  ConstrainedBox(
                    constraints: new BoxConstraints(
                      minHeight: max(0, constraints.maxHeight - headerHeight),
                    ),
                    child: Container(
                      width: double.infinity,
                      color: Colors.grey,
                      child: Text(
                        'Hi',
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),
                ],
              ),
            );
          }
      ),
    );
  }
}

If you don't know the height of the top part, I would use key (or keys) to get their size and use the same widget tree as above.