Flutter 열 안에 스크롤 가능한 컨테이너, Scrollable Container inside a Column

질문

나는 몇 가지 다른 접근 방식을 시도해봤지만 이 작업을 제대로 수행할 수 없습니다. 원하는 레이아웃은 매우 간단하며 원시 Android에서 구현하기 매우 쉽습니다:

• 위쪽에 고정된 컨테이너 (파랑)
• 아래쪽에 스크롤 가능한 컨테이너 (빨강). ListView는 내 경우에는 작동하지 않습니다.

SingleChildScrollView를 사용해보려고 했지만, Column 내에서 작동하지 않는 것 같습니다. 어떤 문제를 겪고 있는지 또는 올바른 위젯을 사용하지 않는 것인지 모르겠습니다...

내 결과:

Scaffold(
  body: Column(
    children: <Widget>[
      Container(
        height: 100.0,
        color: Colors.blue,
      ),
      SingleChildScrollView(
        child: Container(
          color: Colors.red,
          padding: EdgeInsets.all(20.0),
          child: Column(
            children: <Widget>[
              Text('빨간색 컨테이너는 스크롤 가능해야 함'),
              Container(
                width: double.infinity,
                height: 700.0,
                padding: EdgeInsets.all(10.0),
                color: Colors.white.withOpacity(0.7),
                child: Text('여기에 컬럼이 있을 것입니다'),
              )
            ],
          ),
        ),
      ),
    ],
  ),
)

답변

아마도 1년 후에는 그것을 해내셨을 것 같아요.

하지만 같은 문제를 찾는 다른 사람들에게는 가장 쉬운 방법은 SingleChildScrollView를 Expanded 위젯 안에 감싸는 것입니다.

Widget build(BuildContext context) =>
Scaffold(
  body: Column(
    children: <Widget>[
      Container(
        height: 100.0,
        color: Colors.blue,
      ),
      Expanded(
        child: SingleChildScrollView(
          child: Container(
            color: Colors.red,
            padding: EdgeInsets.all(20.0),
            child: Column(
              children: <Widget>[
                Text('빨간색 컨테이너는 스크롤 가능해야 합니다.'),
                Container(
                  width: double.infinity,
                  height: 700.0,
                  padding: EdgeInsets.all(10.0),
                  color: Colors.white.withOpacity(0.7),
                  child: Text('여기에 컬럼이 있을 것입니다.'),
                )
              ],
            ),
          ),
        ),
      ),
    ],
  ),
);