【Day 10】開始製作app！ - 程式的框架設計與底部頁面選擇

16th鐵人賽

nny02426

2024-09-24 23:43:49

68 瀏覽

分享至

今天起，筆者將在這裡紀錄這個最符合我的要求、最客製化（當然）的行程規劃應用程式。這過程應該會遇到不少困難，就讓我們盡量放鬆邊做邊學習吧～

專案初始化

程式命名

在建立專案之前，先來幫這個應用程式取個名字吧！為了避免後續在git這部份的麻煩，因此想在開始動工前先決定好程式名稱，同時也是資料夾與repository的名稱。

（以下多廢話可跳過）
筆者想為它取個能聯想到它功能，且不會太繞口的名字，想過該如何將'Todo', 'Schedule', 'Timetable', 'Drag'這幾個單字重組在一起，該選擇使用哪幾個單字呢，嘗試了幾個組合後，最終決定Schedrag這個名字，既有著行程以及拖拉的意思，也不會太難念，更重要的是，跟其他人的app名子沒有重複ヽ(´∀`)ﾉ

初始化

這個程式的程式碼將會同步在筆者的github上更新，repo為：nnyjan02426/Schedrag。

以下將列出Flutter與Git初始化的步驟，將不一一說明。

flutter create schedrag
cd schedrag

git init
git add .
git commit -m "init repo"

git remote add origin git@github.com:nnyjan02426/Schedrag.git
git push -u origin main

程式主框架建構

今日，筆者打算先完成整個主要框架，也就是主要頁面的長相，如下圖：

底部的頁面選擇，將使用BottomNavigationBar這個Widget來做，這是專門用來做在畫面底部的頁面選擇器。
本次，將參考官方文件中的範例並對它做修改。若想在自己電腦中生成範例，只須輸入以下內容：

flutter create --sample=material.BottomNavigationBar.1 mysample

結合了之前做的程式選擇頁面的程式碼結構，目前我們的程式碼如下：

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.bold);

  void _onItemTapped(int index) {
    setState(() { _selectedIndex = index; });
  }

  @override
  Widget build(BuildContext context) {
    Widget page = Placeholder();
    switch (_selectedIndex) {
      case 0:
        page = Text('Schedule', style: optionStyle);
        if (kDebugMode) { print('Page [Schedule] selected'); }
      case 1:
        page = Text('Todo', style: optionStyle);
        if (kDebugMode) { print('Page [Todo] selected'); }
      case 2:
        page = Text('Timetable', style: optionStyle);
        if (kDebugMode) { print('Page [Timetable] selected'); }
      case 3:
        page = Text('Settings', style: optionStyle);
        if (kDebugMode) { print('Page [Settings] selected'); }
      default:
        throw UnimplementedError('no widget for $_selectedIndex');
    }

    return Scaffold(
      body: Center(
        child: page,
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,

        // colors
        backgroundColor: Theme.of(context).colorScheme.onSurface,
        selectedItemColor: Theme.of(context).colorScheme.primary,
        unselectedItemColor: Theme.of(context).colorScheme.secondary,

        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Schedule',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Todo',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'Timetable',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'Settings',
          ),
        ],

      ),
    );
  }
}

介面為如此：