최대 너비

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

긴 텍스트가 있는 카드는 화면 너비만큼 넓어집니다. 휴대전화에서는 괜찮아 보이지만, 태블릿에서는 같은 카드가 1,000픽셀 길이의 한 줄로 늘어나 읽기 어렵습니다.

ConstrainedBox는 자식의 크기에 제한을 설정합니다. maxWidth:는 자식이 커질 수 있는 최대 너비입니다.

ConstrainedBox(
  constraints: const BoxConstraints(maxWidth: 400),
  child: Container(...),
)

화면 너비가 400픽셀보다 좁으면 카드는 화면에 맞게 계속 줄어듭니다. 화면이 더 넓으면 카드 너비는 400에서 멈추고, 텍스트는 더 많은 줄로 나뉩니다.

BoxConstraints에는 minWidth:, minHeight:, maxHeight:도 사용할 수 있습니다. 최소값은 자식이 가질 수 있는 가장 작은 크기이므로, 자식이 커지는 것을 막지는 않습니다.

챌린지

쉬움

넓은 화면에서도 인용문 카드를 읽기 쉽게 유지하세요. 최대 320픽셀 너비까지 늘어나도록 하세요.

직접 해보기

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('Quote of the Day')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Center(
            child: Container(
              padding: const EdgeInsets.all(24),
              decoration: BoxDecoration(
                color: Colors.amber.shade100,
                borderRadius: BorderRadius.circular(16),
              ),
              child: const Text(
                'The best way to learn to build apps is to build apps, one small screen at a time.',
                style: TextStyle(fontSize: 20),
              ),
            ),
          ),
        ),
      ),
    );
  }
}