오버플로 해결: 확장

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

Row 안의 Text는 한 줄로 길게 표시되려고 합니다. 줄이 행보다 길면 텍스트가 줄바꿈될 수 있는데도 행의 오른쪽으로 넘칩니다.

행이 각 자식 위젯의 너비를 원하는 만큼 허용하기 때문에 텍스트가 줄바꿈되지 않습니다. 텍스트를 Expanded로 감싸면 너비가 지정됩니다. 정확히 다른 자식 위젯이 남기는 공간만큼입니다. 너비가 지정된 텍스트는 여러 줄로 줄바꿈됩니다.

Row(
  children: [
    const Icon(Icons.info),
    const Expanded(
      child: Text('A long sentence that now wraps instead of spilling out.'),
    ),
  ],
)

이것이 오른쪽 오버플로를 해결하는 첫 번째 방법입니다. 줄어들어야 하는 자식 위젯에 Expanded를 적용하세요. 아이콘처럼 이미 작은 위젯을 감싸도 긴 텍스트에는 아무런 변화가 없습니다.

챌린지

쉬움

배송 주소가 오른쪽 가장자리 밖으로 삐져나옵니다. 주소가 여러 줄로 줄바꿈되도록 하고, 화살표는 행의 오른쪽 가장자리에 그대로 위치하게 하세요.

직접 해보기

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('Delivery')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            children: [
              Row(
                children: [
                  const Icon(Icons.location_on, color: Colors.red),
                  const SizedBox(width: 8),
                  const Text(
                    '221B Baker Street, Marylebone, London NW1 6XE, United Kingdom',
                  ),
                  const Icon(Icons.chevron_right),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}