[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 시뮬레이터]

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


댓글

댓글 쓰기

이 블로그의 인기 게시물

Flutter ElevatedButton 사용방법

이미지
다음 Flutter 애플리케이션에서  'Click Me' 라는 텍스트와 함께 ElevatedButton을 표시할 것입니다. main.dart import 'package:flutter/material.dart' ;   void main() => runApp( const MyApp());   /// main application widget class MyApp extends StatelessWidget {    const MyApp({Key? key}) : super (key: key);      static const String _title = 'Flutter Tutorial' ;      @override    Widget build(BuildContext context) {      return const MaterialApp(        title: _title,        home: MyStatelessWidget(),      );    } }   /// stateless widget that the main application instantiates class MyStatelessWidget extends StatelessWidget {    const MyStatelessWidget({Key? key}) : super (key: key);      @override    Widget build(BuildContext context) {      return Scaffold(   ...
자세한 내용 보기

[Flutter] Radio 클래스 사용하기

이미지
이 예제에서는 3개의 라디오 버튼 위젯이 있는 Flutter 애플리케이션을 생성합니다. 라디오 위젯은 라디오 버튼만 표시하고 레이블은 표시하지 않습니다. 레이블도 표시하기 위해 레이블 텍스트가 제목 속성에 할당되고 라디오 버튼이 선행 속성에 할당된 ListTile 위젯을 사용합니다.
자세한 내용 보기

[Flutter] FlatButton 클래스 사용하기

이미지
이 예제 Flutter 애플리케이션에서는 기본 FlatButton을 표시한 다음 텍스트 색상 및 버튼 색상과 같은 일부 스타일을 지정했습니다. main.dart import 'package:flutter/material.dart' ;   void main() {    runApp(MyApp()); }   class MyApp extends StatefulWidget {    @ override    _MyAppState createState() => _MyAppState(); }   class _MyAppState extends State<MyApp> {    @ override    Widget build(BuildContext context) {      return MaterialApp(        home: Scaffold(            appBar: AppBar(              title: Text( 'Flutter FlatButton' ),            ),            body: Center(child: Column(children: <Widget>[              Container(  ...
자세한 내용 보기