CODEWITHSUNDEEP
flutterflutter-layout
James Allen
James Allen

Reputation: 7169

Flutter: min height, Expanded and SingleChildScrollView?

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

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(),
            )
          ],
        ),
      ),
    );
  }
}

Upvotes: 15

Views: 17616

Answers (2)

ferso
ferso

Reputation: 99

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
    ) 
  ])
)

Upvotes: 4

Rustem Kakimov
Rustem Kakimov

Reputation: 2671

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.

Upvotes: 11

Related Questions