[flutter] Spacer를 이용하여 위젯의 간격을 자동으로 맞추는 방법은?

21 Dec 2023

flutter

Flutter에서 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 예시'),
        ),
        body: Center(
          child: Row(
            children: <Widget>[
              Spacer(flex: 1),
              Container(
                width: 100,
                height: 100,
                color: Colors.blue,
              ),
              Spacer(flex: 2),
              Container(
                width: 100,
                height: 100,
                color: Colors.green,
              ),
              Spacer(flex: 1),
            ],
          ),
        ),
      ),
    );
  }
}

위 예시 코드에서는 Spacer를 사용하여 각 Container 위젯 간의 간격을 균일하게 조절하였습니다. Spacer의 flex 속성을 통해 각 Spacer가 차지하는 공간의 비율을 설정할 수 있습니다.

이를 통해 화면을 효과적으로 나누고 여백을 조절할 수 있습니다.

더 자세한 내용은 Flutter 공식 문서를 참고하시기 바랍니다.