Flutter : Spacer 이용하기

Spacer 이용하기

Flutter에서 Spacer는 유연한 빈 공간을 만들기 위해 사용되는 위젯입니다.

이 위젯을 Row나 Column과 같은 Flex container 안에 배치하면, 이전 위젯과 다음 위젯 사이에 자동으로 공간이 생성됩니다.

Spacer는 생성자에 flex 값을 지정할 수 있습니다. 이 값은 Spacer와 다른 위젯 사이의 비율을 나타냅니다.

예를 들어, Spacer(flex: 2)는 Spacer(flex: 1)과 다른 위젯 사이의 비율을 2:1로 만듭니다.

Row(
  children: <Widget>[
    Container(
      width: 100,
      height: 100,
      color: Colors.redAccent,
    ),
    Spacer(flex: 2,),
    Container(
      width: 100,
      height: 100,
      color: Colors.greenAccent,
    ),
    Spacer(flex: 1,),
    Container(
      width: 100,
      height: 100,
      color: Colors.blueAccent,
    ),
    Spacer(flex: 1,),
    Container(
      width: 100,
      height: 100,
      color: Colors.amberAccent,
    ),
  ]
),

위 코드에서 첫 번째 Spacer(flex: 2)는 첫 번째 Container(redAccent)와 두 번째 Container(greenAccent) 사이에 공간을 만듭니다. 두 번째 Spacer(flex: 1)는 두 번째 Container(greenAccent)와 세 번째 Container(blueAccent) 사이에 공간을 만듭니다. 첫 번째 Spacer(공간)가 두 번째 Spacer(공간)보다 두 배 큽니다. 그리고 두 번째 Spacer와 세 번째 Spacer의 공간은 같습니다.

 

Spacer를 사용하면 아래와 같이 유연한 레이아웃을 구성할 수 있습니다.

(길이가 다른 문자열을 가진 두 개의 텍스트 위젯을 가운데 정렬하고 싶을 때)

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Spacer(flex: 2,),
    Text('Short'),
    Spacer(flex: 1),
    Text('Longer>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>'),
    Spacer(flex: 2),
  ],
)

Spacer는 Flexible과 비슷한 기능을 가지고 있습니다. 하지만 Flexible은 Spacer보다 더 많은 옵션을 제공합니다.

Flexible은 flex 속성뿐만 아니라 fit 속성을 제공합니다. fit 속성은 Flexible의 자식 위젯이 공간을 채우지 못할 때 어떻게 동작할지 결정합니다. 이와 달리 Spacer는 항상 유연한 빈 공간을 만듭니다. 따라서 Spacer는 유연한 레이아웃을 구성하기 위한 간단한 방법입니다.

 

아래 전체 소스 및 실행 영상입니다.

오늘도 감사합니다.

 

< main.dart >

import 'package:flutter/material.dart';

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

class SampleApp extends StatelessWidget {
  const SampleApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Spacer sample app',
      theme: ThemeData(
        primarySwatch: Colors.lightGreen,
      ),
      home: MainScreen(),
    );
  }
} // end of SampleApp

class MainScreen extends StatefulWidget {
  const MainScreen({Key? key}) : super(key: key);

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Sapcer sample app'
        ),
      ),
      body: Center(
        child: Column(
          children: [
            SizedBox(height: 20.0,),
            Row(
              children: <Widget>[
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.redAccent,
                ),
                Spacer(flex: 2,),
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.greenAccent,
                ),
                Spacer(flex: 1,),
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.blueAccent,
                ),
                Spacer(flex: 1,),
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.amberAccent,
                ),
              ]
            ),
            SizedBox(height: 50.0,),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Spacer(flex: 2,),
                Text('Short'),
                Spacer(flex: 1),
                Text('Longer>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>'),
                Spacer(flex: 2),
              ],
            )
          ],
        ),
      ),
    );
  }
}

 

< 실행영상 >

Flutter - Spacer 위젯 샘플 영상