Flutter: coluna verticalmente central


103

Como centralizar verticalmente uma coluna no Flutter? Usei o widget "novo centro". Usei o widget "novo Centro", mas ele não centraliza verticalmente minha coluna? Qualquer idéia será útil....

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("Thank you"),
    ),
    body: new Center(
      child: new Column(
        children: <Widget>[
          new Padding(
            padding: new EdgeInsets.all(25.0),
            child: new AnimatedBuilder(
              animation: animationController,
              child: new Container(
                height: 175.0,
                width: 175.0,
                child: new Image.asset('assets/angry_face.png'),
              ),
              builder: (BuildContext context, Widget _widget) {
                return new Transform.rotate(
                  angle: animationController.value * 6.3,
                  child: _widget,
                );
              },
            ),
          ),
          new Text('We are glad we could serve you...', style: new TextStyle(
              fontSize: 16.0,
              fontWeight: FontWeight.w600,
              color: Colors.black87),),
          new Padding(padding: new EdgeInsets.symmetric(vertical: 5.0, horizontal: 0.0)),
          new Text('We appreciate your feedback ! !', style: new TextStyle(
              fontSize: 13.0,
              fontWeight: FontWeight.w200,
              color: Colors.black87),),
        ],
      ),
    ),
  );
}

Respostas:


175

A solução proposta por Aziz seria:

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children:children,
)

Não estaria exatamente no centro devido ao preenchimento:

padding: new EdgeInsets.all(25.0),

Para fazer a coluna exatamente central - pelo menos neste caso - você precisaria remover o preenchimento.


48

Experimentar:

Column(
 mainAxisAlignment: MainAxisAlignment.center,
 crossAxisAlignment: CrossAxisAlignment.center,
 children:children...)

2
Já tentei isso antes. Centra, mas não DEAD centra?
Zeusox

3
Era um problema de preenchimento. Agora funciona bem, obrigado!
Zeusox

17

Com a coluna, use:

mainAxisAlignment: MainAxisAlignment.center

Ele alinha seus filhos ao centro de seu Espaço pai verticalmente


13

Tente este. Ele é centralizado verticalmente e horizontalmente.

Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: children,
  ),
)

12

Você controla como uma linha ou coluna alinha seus filhos usando as propriedades mainAxisAlignment e crossAxisAlignment. Para uma linha, o eixo principal é executado horizontalmente e o eixo cruzado é executado verticalmente. Para uma coluna, o eixo principal é executado verticalmente e o eixo cruzado é executado horizontalmente.

 mainAxisAlignment: MainAxisAlignment.center,
 crossAxisAlignment: CrossAxisAlignment.center,

6

Outra solução!

Se você deseja definir widgets na forma vertical central, você pode usar ListView para isso. por exemplo: usei três botões e os adicionei dentro de ListView, seguido por

shrinkWrap: true -> Com este ListView ocupa apenas o espaço necessário.

import 'package:flutter/material.dart';

class List extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final button1 =
        new RaisedButton(child: new Text("Button1"), onPressed: () {});
    final button2 =
        new RaisedButton(child: new Text("Button2"), onPressed: () {});
    final button3 =
        new RaisedButton(child: new Text("Button3"), onPressed: () {});
    final body = new Center(
      child: ListView(
        shrinkWrap: true,
        children: <Widget>[button1, button2, button3],
     ),
    );

    return new Scaffold(
        appBar: new AppBar(
          title: Text("Sample"),
        ),
        body: body);
  }
}    
void main() {
  runApp(new MaterialApp(
    home: List(),
  ));
}

Resultado: insira a descrição da imagem aqui


Isso é exatamente o que eu precisava. Adoro a forma como Center e ListView são combinados aqui.
Julian Otto

4

Para mim o problema era que havia expandido dentro da coluna que eu tive que remover e funcionou.

Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Expanded( // remove this
              flex: 2,
              child: Text("content here"),
            ),
          ],
        )

3

Ao usar a coluna, use isto dentro do widget de coluna:

mainAxisAlignment: MainAxisAlignment.center

Ele alinha seus filhos ao centro de seu pai. O espaço é seu eixo principal, ou seja, verticalmente

ou envolva a coluna com um widget Center:

Center(
  child: Column(
    children: <ListOfWidgets>,
  ),
)

se isso não resolver o problema, envolva o contêiner pai com um widget Expandido.

Expanded(
   child:Container(
     child: Column(
       mainAxisAlignment: MainAxisAlignment.center,
       children: children,
     ),
   ),
)

1

Você poderia usar. mainAxisAlignment:MainAxisAlignment.center Isso fará com que o material passe pelo centro da coluna. `crossAxisAlignment: CrossAxisAlignment.center 'Isso alinhará os itens no centro na linha.

Container( alignment:Alignment.center, Child: Column () )

Basta usar. Center ( Child: Column () ) ou rap com o widget de preenchimento. E ajuste o Padding de forma que os filhos da coluna fiquem no centro.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.