Expanded가 행을 채워요

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

Row는 각 자식에게 요청한 너비를 제공합니다. 너비가 지정되지 않은 상자는 텍스트 너비만큼만 차지하므로 나머지 행은 비어 있습니다.

자식을 Expanded로 감싸면 다른 자식들이 남긴 공간을 모두 차지합니다.

Row(
  children: [
    Container(width: 100, color: Colors.red),
    Expanded(
      child: Container(color: Colors.blue),
    ),
  ],
)

너비가 390픽셀인 휴대전화에서는 빨간색 상자가 100픽셀을 차지하고 파란색 상자는 나머지 290픽셀을 차지합니다. 화면이 더 넓으면 파란색 상자는 커지고 빨간색 상자는 100픽셀을 유지합니다.

Expanded는 Column에서도 작동하며, 남은 높이를 채웁니다.

챌린지

쉬움

검색 막대가 너무 짧습니다. Search 상자가 행의 나머지 공간을 채워 80픽셀 너비의 Menu 상자 옆에서 너비가 310픽셀이 되도록 하세요.

직접 해보기

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('Shop')),
        body: Column(
          children: [
            Row(
              children: [
                Container(
                  width: 80,
                  height: 56,
                  color: Colors.indigo,
                  child: const Center(
                    child: Text('Menu', style: TextStyle(color: Colors.white)),
                  ),
                ),
                Container(
                  height: 56,
                  color: Colors.indigo.shade100,
                  child: const Center(child: Text('Search')),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}