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

import 'package:flutter/material.dart';
import 'package:persistent_bottom_nav_bar/persistent_bottom_nav_bar.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}
 
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Home Page'),
      ),
      bottomNavigationBar: PersistentTabView(
        context,
        controller: TabController(length: 3, vsync: Scrollable.of(context)!),
        items: [
          PersistentBottomNavBarItem(
            icon: Icon(Icons.home),
            title: "Home",
            activeColor: Colors.blue,
            inactiveColor: Colors.grey,
          ),
          PersistentBottomNavBarItem(
            icon: Icon(Icons.search),
            title: ("Search"),
            activeColor: Colors.blue,
            inactiveColor: Colors.grey,
          ),
          PersistentBottomNavBarItem(
            icon: Icon(Icons.settings),
            title: ("Settings"),
            activeColor: Colors.blue,
            inactiveColor: Colors.grey,
          ),
        ],
        onItemSelected: (int index) {},
        // configure the nav bar to show a shadow on the bottom
        showElevation: true,
        // choose the nav bar style
        selectedIndex: 0,
        // configure the nav bar background color
        // backgroundColor: Colors.blueGrey,
      ),
    );
  }
}

这段代码展示了如何在Flutter应用中使用persistent_bottom_nav_bar插件来创建一个持久的底部导航栏。我们创建了一个有三个标签的PersistentTabView，并为每个标签指定了图标和标题。我们还可以通过修改selectedIndex属性来控制哪个标签是选中的。此外，我们还可以通过showElevation属性来控制是否在底部导航栏显示阴影。