Wynell
Wynell

Reputation: 805

How do I place a widget in the center of the screen while ignoring column?

There is a widget (for example text). In the real example it comes after another widget in Column. How to put it in the center of the screen? As I understand it, the Column does not. How can this be done? Or are there other ways to specify the location of items? enter image description here

Upvotes: 0

Views: 690

Answers (3)

lazos
lazos

Reputation: 1075

Column takes all the available space of the parent and by default aligns the items to start

You can change fix this changes the MainAxisAlignment to center.

child: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Text("test"),
  ],
),

or changing parents height and move it to the center (be careful if you add many items it will cause overflow)

child: Center(
  child: Container(
    height: 25,
    child: Column(
      children: <Widget>[
        Text("test"),
      ],
    ),
  ),
),

Upvotes: 1

Sunny
Sunny

Reputation: 3265

No worries where it comes from. It depends on the view where you have added it.

If you want to show in the center then just use Center widget

If you want to use Container widget then, you have to add the width and height both to double.infinite

If you want to use it in the same widget then you can use the Stack widget as well.

It totally depends on the requirement of the view and in which way you are tried to implement it.

Upvotes: 0

Dharmesh Mansata
Dharmesh Mansata

Reputation: 4738

Using Stack widget you can do it:

var textEmpty = Text("Some Text");

Stack(children: <Widget>[
          Column(children: <Widget>[
            Container(
              ,margin: EdgeInsets.only(top: 100.0)
              ,child:  Center(child: textEmpty, ),)],),
          listView,
 ]);                                                                                        

Use Center Wigdet instead of Container. Hope this helps!

Upvotes: 0

Related Questions