[플러터]Column 안에 ListView

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          MyListView(),
        ],
      ),
    );
  }

그리고

class MyListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: (context, index) {
        return Text("Row $index");
      },
      itemCount: 10,
    );
  }
}

실행을 해보면 화면에 아무것도 안뜨고 에러가 하나 뜨는데,

Viewports expand in the scrolling direction to fill their container. In this case, a vertical viewport was given an unlimited amount of vertical space in which to expand. This situation typically happens when a scrollable widget is nested inside another scrollable widget.

Viewports expand in the scrolling direction to fill their container. 
In this case, a vertical viewport was given an unlimited amount of vertical space in which to expand. 
This situation typically happens when a scrollable widget is nested inside another scrollable widget.

현재 listview의 부모는 Column입니다. 그런데 이 column의 height는 무한입니다.

그래서 ListView에게 "너는 이만큼의 공간을 차지해!" 라고 말해줘야합니다.
그 방법으로는 크기가 정해진 Widget으로 감싸주면됩니다.

가장 대표적인 스탕일링 위젯인 Container에 넣어보면

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          Container(
            height: 100,
            child: MyListView(),
          ),
        ],
      ),
    );
  }

잘 뜹니다! 근데, 이렇게하면 5번째줄까지밖에 안보이네요. 크기가 동적으로 바뀌게 하려면 어떻게 해야할까요?

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          Expanded(child: MyListView()),
        ],
      ),
    );
  }

Expanded 위젯을 이용하면됩니다.

https://api.flutter.dev/flutter/widgets/Expanded-class.html

Using an Expanded widget makes a child of a Row, Column, or Flex expand to fill the available space along the main axis (e.g., horizontally for a Row or vertically for a Column). If multiple children are expanded, the available space is divided among them according to the flex factor.

Expanded를 이용하면 MyListView에게 "너가 가질수 있는 공간은 이만큼이야" 라고 확실하게 말을 해줍니다.
그리고 ListView는 이에 맞게 widget을 렌더링할수 있는거죠

문서상의 expand to fill the available space along the main axis 는 무슨뜻일까요?

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          Container(
            color: Colors.red,
            height: 30,
          ),
          Expanded(child: MyListView()),
          Container(
            color: Colors.green,
            height: 30,
          ),
        ],
      ),
    );
  }

위 예시를 보면 조금 감이 잡히나요?

Container처럼 사이즈가 명시된 애들을 먼저 할당해주고, 남은 공간을 Extended에게 주게됩니다.

밑에 dartpad를 embed해놨으니 이것저것 실험해보세요~!

dartpad.dev/e08b0cd5f54a1c598a6ea17fd1f71e5d