SingleChildScrollView + Column: either overflow or ignore mainAxisAlignment

Question

[SOLVED] I've updated dartpad with the working solution https://dartpad.dartlang.org/42415ce855bfcdc148eb03872c170c77

run the code below on dartpad and resize the browser page vertically;

you will notice in the example on the right that

the SingleChildScrollView doesn't scroll and the Column overflows


import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) => const MaterialApp(
        home: MyHomePage(),
      );
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) => Material(
        child: Row(
          children: [
            SingleChildScrollView(
              scrollDirection: Axis.vertical,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Text('''without wrapping the column in fixed heigth
                   [MainAxisAlignment.spaceEvenly] doesn't work'''),
                  for (int i = 0; i < 7; i++) const FlutterLogo(size: 80)
                ],
              ),
            ),
            SingleChildScrollView(
              scrollDirection: Axis.vertical,
              child: SizedBox(
                height: MediaQuery.of(context).size.height,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Text('''wrapping the column in fixed heigth
                   it overflow ignoring [SingleChildScrollView]'''),
                    for (int i = 0; i < 7; i++) const FlutterLogo(size: 80)
                  ],
                ),
              ),
            ),
          ],
        ),
      );
}

before posting this question I did some research

SingleChildScrollView inside Row

SingleChildScrollView 'cutting' the screen

SingleChildScrollView is not scrolling

SingleChildScrollView inside Row

and either the case is similar, but incompatible with my case

or just dodge the problem allthogether replacing one of the widget with a different one

(with altered result for my case);

I tried wrapping either the column and the scsv with a combination of

Expanded, ConstrainedBox, Container and SizedOverflowBox

without success, either breaking the app or losing the spaceEvenly property

I can use some help, thank you

do you need 2 SingleChildScrollView?? you can use 1 for the whole things — Salim Murshed, Sep 11 '20 at 10:12
no no, this is just a code sample, I just need a column that "spaceEvenly" and doesn't overflow — Francesco Iapicca, Sep 11 '20 at 10:13

score 5 · Accepted Answer · answered Sep 11 '20 at 10:29

Instead of SingleChildScrollView, you can give a shot to CustomScrollView like this;

return CustomScrollView(
  slivers: [
    SliverFillRemaining(
      hasScrollBody: false,
      child: Column(
        children: [
          // *  YOUR WIDGETS HERE
        ],
      ),
    ),
  ],
);

score 1 · Answer 2 · answered Mar 11 '21 at 18:58

You can use Align widget as the ancestor to your SingleChildScrollView and give it the alignment you need to the children like this

body: Align(
        alignment: Alignment.topCenter,  // Give it the alignment you need
        child: SingleChildScrollView(
          child: Column(
            children: [
            AnyWidget(),
         ),
       ),
     ],

score 0 · Answer 3 · edited Aug 09 '21 at 18:42

0

SingleChildScrollView widget must be a direct parent to the column or row, in your case the direct parent is sizebox widget. Now exchange SingleChildScrollView with sizebox. And it will work. You can see the whole code on DartPad

Change to this code

SizedBox(
      height: MediaQuery
          .of(context)
          .size
          .height,
      child: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Text('''wrapping the column in fixed heigth
           it overflow ignoring [SingleChildScrollView]'''),
            for (int i = 0; i < 7; i++) const FlutterLogo(size: 80)
          ],
        ),
      ),
    ),

edited Aug 09 '21 at 18:42

MashukKhan

1,842
1
26
44

answered Sep 11 '20 at 10:07

ismail

139
1
8

I took a screenshot from your dartpad, it seems to me it's still overflowing https://i.stack.imgur.com/wB6o7.png – Francesco Iapicca Sep 11 '20 at 10:11
may be your old code is saved, check it out my answer i edited it. – ismail Sep 11 '20 at 10:16
oh I see, you moved the sizedbox before the singlechildscrollview, but that way the column ignores the mainAxisAligniment ! – Francesco Iapicca Sep 11 '20 at 10:19

score 0 · Answer 4 · answered Sep 11 '20 at 10:15

Please check it out.

   Row(
      children: [
        Container(
          width: MediaQuery.of(context).size.width * .45,
          child: SingleChildScrollView(
            scrollDirection: Axis.vertical,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Text('''without wrapping the column in fixed heigth
                 [MainAxisAlignment.spaceEvenly] doesn't work'''),
                for (int i = 0; i < 7; i++) const FlutterLogo(size: 80)
              ],
            ),
          ),
        ),
        Container(
          width: MediaQuery.of(context).size.width * .45,
          child: SingleChildScrollView(
            scrollDirection: Axis.vertical,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Text('''wrapping the column in fixed heigth
               it overflow ignoring [SingleChildScrollView]'''),
                for (int i = 0; i < 7; i++) const FlutterLogo(size: 80)
              ],
            ),
          ),
        ),
      ],
    )

this way it ignores the "mainAxisAlignment", try changing the number of logos from 7 to 3 for example — Francesco Iapicca, Sep 11 '20 at 10:22

score 0 · Answer 5 · answered Sep 11 '20 at 10:34

Set your row's item with a fixed height, should be screen width / 2 in this case.
use ListView for scrollable

class SandBoxScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Material(
        child: Row(
          children: [
            Container(
                width: MediaQuery.of(context).size.width / 2,
                child: ListView.builder(
                  itemBuilder: (context, index) {
                    return FlutterLogo(size: 80);
                  },
                  itemCount: 7,
                )),
            Container(
                width: MediaQuery.of(context).size.width / 2,
                child: ListView.builder(
                  itemBuilder: (context, index) {
                    return FlutterLogo(size: 80);
                  },
                  itemCount: 7,
                )),
          ],
        ),
      );
}

your solution doesn't really "spaceEvenly" the children – Francesco Iapicca Sep 11 '20 at 11:02 — Francesco Iapicca, Sep 11 '20 at 11:02

score 0 · Answer 6 · answered Aug 07 '21 at 17:14

 SingleChildScrollView(
          scrollDirection: Axis.vertical,
          child: SizedBox(
              height: MediaQuery.of(context).size.height * 0.95,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                 Text('''without wrapping the column in fixed heigth
                 [MainAxisAlignment.spaceEvenly] doesn't work'''),
                 for (int i = 0; i < 7; i++) const FlutterLogo(size: 80)
             ],
            ),
          ),
        ),

your answer is just copy pasted from @ismail answer! – Zahra Aug 08 '21 at 13:04 — Zahra, Aug 08 '21 at 13:04

SingleChildScrollView + Column: either overflow or ignore mainAxisAlignment

6 Answers6

Linked