Flutter: Can't get container in SingleChildScrollView to extend vertically

Question

I've spent the last 2 hours trying every method I could find (Expanded, IntrinsicHeight, BoxConstraints, etc) to try and get a container with a column of widget to extend to the full height. The container is inside a SingleChildScrollView because I need scrolling capabilities. This probably is part of the problem, but I can't seem to figure out why exactly.

This is the current behaviour:

This is the wanted behaviour:

This is my raw code:

class CreateNewArtikel extends StatefulWidget {
  @override
  _CreateNewArtikelState createState() => _CreateNewArtikelState();
}

class _CreateNewArtikelState extends State<CreateNewArtikel> {
  final titleController = TextEditingController();
  final subtitleController = TextEditingController();
  final tagsController = TextEditingController();
  final authorController = TextEditingController();
  final textController = TextEditingController();

  File imageFile;

  @override
  Widget build(BuildContext context) {
    final isAdmin = Provider.of<bool>(context);

    if (isAdmin == true) {
      return GlobalScaffold(
        body: SingleChildScrollView(
          child: Container(
            color: Colors.yellow,
            padding: EdgeInsets.symmetric(horizontal: 20, vertical: 15),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Container(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      GradientHeading(
                        large: true,
                        text: "Skapa ny artikel",
                      ),
                      SizedBox(height: 15),
                      CustomTextFormField(
                        labelText: "Rubrik",
                        controller: titleController,
                      ),
                      CustomTextFormField(
                        labelText: "Underrubrik",
                        controller: subtitleController,
                      ),
                      CustomTextFormField(
                        labelText: "Tags",
                        controller: tagsController,
                      ),
                      CustomTextFormField(
                        labelText: "Skriven av",
                        controller: authorController,
                      ),
                      CustomTextFormField(
                        labelText: "Text",
                        controller: textController,
                        multiline: true,
                      ),
                      imageFile != null
                          ? NormalButton(
                              text: "Ta bort bild",
                              shouldOverideColor: true,
                              overriddenColor: redWarningColor,
                              onPressed: () {
                                imageFile = null;
                                setState(() {});
                              },
                            )
                          : NormalButton(
                              text: "Ladda upp bild",
                              outlined: true,
                              outlinedBgColor: primaryColor,
                              onPressed: () async {
                                imageFile = await ChooseImage()
                                    .chooseImageFromGallery();
                                setState(() {});
                              },
                            ),
                      imageFile != null
                          ? Image(
                              image: FileImage(imageFile),
                            )
                          : Container(),
                      SizedBox(height: 40),
                    ],
                  ),
                ),
                NormalButton(
                  text: "Skapa artikel",
                  onPressed: () async {
                    DatabaseService().createNewArtikel(
                      titleController.text,
                      subtitleController.text,
                      tagsController.text,
                      authorController.text,
                      textController.text,
                      imageFile,
                    );
                    Navigator.pop(context);
                  },
                ),
              ],
            ),
          ),
        ),
      );
    } else {
      return GlobalScaffold(
        body: Text("You don't have access to this page"),
      );
    }
  }
}

score 1 · Accepted Answer · answered Jan 21 '20 at 12:27

Try this approach:

LayoutBuilder(
  builder: (context, constraint) {
    return SingleChildScrollView(
      child: ConstrainedBox(
        constraints: BoxConstraints(minHeight: constraint.maxHeight),
        child: IntrinsicHeight(
          child: Column(
            children: <Widget>[
              Text("Header"),
              Expanded(
                child: Container(
                  color: Colors.red,
                ),
              ),
              Text("Footer"),
            ],
          ),
        ),
      ),
    );
  },
)

For further information about this problem take a look at this discussion: How to use Expanded in SingleChildScrollView?

Wow, big thanks! Worked really well with just a few widgets. Have a nice day :) — Rasmus Lian, Jan 21 '20 at 17:02

score 0 · Answer 2 · answered Jan 21 '20 at 13:25

0

Add the following to build()

final double hsize = MediaQuery.of(context).size.height;
final double pageHeight = hsize - kToolbarHeight -24;

(24 is the height of the statusbar in Android)

And add the following to your Container()

height: pageHeight

answered Jan 21 '20 at 13:25

Arhaam Patvi

640
5
13

Flutter: Can't get container in SingleChildScrollView to extend vertically

2 Answers2