본문 바로가기
Flutter/Flutter FAQ

Flutter에서 Column에 ListView를 추가하는 방법은 무엇인가요?, How to add a ListView to a Column in Flutter?

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

질문

Flutter 앱을 위한 간단한 로그인 페이지를 만들려고합니다. TextFields와 로그인 / 가입 버튼을 성공적으로 만들었습니다. 가로 ListView를 추가하려고합니다. 코드를 실행하면 요소가 사라지지만 ListView없이 수행하면 다시 정상입니다. 올바르게 어떻게 할 수 있을까요?

return new MaterialApp(         home: new Scaffold(           appBar: new AppBar(             title: new Text("로그인 / 가입"),           ),           body: new Container(             child: new Center(               child: new Column(               mainAxisAlignment: MainAxisAlignment.center,                 children: <Widget>[                   new TextField(                     decoration: new InputDecoration(                       hintText: "이메일 주소"                     ),                   ),                   new Padding(padding: new EdgeInsets.all(15.00)),                   new TextField(obscureText: true,                     decoration: new InputDecoration(                       hintText: "비밀번호"                     ),                     ),                   new Padding(padding: new EdgeInsets.all(15.00)),                   new TextField(decoration: new InputDecoration(                     hintText: "사용자 이름"                   ),),                   new RaisedButton(onPressed: null,                   child:  new Text("가입"),),                   new Padding(padding: new EdgeInsets.all(15.00)),                   new RaisedButton(onPressed: null,                   child: new Text("로그인"),),                   new Padding(padding: new EdgeInsets.all(15.00)),                   new ListView(scrollDirection: Axis.horizontal,                   children: <Widget>[                     new RaisedButton(onPressed: null,                     child: new Text("Facebook"),),                     new Padding(padding: new EdgeInsets.all(5.00)),                     new RaisedButton(onPressed: null,                     child: new Text("Google"),)                   ],)                  ],               ),             ),             margin: new EdgeInsets.all(15.00),           ),         ),       ); 

답변

저도 같은 문제를 겪었습니다. 제 해결책은 Expanded 위젯을 사용하여 남은 공간을 확장하는 것입니다.

Column(   children: <Widget>[     Expanded(       child: horizontalList,     )   ], ); 
반응형

댓글