Flutter Flex Expanded - 온더테크

Contents

Flex와 Expanded는 Flutter에서 레이아웃을 구성하는 데 중요한 역할을 합니다. 이 두 위젯을 사용하면 위젯들이 부모 위젯 내에서 어떻게 배치되고 크기를 조절하는지 제어할 수 있습니다.

Flex

Flex 위젯은 자식 위젯을 축을 따라 배치하는데 사용됩니다. Flex는 주로 Row와 Column의 부모 클래스입니다. Row는 수평 축을 따라 자식 위젯을 배치하고, Column은 수직 축을 따라 자식 위젯을 배치합니다.

예제 (Flex)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flex Example')),
        body: Flex(
          direction: Axis.horizontal,
          children: <Widget>[
            Container(width: 100, height: 100, color: Colors.red),
            Container(width: 100, height: 100, color: Colors.green),
            Container(width: 100, height: 100, color: Colors.blue),
          ],
        ),
      ),
    );
  }
}

Expanded

Expanded 위젯은 Flex 위젯 내에서 자식 위젯이 가능한 모든 공간을 차지하도록 확장하는 데 사용됩니다. Expanded 위젯은 Row, Column 또는 Flex 위젯 내에서 사용할 수 있습니다.

예제 (Expanded)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Expanded Example')),
        body: Column(
          children: <Widget>[
            Expanded(
              child: Container(color: Colors.red),
            ),
            Expanded(
              child: Container(color: Colors.green),
            ),
            Expanded(
              child: Container(color: Colors.blue),
            ),
          ],
        ),
      ),
    );
  }
}

Flex와 Expanded 함께 사용하기

Flex와 Expanded를 함께 사용하면, 자식 위젯이 부모 위젯 내에서 공간을 어떻게 나눌지 세밀하게 조절할 수 있습니다.

예제 (Flex와 Expanded 함께 사용하기)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flex and Expanded Example')),
        body: Flex(
          direction: Axis.horizontal,
          children: <Widget>[
            Expanded(
              flex: 2,
              child: Container(height: 100, color: Colors.red),
            ),
            Expanded(
              flex: 1,
              child: Container(height: 100, color: Colors.green),
            ),
            Expanded(
              flex: 3,
              child: Container(height: 100, color: Colors.blue),
            ),
          ],
        ),
      ),
    );
  }
}

결론

Flex 위젯은 자식 위젯을 수평 또는 수직 축을 따라 배치하는 기본 레이아웃 위젯입니다.
Expanded 위젯은 Flex 위젯 내에서 자식 위젯이 가능한 모든 공간을 차지하도록 확장하는 데 사용됩니다.
Flex와 Expanded를 함께 사용하면 자식 위젯이 부모 위젯 내에서 공간을 어떻게 나눌지 세밀하게 제어할 수 있습니다.

이 두 위젯을 이해하고 활용하면 Flutter에서 더 복잡하고 유연한 레이아웃을 쉽게 구성할 수 있습니다.

Post Views: 114