Flutter: columna central verticalmente

96

¿Cómo centrar verticalmente una columna en Flutter? He utilizado el widget "Centro nuevo". He utilizado el widget "nuevo centro", pero no centra verticalmente mi columna. Cualquier idea será de gran ayuda....

@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),),
        ],
      ),
    ),
  );
}
Zeusox
fuente

Respuestas:

164

La solución propuesta por Aziz sería:

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

No estaría en el centro exacto debido al relleno:

padding: new EdgeInsets.all(25.0),

Para hacer exactamente la columna central, al menos en este caso, necesitaría quitar el relleno.

Zeusox
fuente
45

Tratar:

Column(
 mainAxisAlignment: MainAxisAlignment.center,
 crossAxisAlignment: CrossAxisAlignment.center,
 children:children...)
aziza
fuente
2
Probé esto antes. ¿Lo centra, pero no MUERTO lo centra?
Zeusox
3
Fue un problema de relleno. ¡Ahora funciona bien, gracias!
Zeusox
17

Con Columna, use:

mainAxisAlignment: MainAxisAlignment.center

Alinea sus hijos al centro de su espacio padre verticalmente

Deepak Swain
fuente
11

Puede controlar cómo una fila o columna alinea sus elementos secundarios mediante las propiedades mainAxisAlignment y crossAxisAlignment. Para una fila, el eje principal corre horizontalmente y el eje transversal corre verticalmente. Para una columna, el eje principal corre verticalmente y el eje transversal corre horizontalmente.

 mainAxisAlignment: MainAxisAlignment.center,
 crossAxisAlignment: CrossAxisAlignment.center,
DuhAlonso
fuente
11

Prueba este. Se centra vertical y horizontalmente.

Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: children,
  ),
)
Lucas Chwe
fuente
5

¡Otra solución!

Si desea configurar widgets en forma vertical central, puede usar ListView para ello. por ejemplo: utilicé tres botones y los agregué dentro de ListView que seguían

shrinkWrap: true -> Con este ListView solo ocupa el espacio que necesita.

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(),
  ));
}

Salida: ingrese la descripción de la imagen aquí

jitsm555
fuente
4

Para mí, el problema fue que se expandió dentro de la columna que tuve que eliminar y funcionó.

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

Podrías usar. mainAxisAlignment:MainAxisAlignment.center Esto hará que el material pase por el centro de la columna. `crossAxisAlignment: CrossAxisAlignment.center 'Esto alineará los elementos en el centro en la fila.

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

Simplemente use. Center ( Child: Column () ) o rapear con el widget Padding. Y ajuste el Relleno de modo que los niños de la columna estén en el centro.

SR Keshav
fuente