오버플로 오류

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

휴대폰 화면은 작습니다. Row의 자식들이 화면 너비보다 더 많은 너비를 필요로 하면 Flutter는 넘치는 가장자리에 노란색과 검은색 줄무늬를 그린 다음 콘솔에 메시지를 출력합니다.

A RenderFlex overflowed by 60 pixels on the right.

이 메시지를 세 부분으로 나누어 읽어 보세요. RenderFlex는 Row 또는 Column입니다. 60 pixels는 자식들이 초과한 너비입니다. On the right는 행이 너무 넓다는 뜻이고, on the bottom은 열이 너무 높다는 뜻입니다.

이 숫자는 단순한 산술 결과입니다. 너비가 150픽셀인 상자 세 개에는 450픽셀이 필요하지만 휴대폰 너비는 390픽셀이므로 60픽셀이 넘칩니다. 자식들의 너비를 합쳐 60픽셀 줄이면 줄무늬가 사라집니다.

이 과정의 모든 검사는 너비가 390픽셀인 휴대폰에서 실행되므로, 오버플로가 발생하면 같은 메시지와 함께 검사가 실패합니다.

챌린지

쉬움

실행을 누르고 오른쪽 가장자리의 줄무늬를 찾아보세요. 그런 다음 세 개가 모두 휴대폰에 들어가도록 각 타일의 너비를 120픽셀로 설정하세요.

직접 해보기

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Trips')),
        body: Column(
          children: [
            Row(
              children: [
                Container(
                  width: 150,
                  height: 100,
                  color: Colors.orange,
                  child: const Center(child: Text('Beach')),
                ),
                Container(
                  width: 150,
                  height: 100,
                  color: Colors.green,
                  child: const Center(child: Text('Forest')),
                ),
                Container(
                  width: 150,
                  height: 100,
                  color: Colors.blueGrey,
                  child: const Center(child: Text('City')),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}