본문 바로가기
Flutter/Flutter FAQ

Flutter 플러터: 세로 중앙에 열 정렬하기, Flutter : Vertically center column

by 베타코드 2023. 5. 12.
반응형

질문


Flutter에서 열을 수직 중앙에 배치하는 방법은 무엇인가요? "새로운 Center" 위젯을 사용했습니다. "새로운 Center" 위젯을 사용했지만 열을 수직으로 중앙에 배치하지 않습니다. 아이디어가 있다면 도움이 될 것입니다....

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("감사합니다"),
    ),
    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('당신을 도울 수 있어서 기쁩니다...', 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('피드백에 감사드립니다 ! !', style: new TextStyle(
              fontSize: 13.0,
              fontWeight: FontWeight.w200,
              color: Colors.black87),),
        ],
      ),
    ),
  );
}

답변


아지즈가 제안한 솔루션은 다음과 같습니다:

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    //여기에 위젯을 넣으세요...
  ],
)

패딩 때문에 정확히 중앙에 위치하지는 않을 것입니다:

padding: EdgeInsets.all(25.0),

이 경우 정확히 중앙에 위치하는 Column을 만들려면 패딩을 제거해야합니다.

반응형

댓글