CODEWITHSUNDEEP
flutterflutter-layout
Francesco Iapicca
Francesco Iapicca

Reputation: 2657

SingleChildScrollView + Column: either overflow or ignore mainAxisAlignment

[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

Upvotes: 5

Views: 8547

Answers (6)

ismail
ismail

Reputation: 197

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

Upvotes: 0

Unes
Unes

Reputation: 80

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

Upvotes: 0

Karem Mohamed
Karem Mohamed

Reputation: 379

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

Upvotes: 3

Sung Pham
Sung Pham

Reputation: 1

  1. Set your row's item with a fixed height, should be screen width / 2 in this case.
  2. 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,
                )),
          ],
        ),
      );
}

Upvotes: 0

SLendeR
SLendeR

Reputation: 947

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

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

Upvotes: 14

Salim Murshed
Salim Murshed

Reputation: 1451

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

Upvotes: 0

Related Questions