CODEWITHSUNDEEP
dartflutterflutter-layout
FlutterFirebase
FlutterFirebase

Reputation: 2343

How to Center ListView?

I have Column but issue is if screen very small height there is error:

BOTTOM OVERFLOWED BY 5.0 PIXELS

Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        CenterBoxText(),
                        SizedBox(height: 1),
                        RaisedButton(
                          child: Text(‘Example’),
                        ),
                      ],
                    ),

I have try replace Column with ListView and this stop error. But now on large screen Widget are display from top and not in center. Because ListView no have mainAxisAlignment: MainAxisAlignment.center.

How to solve?

Thanks!

Upvotes: 1

Views: 889

Answers (3)

anmol.majhail
anmol.majhail

Reputation: 51206

Replace your Column with ListView.

In your ListView - add - shrinkWrap: true, then wrap your ListView with Center widget.

Upvotes: 0

Sameer Carpenter
Sameer Carpenter

Reputation: 128

Try wrapping your Column widget with SingleChildScrollView widget, It will provide the ability to scroll. Like this :

 SingleChildScrollView(
              child: Column(
                       mainAxisAlignment: MainAxisAlignment.center,
                       children: <Widget>[
                         CenterBoxText(),
                         SizedBox(height: 1),
                         RaisedButton(
                           child: Text(‘Example’),
                         ),
                       ],
                     ),
                    ),

Upvotes: 1

Val
Val

Reputation: 1350

If you are having problems with the Column creating an overflow, then it is probably overflow in the vertical axis. ListView enables scrolling in the vertical axis and allows the overflow pixels to be below the viewing screen. That is why ListView works for you and Column doesn't. Since you want Column, then you just need to wrap the Column in an Expandable so the Column fits within the available space.

Here is a complete example:

import 'package:flutter/material.dart';

class ColumnTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Expanded(
              child: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
                //CenterBoxText(),
                SizedBox(height: 1),
                RaisedButton(
                  child: Text('example'),
                ),
            ],
          ),
              ))
        ],
      ),
    );
  }
}

Upvotes: 0

Related Questions