Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to add empty space between columns using SingleChildScrollView Flutter

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

enter image description here

without SingleChildScrollView

enter image description here

>Solution :

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

OR

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

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading