CODEWITHSUNDEEP
fluttersinglechildscrollview
Brady Edgar
Brady Edgar

Reputation: 543

Vertically center content inside SingleChildScrollView with min height of screen height

I am trying to create a web layout that that consists of a scrollable column that has a min height of the screen height but can expand past the screen height if the content is too large. I have been able to create the scrolling container but I cannot vertically center the main content while still making the entire sections scrollable. The only working version I can get wont vertically center the content, I have to added a SizedBox above it to create padding to make it look centered but then its not responsive on different heights.

The parent of the content looks like this:

Container(
   width: MediaQuery.of(context).size.width / 2,
   height: double.infinity,
   padding: const EdgeInsets.fromLTRB(100, 30, 100, 0),
   child: SingleChildScrollView(
      child: Column(
         children: [
           LoginLayout(),
           SizedBox(height: 30),
         ],
       ),
   ),
 ),

Then to simplify the content column, its basically this:

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  mainAxisSize: MainAxisSize.min,
  children: [
    Padding(
      padding: const EdgeInsets.symmetric(vertical: 30),
      child: Image.asset(
        'assets/images/2.0x/logo-full.png',
        width: 125,
        fit: BoxFit.contain,
      ),
    ),
    // This column needs to be vertically centered if fits in the screen height
    Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: [
        Text('Welcome Back!', style: _textTheme.headline2),
        SizedBox(height: 10),
        Text('Sign in to continue', style: _textTheme.bodyText2),
        SizedBox(height: 60),
        EmailInput(label: 'EMAIL'),
        SizedBox(height: 30),
        PasswordInput(label: 'PASSWORD'),
        SizedBox(height: 60),
        Button(
          label: 'Login',
          icon: Icons.link,
          theme: ButtonColor.PRIMARY,
          onPressed: () {},
        ),
      ],
    ),
  ],
);

I was able to apply an Expanded widget around the centered column which did work but then I lost the ability to scroll if the content was larger that the screen height.

Here is an example for reference as well enter image description here

Upvotes: 1

Views: 3007

Answers (1)

MJ Montes
MJ Montes

Reputation: 3376

Not sure how to do that in SingleChildScrollView though,

try using ListView with shrinkWrap: true

Container(
    width: MediaQuery.of(context).size.width / 2,
    height: double.infinity,
    padding: const EdgeInsets.fromLTRB(100, 30, 100, 0),
    child: Center(
      child: ListView(
        shrinkWrap: true,
         children: [
           LoginLayout(),
         ],
       )
    ),
   )

Upvotes: 4

Related Questions