Flutter GridView

 

이렇게 생긴 결과물을 만들 것입니다. 
내용을 순서 순서 쓰고 싶지만 

금요일 퇴근시간이 다가오니 소스를 전부 올리니 검색해보시면서 함 보세요~

 

검색해보시면 좋으실 내용은 tag에 포함하도록 하겠습니다.  

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

void main() {
  runApp( const MyApp(),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Staff',
      home: MainList(),
    );
  }
}

class _MainListState extends State<MainList> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('To Do List'),
        backgroundColor: Colors.greenAccent,
      ),
      body: GridView.count(
      crossAxisCount: 3,
      children: List.generate(15, (index) {
        var i = index + 1;
        return InkWell(
          onTap: (){
            if (kDebugMode) {
              print("$i Grid");
            }
          },
          child: Container(
            color: Colors.greenAccent,
            padding: const EdgeInsets.all(20),
            margin: const EdgeInsets.all(5),
            child: Center(
              child:Text(
                "$i",
                style: const TextStyle(
                  fontSize: 50.0,
                  color: Colors.white,
                  // backgroundColor: Colors.blueGrey
                ),
                textAlign: TextAlign.center,
              ),
            ),
          ),
        );
      }),
    ),
    );
  }
}

class MainList extends StatefulWidget {
  const MainList({Key? key}) : super(key: key);

  @override
  State<MainList> createState() => _MainListState();
}

아직 티스토리에 flutter 코드 입력을 선택할 수 없어서 HTML로 했습니다.

 

^^