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

当然，以下是一个使用 ultimate_navigation_bar 插件创建 Flutter 底部导航栏的示例代码。这个插件提供了高度可定制的底部导航栏。

首先，确保在你的 pubspec.yaml 文件中添加 ultimate_navigation_bar 依赖：

dependencies:
  flutter:
    sdk: flutter
  ultimate_navigation_bar: ^2.0.0  # 请检查最新版本号

然后运行 flutter pub get 来获取依赖。

接下来，你可以在你的 Flutter 应用中使用这个插件。以下是一个完整的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;

  static List<Widget> _widgetOptions = <Widget>[
    Text('Home'),
    Text('Search'),
    Text('Profile'),
    Text('Settings'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Ultimate Navigation Bar Example'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: UltimateNavigationBar(
        currentIndex: _selectedIndex,
        onTabSelected: (index) {
          setState(() {
            _selectedIndex = index;
          });
        },
        backgroundColor: Colors.white,
        activeColor: Colors.blue,
        inactiveColor: Colors.grey,
        borderRadius: BorderRadius.circular(20),
        items: [
          UltimateNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          UltimateNavigationBarItem(
            icon: Icon(Icons.search),
            title: Text('Search'),
          ),
          UltimateNavigationBarItem(
            icon: Icon(Icons.person),
            title: Text('Profile'),
          ),
          UltimateNavigationBarItem(
            icon: Icon(Icons.settings),
            title: Text('Settings'),
          ),
        ],
      ),
    );
  }
}

代码解释

1. 依赖导入：在 pubspec.yaml 文件中添加 ultimate_navigation_bar 依赖。
2. 主应用：MyApp 是一个简单的 MaterialApp，设置了主题和主页面。
3. 主页面：MyHomePage 是一个 StatefulWidget，用于管理导航栏的选中状态。
4. 导航栏项：在 _MyHomePageState 的 build 方法中，使用 UltimateNavigationBar 创建底部导航栏。
   • currentIndex：当前选中的索引。
   • onTabSelected：点击导航栏项时的回调函数，更新当前选中的索引。
   • backgroundColor、activeColor、inactiveColor：设置导航栏的背景色、激活和未激活项的颜色。
   • borderRadius：设置导航栏的圆角半径。
   • items：导航栏项列表，每个项包含图标和标题。

这个示例展示了如何使用 ultimate_navigation_bar 创建一个简单的底部导航栏，并根据用户的选择更新页面内容。你可以根据需要进一步自定义导航栏的样式和功能。