フラッター：垂直方向に中央の列

Flutterで列を垂直方向に中央揃えする方法は？ウィジェット「newCenter」を使用しました。ウィジェット「新しいセンター」を使用しましたが、列が垂直方向に中央に配置されませんか？どんなアイデアも役に立ちます。

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

Azizによって提案された解決策は次のとおりです。

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

パディングのため、正確な中心にはなりません。

padding: new EdgeInsets.all(25.0),

正確に中央の列を作成するには（少なくともこの場合）、パディングを削除する必要があります。

試してみてください：

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

カラムでは、以下を使用します。

mainAxisAlignment: MainAxisAlignment.center

子を親スペースの中心に垂直に配置します

これを試してください。垂直方向と水平方向に中央に配置されます。

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

mainAxisAlignmentプロパティとcrossAxisAlignmentプロパティを使用して、行または列が子を整列する方法を制御します。行の場合、主軸は水平方向に実行され、交差軸は垂直方向に実行されます。列の場合、主軸は垂直方向に実行され、交差軸は水平方向に実行されます。

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

別の解決策！

ウィジェットを中央の垂直形式で設定する場合は、ListViewを使用できます。例：3つのボタンを使用して、ListView内に追加し、その後に

シュリンクラップ：true->このListViewでは、必要なスペースのみを占有します。

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

出力：

私にとって問題は、私が削除しなければならなかったカラムの内側にエキスパンドがあり、それが機能したことでした。

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

列を使用している間、列ウィジェット内でこれを使用します。

mainAxisAlignment: MainAxisAlignment.center

子を親の中心に揃えますスペースは主軸、つまり垂直方向です

または、列をCenterウィジェットでラップします。

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

問題が解決しない場合は、親コンテナを拡張ウィジェットでラップします。

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

使用できます。 mainAxisAlignment:MainAxisAlignment.center これにより、材料は柱の中央を通ります。`crossAxisAlignment：CrossAxisAlignment.center 'これにより、行の中央にあるアイテムが整列されます。

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

単に使用してください。 Center ( Child: Column () ) またはパディングウィジェットでラップします。そして、列の子が中央になるようにパディングを調整します。