14

I can't figure out how to do this layout in Flutter. What I'm trying to achieve is:

  • I have a column, containing a fixed height child (title Text widget) and two Expanded widgets. I'm using expanded because I want each to share half the remaining screen.
  • When orientation changes to landscape, there is not enough room to properly show the contents of the expanded widgets. So what I want is to apply a minimum height on these 2 widgets, and for it to become scrollable.

I hope that makes sense - I have no idea how to implement this. I've tried lots of combinations of Expanded, Flexible, Column, SingleChildScrollView, min column axis size etc. but everything I try results in some kind of infinite height exception. Is this even possible?

Here's some example code: the following works fine. How to implement scroll and minimum height on the two placeholders?

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: <Widget>[
            Text("Title"),
            // I need to apply a minimum height on these two widgets,
            // and it should be scrollable if necessary:
            Expanded(
              child: Placeholder(),
            ),
            Expanded(
              child: Placeholder(),
            )
          ],
        ),
      ),
    );
  }
}

2 Answers 2

8

This has worked for me:

import 'dart:math'; // for max function

// Add the following around your column
LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    return SingleChildScrollView(
      child: ConstrainedBox(
        constraints: BoxConstraints.tightFor(height: max(500, constraints.maxHeight)),
        child: Column(), // your column
      ),
    );
  },
);

Replace 500 with the minimum height you want for the Column.

1
  • worked for me. My scene is Stack containing a scrollview which the height could be infinite. Should use the LayoutBuilder to limit the height of its content. Feb 8, 2021 at 15:40
3

Use Flexible instead

double height = MediaQuery.of(context).size.height;
Container(
  height:height
  child:Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Flexible(
     child:Container()
    ),
    Container(
     height:200
    ) 
  ])
)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.