[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 ], ), ], ) ); } } |
댓글
댓글 쓰기