[flutter] Spacer 위젯을 이용하여 상대적인 위치와 크기를 설정하는 방법은?

21 Dec 2023

flutter

Flutter 앱을 개발하다보면 화면을 원하는대로 구성하고 UI 요소들을 규칙적으로 배치하는 것이 중요합니다. Spacer 위젯은 이러한 작업을 보다 쉽게 할 수 있도록 도와줍니다.

Spacer 위젯이란?

Spacer 위젯은 유연한 공간을 만들어주는 위젯으로, 주어진 공간을 활용하여 자식 위젯들을 균등하게 배치할 수 있습니다.

Spacer 위젯 사용하기

다음은 Spacer 위젯을 사용하여 화면을 규칙적으로 배치하는 예시 코드입니다.

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('Spacer Widget Example'),
        ),
        body: Center(
          child: Row(
            children: <Widget>[
              Container(
                color: Colors.blue,
                height: 100,
                width: 100,
              ),
              Spacer(),
              Container(
                color: Colors.green,
                height: 100,
                width: 100,
              ),
              Spacer(),
              Container(
                color: Colors.red,
                height: 100,
                width: 100,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위 코드에서 Spacer() 위젯은 자식 위젯 사이의 공간을 동적으로 조절해주어 균형있는 UI를 만들어줍니다.

결론

Spacer 위젯은 Flutter에서 UI 요소들을 균등하게 배치할 때 유용하게 사용될 수 있습니다. 이를 통해 화면을 보다 규칙적으로 구성하고 상대적인 위치와 크기를 설정할 수 있습니다.