오버플로 해결: 스크롤

Coddy Flutter 여정의 화면 크기에 맞는 레이아웃 섹션에 포함된 레슨. 30개 중 7번째.

화면이 담을 수 있는 것보다 자식이 많은 Column은 아래쪽으로 넘칩니다. 휴대폰에는 정해진 높이가 있고, Column은 저절로 스크롤되지 않습니다.

SingleChildScrollView로 감싸세요. 그러면 열의 높이를 필요한 만큼 늘릴 수 있고, 화면을 드래그해 나머지를 볼 수 있습니다.

SingleChildScrollView(
  child: Column(
    children: [
      // 원하는 만큼 많은 자식 위젯
    ],
  ),
)

설정 페이지, 양식, 문서처럼 화면보다 긴 페이지에는 이 방법을 사용하면 됩니다. 같은 종류의 항목이 길게 이어지는 목록에는 이미 알고 있는 ListView가 같은 역할을 합니다.

스크롤 뷰는 열 전체를 둘러싸야 합니다. 각 자식을 개별 스크롤 뷰로 감싸면 열의 높이는 이전과 똑같이 유지됩니다.

챌린지

쉬움

주가 아래쪽으로 넘칩니다. 페이지를 스크롤할 수 있게 만들어 Sunday에 도달할 수 있도록 하세요.

직접 해보기

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    final days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('This Week')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            children: [
              for (final day in days)
                Container(
                  height: 120,
                  margin: const EdgeInsets.only(bottom: 12),
                  decoration: BoxDecoration(
                    color: Colors.lightBlue.shade100,
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: Center(child: Text(day, style: const TextStyle(fontSize: 20))),
                ),
            ],
          ),
        ),
      ),
    );
  }
}