[Flutter] 그리드뷰(GridView) 사용하기

다음 예에서는 교차 축에 3개의 요소가 있는 Grid View에 6개의 위젯을 표시합니다. 즉, 가로 축을 따라 세 개의 항목이 정렬됩니다. 항목은 왼쪽에서 오른쪽, 위에서 아래로 정렬됩니다.

main.dart

import 'dart:ui';   import 'package:flutter/material.dart';   void main() => runApp(const MyApp());   class MyApp extends StatelessWidget {   const MyApp({Key? key}) : super(key: key);     static const String _title = 'Flutter Tutorial';     @override   Widget build(BuildContext context) {     return MaterialApp(       title: _title,       home: Scaffold(         appBar: AppBar(title: const Text(_title)),         body: const MyStatefulWidget(),       ),     );   } }   class MyStatefulWidget extends StatefulWidget {   const MyStatefulWidget({Key? key}) : super(key: key);     @override   State<MyStatefulWidget> createState() => _MyStatefulWidgetState(); }   class _MyStatefulWidgetState extends State<MyStatefulWidget> {   @override   Widget build(BuildContext context) {     return Center(       child: GridView(         gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(           crossAxisCount: 3,         ),         primary: false,         padding: const EdgeInsets.all(20),         children: <Widget>[           Container(             padding: const EdgeInsets.all(8),             child: const Text("Tile 1"),             color: Colors.orange[200],           ),           Container(             padding: const EdgeInsets.all(8),             child: const Text("Tile 2"),             color: Colors.green[200],           ),           Container(             padding: const EdgeInsets.all(8),             child: const Text("Tile 3"),             color: Colors.red[200],           ),           Container(             padding: const EdgeInsets.all(8),             child: const Text("Tile 4"),             color: Colors.purple[200],           ),           Container(             padding: const EdgeInsets.all(8),             child: const Text("Tile 5"),             color: Colors.blueGrey[200],           ),           Container(             padding: const EdgeInsets.all(8),             child: const Text("Tile 6"),             color: Colors.yellow[200],           ),         ],       )     );   } }

스크린샷 [안드로이드 에뮬레이터, ios 시뮬레이터]