플러터 Flexible 위젯 사용법 및 옵션 완벽 가이드

 

플러터(Flutter)에서 Flexible 위젯은 자식 위젯이 남는 공간을 채우도록 설계된 위젯입니다.

이 글에서는 Flexible 위젯의 사용 방법과 다양한 옵션에 대해 자세히 설명하겠습니다.

Flexible 위젯이란?

Flexible 위젯은 플러터 레이아웃에서 자식 위젯이 가질 수 있는 여유 공간을 조절하는데 사용됩니다.

주로 Row, Column, Flex 같은 위젯 안에서 사용되며, 자식 위젯들이 주어진 공간 안에서 적절히 배치되도록 도와줍니다.

Flexible 위젯 사용 방법

기본 사용법

Flexible 위젯은 주로 Row 또는 Column 안에서 사용됩니다. 다음은 Flexible 위젯의 기본적인 사용 예시입니다.

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('Flexible Example')),
        body: Column(
          children: <Widget>[
            Container(
              color: Colors.red,
              height: 100,
            ),
            Flexible(
              flex: 1,
              child: Container(
                color: Colors.green,
              ),
            ),
            Container(
              color: Colors.blue,
              height: 100,
            ),
          ],
        ),
      ),
    );
  }
}

위 예시에서 Column 안에 있는 세 개의 컨테이너 중 가운데 컨테이너가 Flexible 위젯으로 감싸져 있습니다.

이 Flexible 위젯은 주어진 여유 공간을 차지하게 됩니다.

flex 속성

Flexible 위젯의 중요한 속성 중 하나는 flex입니다. 이 속성은 Flexible 위젯이 차지할 공간의 비율을 설정합니다.

예를 들어, 두 개의 Flexible 위젯이 각각 flex: 1과 flex: 2로 설정되어 있으면, 첫 번째 위젯은 두 번째 위젯보다 절반의 공간을 차지하게 됩니다.

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('Flexible Example')),
        body: Column(
          children: <Widget>[
            Flexible(
              flex: 1,
              child: Container(
                color: Colors.green,
              ),
            ),
            Flexible(
              flex: 2,
              child: Container(
                color: Colors.blue,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

이 예시에서 두 번째 컨테이너는 첫 번째 컨테이너보다 두 배의 높이를 가지게 됩니다.

fit 속성

Flexible 위젯의 또 다른 중요한 속성은 fit입니다. 이 속성은 Flexible 위젯이 남는 공간을 어떻게 채울지를 결정합니다. fit 속성에는 두 가지 값이 있습니다:

• FlexFit.tight: 자식 위젯이 가능한 한 많은 공간을 차지하도록 합니다.
• FlexFit.loose: 자식 위젯이 필요한 만큼만 공간을 차지하고 나머지 공간은 비워둡니다.

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('Flexible Example')),
        body: Column(
          children: <Widget>[
            Flexible(
              fit: FlexFit.tight,
              child: Container(
                color: Colors.green,
                height: 100, // This height will be ignored
              ),
            ),
            Flexible(
              fit: FlexFit.loose,
              child: Container(
                color: Colors.blue,
                height: 100, // This height will be used
              ),
            ),
          ],
        ),
      ),
    );
  }
}

위 예시에서 첫 번째 컨테이너는 FlexFit.tight로 설정되어 있어 주어진 여유 공간을 모두 차지하게 됩니다.

반면에, 두 번째 컨테이너는 FlexFit.loose로 설정되어 있어 자신의 높이(100)를 유지하면서 남는 공간을 비워둡니다.

결론

Flexible 위젯은 플러터 레이아웃에서 매우 유용한 도구입니다.

flex와 fit 속성을 통해 자식 위젯들이 주어진 공간을 어떻게 사용할지 세밀하게 조정할 수 있습니다.

이를 통해 다양한 레이아웃 요구사항을 쉽게 만족시킬 수 있습니다.

Flexible 위젯을 적절히 사용하여 유연하고 반응형 레이아웃을 만들어보세요!