[Flutter] GridView 커스텀 하기 (flutter_staggered_grid_view)

 

Flutter에서 기본으로 제공해주는 GridView는 childAspectRatio 속성을 통해 가로세로의 비율을 정하기 때문에,

Item의 width와 height를 지정해줄 수 없다.

하지만 flutter_staggered_grid_view를 사용하면 지정해줄 수 있다.

 

https://pub.dev/packages/flutter_staggered_grid_view

flutter_staggered_grid_view | Flutter package

flutter_staggered_grid_view 패키지를 사용한다.

 

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: StaggeredGrid.count(
            crossAxisCount: 3,
            crossAxisSpacing: 0,
            children: [
              ...List.generate(
                  4,
                  (index) => Container(
                        height: 100, // 임의로 높이 지정
                        decoration: BoxDecoration(
                            border: Border.all(color: Colors.green)),
                      ))
            ],
          )),
    );
  }
}

 

childAspectRatio를 지정해주지 않고, Item 위젯의 높이를 임의로 지정해줄 수 있다.

 

.

.

.

응용하여 1~9까지 입력하는 키패드를 부모위젯의 크기에 딱 맞게 구현해보았다.

 

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            width: 300,
            height: 500,
            decoration: BoxDecoration(
                border: Border.all(color: Colors.black, width: 2)),
            child: LayoutBuilder(
              builder: (context, constraints) {
                var gridHeight = constraints.maxHeight;
                return StaggeredGrid.count(
                  crossAxisCount: 3,
                  crossAxisSpacing: 0,
                  children: [
                    ...List.generate(
                        9,
                        (index) => Container(
                              alignment: Alignment.center,
                              height: gridHeight / 3,
                              decoration: BoxDecoration(
                                  border: Border.all(color: Colors.green)),
                              child: Text(
                                (index + 1).toString(),
                                style: const TextStyle(
                                    fontSize: 20, fontWeight: FontWeight.bold),
                              ),
                            ))
                  ],
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}

 

부모위젯의 높이를 알기위해 LayoutBuilder을 사용하였다.

constraints.maxHeight 가 부모위젯의 높이이다.

3x3의 Grid이므로, Item의 높이를 부모위젯 높이의 1/3으로 하였다.

만약 부모위젯의 높이가 지금처럼 300x500으로 고정된 것이 아니고 동적으로 변한다면,

LayoutBuilder을 Expanded로 감싸주면 된다.