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),),
],
),
),
);
}
Verwenden Sie mit Column:
Die untergeordneten Elemente werden vertikal zur Mitte des übergeordneten Bereichs ausgerichtet
quelle
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.
quelle
Probier diese. Es zentriert vertikal und horizontal.
quelle
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
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:
quelle
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"), ), ], )
quelle
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.quelle