Flattern: Spalte vertikal zentrieren

Wie zentriere ich eine Spalte in Flutter vertikal? Ich habe das Widget "new Center" verwendet. Ich habe das Widget "new Center" verwendet, aber meine Spalte wird nicht vertikal zentriert. Irgendwelche Ideen wären hilfreich ....

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

Die von Aziz vorgeschlagene Lösung wäre:

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

Es wäre wegen der Polsterung nicht genau in der Mitte:

padding: new EdgeInsets.all(25.0),

Um die mittlere Spalte genau zu erstellen - zumindest in diesem Fall - müssten Sie die Polsterung entfernen.

Versuchen:

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

Verwenden Sie mit Column:

mainAxisAlignment: MainAxisAlignment.center

Die untergeordneten Elemente werden vertikal zur Mitte des übergeordneten Bereichs ausgerichtet

Mit den Eigenschaften mainAxisAlignment und crossAxisAlignment steuern Sie, wie eine Zeile oder Spalte ihre untergeordneten Elemente ausrichtet. Bei einer Reihe verläuft die Hauptachse horizontal und die Querachse vertikal. Bei einer Spalte verläuft die Hauptachse vertikal und die Querachse horizontal.

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

Probier diese. Es zentriert vertikal und horizontal.

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

Eine andere Lösung!

Wenn Sie Widgets in vertikaler Mittelform festlegen möchten, können Sie ListView dafür verwenden. Zum Beispiel: Ich habe drei Schaltflächen verwendet und sie in ListView hinzugefügt, gefolgt von

shrinkWrap: true -> Mit dieser ListView wird nur der benötigte Platz belegt.

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

Ausgabe:

Für mich war das Problem, dass es innerhalb der Spalte erweitert wurde, die ich entfernen musste, und es funktionierte.

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

Du könntest benutzen. mainAxisAlignment:MainAxisAlignment.center Dadurch wird das Material durch die Mitte in der Spalte weise. `crossAxisAlignment: CrossAxisAlignment.center 'Hiermit werden die Elemente in der Mitte zeilenweise ausgerichtet.

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

Einfach benutzen. Center ( Child: Column () ) oder Rap mit Padding Widget. Stellen Sie die Polsterung so ein, dass sich die untergeordneten Spalten in der Mitte befinden.