[flutter] 플러터 Container에서 그리드 레이아웃을 만드는 방법은 무엇인가요?

11 Dec 2023

flutter

먼저, GridView 위젯을 사용하여 그리드 레이아웃을 구성할 수 있습니다. 아래는 간단한 예제 코드입니다.

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 Example'),
        ),
        body: GridView.count(
          crossAxisCount: 2, // 그리드 열의 수를 지정
          children: <Widget>[
            Container(
              color: Colors.red,
            ),
            Container(
              color: Colors.green,
            ),
            Container(
              color: Colors.blue,
            ),
            Container(
              color: Colors.yellow,
            ),
          ],
        ),
      ),
    );
  }
}

위의 예제 코드에서 GridView.count를 사용하여 열의 수를 지정하고, 각 그리드 아이템은 Container 위젯으로 생성됩니다. 각 Container는 다른 색상을 가지고 있어 시각적으로 구분됩니다.

이와 같이 간단히 GridView와 Container를 사용하여 플러터에서 그리드 레이아웃을 만들 수 있습니다.

더 많은 옵션과 속성을 사용하여 더 많은 커스터마이징이 가능합니다. 자세한 내용은 플러터 공식 문서를 참고하시기 바랍니다.