kakao앱 만들기 (6) - 더보기 화면

✅ 더보기 화면

 

1️⃣ 탭의 샘플 데이터 만들기

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

class Tab {
  final IconData icon;
  final String text;

  Tab({required this.icon, required this.text});
}

List<Tab> tabs = [
  Tab(icon: FontAwesomeIcons.envelope, text: "메일"),
  Tab(icon: FontAwesomeIcons.calendarAlt, text: "캘린더"),
  Tab(icon: FontAwesomeIcons.archive, text: "서랍"),
  Tab(icon: FontAwesomeIcons.gift, text: "선물"),
  Tab(icon: FontAwesomeIcons.laugh, text: "이모티콘"),
  Tab(icon: FontAwesomeIcons.shopify, text: "쇼핑하기"),
  Tab(icon: FontAwesomeIcons.tshirt, text: "스타일"),
];

 

 

 

2️⃣ 더보기 화면 만들기

import 'package:flutter/material.dart';

import '../models/tab.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: Text(
          "더보기",
          style: TextStyle(color: Colors.black),
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.only(top: 30),
        child: GridView.count(
            crossAxisCount: 4,
            children: List.generate(
                tabs.length,
                (index) => Column(
                      children: [
                        Icon(tabs[index].icon),
                        SizedBox(height: 5),
                        Text(tabs[index].text),
                      ],
                    ))),
      ),
    );
  }
}

🔎 GridView.count(
    crossAxisCount: ,   // 1개의 행에 보여줄 item 갯수
    childAspectRatio: ,   // item의 가로 , 세로의 비율
    children: 
),