Flutter : 세로 중앙 열

Flutter에서 세로로 기둥을 중앙에 배치하는 방법은 무엇입니까? 나는 위젯 "new Center"를 사용했습니다. "새 센터"위젯을 사용했는데 세로로 열 중앙에 있지 않습니까? 어떤 아이디어라도 도움이 될 것입니다 ....

@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...)

Column으로 다음을 사용하십시오.

mainAxisAlignment: MainAxisAlignment.center

자식 (들)을 부모 공간의 중앙에 수직으로 정렬합니다.

이걸로 해봐. 수직 및 수평 중앙에 위치합니다.

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

mainAxisAlignment 및 crossAxisAlignment 속성을 사용하여 행 또는 열이 자식을 정렬하는 방법을 제어합니다. 행의 경우 주축은 수평으로 이어지고 교차 축은 수직으로 이어집니다. 기둥의 경우 주축은 수직으로 이어지고 교차 축은 수평으로 이어집니다.

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

또 다른 해결책!

위젯을 가운데 세로 형태로 설정하려면 ListView를 사용할 수 있습니다. 예를 들어 : 세 개의 버튼을 사용하고 ListView 안에 추가 한 다음

shrinkWrap : 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"),
            ),
          ],
        )

Column을 사용하는 동안 열 위젯 내에서 사용하십시오.

mainAxisAlignment: MainAxisAlignment.center

자식 (들)을 부모의 중심에 정렬합니다. Space는 주축입니다.

또는 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 () ) 또는 패딩 위젯으로 랩합니다. 그리고 열 자식이 중앙에 있도록 Padding을 조정하십시오.