[flutter] Spacer를 사용하여 그리드 레이아웃을 생성하는 방법은?

21 Dec 2023

flutter

Flutter에서 Spacer를 사용하여 그리드 레이아웃을 만드는 방법을 알아보겠습니다.

Spacer란 무엇인가요?

Spacer는 사용 가능한 여백 공간을 일정하게 분배하는 Flutter 위젯입니다. 이를 사용하여 그리드 레이아웃의 열에 각 위젯이 동일한 공간을 차지하도록 할 수 있습니다.

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('Grid Layout with Spacer'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Row(
                children: <Widget>[
                  Spacer(),
                  Container(
                    width: 50,
                    height: 50,
                    color: Colors.blue,
                  ),
                  Spacer(),
                  Container(
                    width: 50,
                    height: 50,
                    color: Colors.green,
                  ),
                  Spacer(),
                ],
              ),
              SizedBox(height: 20),
              Row(
                children: <Widget>[
                  Spacer(),
                  Container(
                    width: 50,
                    height: 50,
                    color: Colors.yellow,
                  ),
                  Spacer(),
                  Container(
                    width: 50,
                    height: 50,
                    color: Colors.red,
                  ),
                  Spacer(),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위 예제는 Spacer를 사용하여 각각 파란색, 초록색, 노란색, 빨간색의 네 개의 정사각형을 가로로 나란히 배치한 그리드 레이아웃을 보여줍니다.

이렇게 Spacer를 활용하여 간단히 그리드 레이아웃을 만들 수 있습니다. 이 방법을 응용하여 복잡한 그리드 레이아웃을 구성할 수도 있습니다.