flex로 공간 나누기

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

Row의 두 자식이 모두 Expanded이면 공간을 똑같이 나눕니다. 너비가 390픽셀인 휴대폰에서는 각각 195픽셀을 차지합니다.

공간을 균등하지 않게 나누려면 Expanded에 flex:를 지정하세요. 이는 크기가 아니라 몫입니다. Flutter는 몫을 모두 더한 다음 그 비율에 따라 공간을 나눕니다.

Row(
  children: [
    Expanded(flex: 3, child: Container(color: Colors.red)),
    Expanded(flex: 1, child: Container(color: Colors.blue)),
  ],
)

몫의 합은 4이므로 빨간색은 행의 4분의 3을 차지하고 파란색은 4분의 1을 차지합니다. flex:가 없는 자식의 몫은 1입니다.

몫은 전체를 구성하는 부분이므로 화면 너비가 달라져도 레이아웃의 비율은 유지됩니다.

챌린지

쉬움

Chart 상자를 Notes 상자보다 두 배 더 넓게 만드세요. 휴대폰에서는 각각 260픽셀과 130픽셀입니다.

직접 해보기

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('Dashboard')),
        body: Column(
          children: [
            Row(
              children: [
                Expanded(
                  child: Container(
                    height: 120,
                    color: Colors.teal,
                    child: const Center(
                      child: Text('Chart', style: TextStyle(color: Colors.white)),
                    ),
                  ),
                ),
                Expanded(
                  child: Container(
                    height: 120,
                    color: Colors.amber,
                    child: const Center(child: Text('Notes')),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}