[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(
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(width: 50, height: 50, color: Colors.red),
              Spacer(),
              Container(width: 50, height: 50, color: Colors.blue),
            ],
          ),
        ),
      ),
    );
  }
}

위의 예제 코드에서 Spacer 위젯을 사용하여 붉은색과 파란색의 상자를 가운데 정렬시켰습니다. Spacer는 두 상자 사이의 빈 공간을 균등하게 채우며, 디바이스의 크기가 달라져도 화면을 가운데로 정렬해줍니다.

이러한 방식으로 Spacer 위젯은 다양한 레이아웃을 만드는 데 활용될 수 있습니다.

참고 자료:

https://api.flutter.dev/flutter/widgets/Spacer-class.html