Flutter底部导航栏插件classic_bottom_navigation_bar的使用

Flutter底部导航栏插件classic_bottom_navigation_bar的使用

通过使用此插件，您可以在Flutter中轻松创建一个美观的底部导航栏，并在不同的操作系统上使用它。以下是关于如何使用它的文档。

示例动画

如何使用

在Scaffold中设置底部导航栏

Scaffold(
  bottomNavigationBar: ClassicButtomNavBar(
    items: const [
      ClassicBottomNavyBarItem(),
      ClassicBottomNavyBarItem(),
      ClassicBottomNavyBarItem(),
      ...
    ],
  ),
);

ClassicButtomNavBar的参数

完整示例

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

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Home(),
    );
  }
}

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

int _currentIndex = 0;
List myRoutes = [
  const Center(
    child: Text(
      "PAGE 1",
      style: TextStyle(
        color: Color.fromARGB(255, 255, 255, 255),
        fontSize: 50,
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
  const Center(
    child: Text(
      "PAGE 2",
      style: TextStyle(
        color: Colors.white,
        fontSize: 50,
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
  const Center(
    child: Text(
      "PAGE 3",
      style: TextStyle(
        color: Colors.white,
        fontSize: 50,
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
  const Center(
    child: Text(
      "PAGE 4",
      style: TextStyle(
        color: Colors.white,
        fontSize: 50,
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
];

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color.fromARGB(255, 0, 0, 0),
      body: myRoutes[_currentIndex],
      bottomNavigationBar: ClassicButtomNavBar(
        selectedIndex: _currentIndex,
        onItemSelected: (value) => setState(() {
          print("🛑$_currentIndex🛑");
          _currentIndex = value;
          print("🟢$_currentIndex🟢");
        }),
        items: const [
          ClassicBottomNavyBarItem(
            icon: Icon(Icons.home),
            title: "H O M E",
          ),
          ClassicBottomNavyBarItem(
            icon: Icon(Icons.search),
            title: "S E A R C H",
          ),
          ClassicBottomNavyBarItem(
            icon: Icon(Icons.person),
            title: "P R O F I L E",
          ),
          ClassicBottomNavyBarItem(
            icon: Icon(Icons.settings),
            title: "S E T T I N G S",
          ),
        ],
      ),
    );
  }
}

使用方法

首先，在Scaffold中定义所需的菜单项：

Scaffold(
  bottomNavigationBar: ClassicButtomNavBar(
    items: const [
      ClassicBottomNavyBarItem(),
      ClassicBottomNavyBarItem(),
      ClassicBottomNavyBarItem(),
      ...
    ],
  ),
);