Flutter持久化导航栏插件persistent_navbar

Flutter持久化导航栏插件persistent_navbar_pro的使用

标题

Flutter持久化导航栏插件persistent_navbar_pro的使用

内容

一个功能强大的Flutter底部导航栏，支持命名路由和直接屏幕组件导航。此包允许您创建一个持久的底部导航栏，其中每个标签保持自己的导航堆栈。它在有或没有命名路由的情况下都能无缝工作，让开发者可以根据项目需求自由选择最合适的导航方法。

关键功能：

持久的底部导航栏，每个标签都有独立的导航堆栈。
支持命名路由和直接屏幕组件。
使用IndexedStack来维护每个屏幕的状态，同时切换标签。
灵活且易于集成到新项目或现有项目中。
每个标签可以自定义图标和导航逻辑。

示例代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const Dash(),
    );
  }
}

class Dash extends StatelessWidget {
  const Dash({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return PersistentNavbar(screens: const [
      Home(),
      Settings()
    ], items: [
      NavBarItem(
        icon: const Icon(Icons.home),
        label: "Home",
      ),
      NavBarItem(
        icon: const Icon(Icons.settings),
        label: "Settings",
      ),
    ]);
  }
}

class Home extends StatelessWidget {
  const Home({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          children: [
            const Text("Home"),
            ElevatedButton(
                onPressed: () =&gt; Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) =&gt; const HomeSubPage())),
                child: const Text("Sub Page"))
          ],
        ),
      ),
    );
  }
}

class Settings extends StatelessWidget {
  const Settings({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text("Settings"),
      ),
    );
  }
}

class HomeSubPage extends StatelessWidget {
  const HomeSubPage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          const Text("Home Sub Page 11"),
          ElevatedButton(
              onPressed: () =&gt; Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) =&gt; const HomeSubPage2())),
              child: const Text("Go To Home Sub Page 2"))
        ],
      ),
    );
  }
}

class HomeSubPage2 extends StatelessWidget {
  const HomeSubPage2({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text("SubPage 2"),
      ),
    );
  }
}

完整示例demo

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Dash(),
    );
  }
}

class Dash extends StatelessWidget {
  const Dash({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return PersistentNavbar(
      screens: [
        Home(),
        Settings()
      ],
      items: [
        NavBarItem(
          icon: Icon(Icons.home),
          label: 'Home',
        ),
        NavBarItem(
          icon: Icon(Icons.settings),
          label: 'Settings',
        ),
      ],
    );
  }
}

class Home extends StatelessWidget {
  const Home({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          children: [
            Text('Home'),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => const HomeSubPage(),
                  ),
                );
              },
              child: Text('Sub Page'),
            ),
          ],
        ),
      ),
    );
  }
}

class Settings extends StatelessWidget {
  const Settings({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Settings'),
      ),
    );
  }
}

class HomeSubPage extends StatelessWidget {
  const HomeSubPage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Text('Home Sub Page 11'),
          ElevatedButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => const HomeSubPage2(),
                ),
              );
            },
            child: Text('Go To Home Sub Page 2'),
          ),
        ],
      ),
    );
  }
}

class HomeSubPage2 extends StatelessWidget {
  const HomeSubPage2({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('SubPage 2'),
      ),
    );
  }
}

更多关于Flutter持久化导航栏插件persistent_navbar_pro的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

bupafengyu 1楼•7 天前

更多关于Flutter持久化导航栏插件persistent_navbar_pro的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter项目中使用persistent_navbar_pro插件的一个基本示例。persistent_navbar_pro是一个用于创建持久化导航栏的Flutter插件，它允许你在多个页面之间共享一个底部导航栏。

首先，确保你已经在pubspec.yaml文件中添加了persistent_navbar_pro的依赖：

dependencies:
  flutter:
    sdk: flutter
  persistent_navbar_pro: ^最新版本号  # 请替换为实际的最新版本号

然后，运行flutter pub get来安装依赖。

接下来，你可以按照以下步骤在你的Flutter应用中使用persistent_navbar_pro：

创建一个主要的MaterialApp：

import 'package:flutter/material.dart';
import 'package:persistent_navbar_pro/persistent_navbar_pro.dart';
import 'your_first_page.dart';  // 替换为你的实际页面文件
import 'your_second_page.dart'; // 替换为你的实际页面文件

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PersistentNavBarPro(
        // 配置导航栏的页面
        pages: [
          PersistentNavBarPage(
            title: 'First Page',
            icon: Icons.home,
            page: YourFirstPage(), // 替换为你的实际页面
          ),
          PersistentNavBarPage(
            title: 'Second Page',
            icon: Icons.settings,
            page: YourSecondPage(), // 替换为你的实际页面
          ),
          // 你可以继续添加更多页面
        ],
        // 导航栏的其他配置
        navBarColor: Colors.blue,
        selectedColor: Colors.white,
        unselectedColor: Colors.grey,
        indicatorColor: Colors.white,
        backgroundColor: Colors.white,
        onItemSelected: (index) {
          // 可以在这里处理导航栏项点击事件
          print('Selected index: $index');
        },
      ),
    );
  }
}

创建你的页面：

例如，your_first_page.dart可以是一个简单的Scaffold页面：

import 'package:flutter/material.dart';

class YourFirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: Text('This is the first page'),
      ),
    );
  }
}

同样，your_second_page.dart也可以是另一个简单的Scaffold页面：

import 'package:flutter/material.dart';

class YourSecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: Text('This is the second page'),
      ),
    );
  }
}

这个示例展示了如何使用persistent_navbar_pro插件来创建一个带有持久化导航栏的Flutter应用。你可以根据需要自定义导航栏的样式和页面内容。确保你已经正确导入了所需的包，并且替换了示例中的占位符（如页面文件名和图标）为你的实际内容。