🏯

Flutter Bottom tab 구조

생성일

2021/05/10 13:01

태그

Flutter

속성

HomePage.dart

import 'package:chai_booster/Pages/MorePage.dart';
import 'package:chai_booster/Pages/PromotionsPage.dart';
import 'package:chai_booster/Providers/Auth/AuthProvider.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:provider/provider.dart';

class HomePage extends StatefulWidget {
  HomePage({
    Key key, this.title
  }) : super(key: key);

  final String title;

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  AuthProvider authProvider;

  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    authProvider = Provider.of<AuthProvider>(context);

    return Scaffold(
      body: IndexedStack(
        index: _currentIndex,
        children: [
          for (final tabItem in TabNavigationItem.items) tabItem.page,
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (int index) => setState(() => _currentIndex = index),
        items: [
          for (final tabItem in TabNavigationItem.items)
            BottomNavigationBarItem(
              icon: tabItem.icon,
              label: tabItem.title,
            )
        ],
      ),
    );
  }
}

class TabNavigationItem {
  final Widget page;
  final String title;
  final Icon icon;

  TabNavigationItem({
    @required this.page,
    @required this.title,
    @required this.icon,
  });

  static List<TabNavigationItem> get items => [
    TabNavigationItem(
      page: PromotionPage(),
      icon: Icon(Icons.money),
      title: "혜택",
    ),
    TabNavigationItem(
      page: MorePage(),
      icon: Icon(Icons.alarm),
      title: "알림",
    ),
    TabNavigationItem(
      page: MorePage(),
      icon: Icon(Icons.more),
      title: "더보기",
    ),
  ];
}
Dart
복사