一、前言

前五天，我們把「追星工具箱」拆成一個個獨立模組：Day2做了行程提醒、Day3做了周邊小卡收藏、Day4記追星帳本。每個模組單獨測試都跑得動，但打開App 只能看到最後寫的那一頁，其他功能都得回到最一開始的畫面才能切換到其他功能去，稱不太不上一個「App」。

今天要做的事情看起來很容易，就把這三頁串起來，讓使用者可以在底部切換分頁，實際動手做之後才發現，「串起來」這三個字沒那麼簡單。

問題出在分頁切換的方式，切到另一個分頁再切回來的時候，頁面會整個重新 build，捲動的位置、正在打的表單內容全部歸零，這種工具是要天天打開來記帳、看行程的，用起來其實會很躁。

二、今日任務

1.建立主入口
建立 lib/features/main_tab_bar_page.dart，將Day 2 ~ Day 4的頁面全部串在一起

import 'package:flutter/material.dart';
import 'schedule/schedule_page.dart';
import 'collection/collection_page.dart';
import 'expense/expense_page.dart';

class MainTabBarPage extends StatefulWidget {
  const MainTabBarPage({super.key});

  @override
  State<MainTabBarPage> createState() => _MainTabBarPageState();
}

class _MainTabBarPageState extends State<MainTabBarPage> {
  int _currentIndex = 0;

  // 三大基礎模組頁面
  final List<Widget> _pages = const [
    SchedulePage(),   // Day 2: 行程與通知
    CollectionPage(), // Day 3: 周邊小卡收藏
    ExpensePage(),    // Day 4: 追星帳本
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _currentIndex,
        children: _pages,
      ),
      bottomNavigationBar: NavigationBar(
        selectedIndex: _currentIndex,
        onDestinationSelected: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        destinations: const [
          NavigationDestination(
            icon: Icon(Icons.calendar_month_outlined),
            selectedIcon: Icon(Icons.calendar_month),
            label: '行程提醒',
          ),
          NavigationDestination(
            icon: Icon(Icons.collections_bookmark_outlined),
            selectedIcon: Icon(Icons.collections_bookmark),
            label: '周邊收藏',
          ),
          NavigationDestination(
            icon: Icon(Icons.account_balance_wallet_outlined),
            selectedIcon: Icon(Icons.account_balance_wallet),
            label: '追星帳本',
          ),
        ],
      ),
    );
  }
}

2.在 lib/main.dart 中最後有個 home: 找到它將 SchedulePage() 修改為 const MainTabBarPage() 即可完成！

home: const SchedulePage()
home: const MainTabBarPage()

下方多了個功能列表，解決了必須回到主畫面才能進入別的頁面問題