Flutter에서 열에 ListView를 추가하는 방법은 무엇입니까?

Flutter에서 열에 ListView를 추가하는 방법은 무엇입니까?

---

Flutter 앱을위한 간단한 로그인 페이지를 구성하려고합니다. TextFields 및 로그인 / 로그인 버튼을 성공적으로 구축했습니다. 수평 ListView를 추가하고 싶습니다. 코드를 실행하면 요소가 사라지고 ListView없이 수행하면 다시 괜찮습니다. 이를 올바르게 수행하려면 어떻게해야합니까?

return new MaterialApp(
        home: new Scaffold(
          appBar: new AppBar(
            title: new Text("Login / Signup"),
          ),
          body: new Container(
            child: new Center(
              child: new Column(
              mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  new TextField(
                    decoration: new InputDecoration(
                      hintText: "E M A I L    A D D R E S S"
                    ),
                  ),
                  new Padding(padding: new EdgeInsets.all(15.00)),
                  new TextField(obscureText: true,
                    decoration: new InputDecoration(
                      hintText: "P A S S W O R D"
                    ),
                    ),
                  new Padding(padding: new EdgeInsets.all(15.00)),
                  new TextField(decoration: new InputDecoration(
                    hintText: "U S E R N A M E"
                  ),),
                  new RaisedButton(onPressed: null,
                  child:  new Text("SIGNUP"),),
                  new Padding(padding: new EdgeInsets.all(15.00)),
                  new RaisedButton(onPressed: null,
                  child: new Text("LOGIN"),),
                  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),
          ),
        ),
      );

---

콘솔 출력을 확인할 수 있습니다. 오류를 인쇄합니다.

performResize () 중에 다음 어설 션이 발생했습니다. 수평 뷰포트에 무제한 높이가 제공되었습니다. 뷰포트는 교차 축에서 확장되어 컨테이너를 채우고 교차 축의 범위와 일치하도록 자식을 제한합니다. 이 경우 수평 뷰포트에는 확장 할 수있는 무제한의 수직 공간이 주어졌습니다.

가로 목록에 높이 제한을 추가해야합니다. 예 : 높이가있는 컨테이너 포장 :

new Container(
  height: 44.0,
  child: 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"),
      )
    ],
  ),
)

---

I've got this problem too. My solution is use Expanded widget to expand remain space.

new Column(
  children: <Widget>[
    new Expanded(
      child: horizontalList,
    )
  ],
);

---

Reason for the error:

Column expands to the maximum size in main axis direction (vertical axis), and so does the ListView.

Solutions

So, you need to constrain the height of the ListView. There are many ways of doing it, you can choose that best suits your need.

---

1. If you want to allow ListView to take up all remaining space inside Column use Expanded.

   Column(
     children: <Widget>[
       Expanded(
         child: ListView(...),
       )
     ],
   )
   

---

2. If you want to limit your ListView to certain height, you can use SizedBox.

   Column(
     children: <Widget>[
       SizedBox(
         height: 200, // constrain height
         child: ListView(),
       )
     ],
   )
   

---

3. If your ListView is small, you may try shrinkWrap property on it.

   Column(
     children: <Widget>[
       ListView(
         shrinkWrap: true, // use it
       )
     ],
   )
   

ReferenceURL : https://stackoverflow.com/questions/45669202/how-to-add-a-listview-to-a-column-in-flutter