[flutter] Spacer를 이용하여 위젯의 크기를 지정하는 방법은?

21 Dec 2023

flutter

다음은 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 Example'),
        ),
        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.red,
              ),
              Spacer(flex: 3),
              Container(
                width: 100,
                height: 100,
                color: Colors.green,
              ),
              Spacer(flex: 2),
              Container(
                width: 100,
                height: 100,
                color: Colors.yellow,
              ),
              Spacer(flex: 1),
            ],
          ),
        ),
      ),
    );
  }
}

이 코드는 Spacer 위젯을 사용하여 각 Container의 크기를 설정하고, Spacer의 flex 값을 조정하여 원하는 비율로 크기를 지정하고 있습니다.

참고 자료:

Flutter Spacer 클래스 문서: https://api.flutter.dev/flutter/widgets/Spacer-class.html