帶你從基礎開始製作花裡胡哨的 Flutter 底部選單

2023-12-28 03:33:57

在 Flutter 中製作一個引人注目的底部菜單

在 Flutter 中，底部菜單是一項至關重要的導航元素，可幫助使用者輕鬆在應用程序的不同頁面之間切換。儘管 Flutter 提供了內建的 BottomNavigationBar 控件，但我們也可以自訂代碼來製作更具吸引力的底部菜單。本教程將逐步指導你使用 Flutter 製作一個吸睛的底部菜單，並在過程中學習實用的技巧。

步驟 1：建立一個新的 Flutter 專案

首先，建立一個新的 Flutter 專案。可以使用以下指令建立：

flutter create bottom_navigation_bar

步驟 2：新增必要的依賴項

建立完 Flutter 專案後，需要新增一些必要的依賴項，包括：

flutter_svg：此依賴項可讓你使用 SVG 圖示。
bottom_navy_bar：此依賴項可讓你使用更進階的底部菜單控件。

在 pubspec.yaml 檔案中加入以下依賴項以進行安裝：

dependencies:
  flutter_svg: ^1.1.0
  bottom_navy_bar: ^6.0.0

步驟 3：建立底部菜單

接著，在 lib/main.dart 檔案中導入必要的函式庫。

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:bottom_navy_bar/bottom_navy_bar.dart';

接下來，在 build() 方法中建立底部菜單。可以使用以下代碼：

BottomNavyBar(
  items: [
    BottomNavyBarItem(
      icon: SvgPicture.asset('assets/icons/home.svg'),
      title: Text('Home'),
      activeColor: Colors.blue,
    ),
    BottomNavyBarItem(
      icon: SvgPicture.asset('assets/icons/search.svg'),
      title: Text('Search'),
      activeColor: Colors.green,
    ),
    BottomNavyBarItem(
      icon: SvgPicture.asset('assets/icons/settings.svg'),
      title: Text('Settings'),
      activeColor: Colors.red,
    ),
  ],
  selectedIndex: 0,
  onItemSelected: (index) {
    setState(() {
      _selectedIndex = index;
    });
  },
);

此代碼建立了一個底部菜單，其中包含三個項目。每個項目都有圖示、標題和啟用顏色。當使用者點選一個項目時，該項目會被啟用並顯示對應的顏色。

步驟 4：加入動畫

現在，可以為底部菜單加入一些動畫效果。使用以下代碼：

AnimatedContainer(
  duration: Duration(milliseconds: 300),
  curve: Curves.easeInOut,
  child: BottomNavyBar(
    items: [
      BottomNavyBarItem(
        icon: SvgPicture.asset('assets/icons/home.svg'),
        title: Text('Home'),
        activeColor: Colors.blue,
      ),
      BottomNavyBarItem(
        icon: SvgPicture.asset('assets/icons/search.svg'),
        title: Text('Search'),
        activeColor: Colors.green,
      ),
      BottomNavyBarItem(
        icon: SvgPicture.asset('assets/icons/settings.svg'),
        title: Text('Settings'),
        activeColor: Colors.red,
      ),
    ],
    selectedIndex: _selectedIndex,
    onItemSelected: (index) {
      setState(() {
        _selectedIndex = index;
      });
    },
  ),
);