How to add empty space between columns using SingleChildScrollView Flutter

Question

And I use a column in which there are 2 more columns and align them using the MainAxisAlignment.spaceBetween property so that there is an empty space between them. But on small screens, I don't have enough space for all the widgets, so I decided to add a SingleChildScrollView to allow scrolling. But I ran into a problem that then the empty space between the columns disappears. Tell me how to add scrolling and keep empty space between columns?

code

Expanded(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                children: [
                  const Divider(
                    color: constants.Colors.greyMiddle,
                    height: 1,
                  ),
                  _createDrawerItem(
                      SvgPicture.asset(
                        constants.Assets.profile,
                      ),
                      'My Profile'),
                  const Divider(
                    color: constants.Colors.greyMiddle,
                    height: 1,
                  ),
                  _createDrawerItem(SvgPicture.asset(constants.Assets.profile),
                      'My Preferences'),
                  const Divider(
                    color: constants.Colors.greyMiddle,
                    height: 1,
                  ),
                  _createDrawerItem(
                      SvgPicture.asset(constants.Assets.dashboard),
                      'Dashboard'),
                  const Divider(
                    color: constants.Colors.greyMiddle,
                    height: 1,
                  ),
                  _createDrawerItem(
                      SvgPicture.asset(constants.Assets.wallet), 'Wallet'),
                  const Divider(
                    color: constants.Colors.greyMiddle,
                    height: 1,
                  ),
                ],
              ),
              // const Spacer(),
              Padding(
                padding: const EdgeInsets.only(bottom: 19),
                child: Column(
                  children: [
                    _createDrawerItem(SvgPicture.asset(constants.Assets.invite),
                        'Invite & Earn !',
                        horPadding: 11),
                    _createDrawerItem(
                        SvgPicture.asset(constants.Assets.settings), 'Settings',
                        horPadding: 11),
                  ],
                ),
              ),
            ],
          ),
        ),
      );

added SingleChildScrollView

without SingleChildScrollView

Solution

Column(
  children: [
    ....
  ]
),
SizedBox(
  height: 100,//custom height
),
Column(
  children: [
    ....
  ]
),

OR

Column(
  children: [
    ....
  ]
),
Padding(
    padding: EdgeInsets.only(top:100),
    Column(
      children: [
        ....
      ]
    ),
),

Comments

[Ivo]

Interesting situation. Might be impossible to do like you want, but I'm not sure. Maybe you could just wrap the top column in a SingleChildScrollView, that way the bottom two items are always in view, and the rows above are scrollable for smaller screens.

[Max]

Yes, as I can rather impossible. But I'll try another option. By the way, thanks also for your idea, I'll try to use it :)

[Max]

And if I need to make the empty space always change depending on the screen size. That is, if the screen is small - there is less empty space, if the screen is large - there is more empty space?

[aedemirsen]

to change height dynamicly, you can use Expanded, and it takes all the space it can take. But, using scroll view make it impossible. But if you wrap your scrollView with SizedBox than it can be managable.