Flutter侧边导航插件navigation_sidebar的使用

特性

Navigation Sidebar 是一个完全可定制的导航小部件。

开始使用

1. 在 pubspec.yaml 文件中添加包。
2. 导入包。
3. 使用 NavigationSideBar 小部件，并在 items 中使用 NavigationSideBarItem。

示例代码

import 'package:flutter/material.dart';
import 'package:navigation_sidebar.dart';
import 'package:navigation_sidebar_theme.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _selectedIndex = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Row(
          children: [
            NavigationSideBar(
              isExtended: true, // 是否扩展
              isIndicatorActive: true, // 是否显示指示器
              items: [
                NavigationSideBarItem(
                  selectedIcon: Icons.home_filled, // 选中状态的图标
                  unSelectedIcon: Icons.home_outlined, // 未选中状态的图标
                  text: '首页', // 文本标签
                ),
                NavigationSideBarItem(
                  selectedIcon: Icons.search_rounded, // 选中状态的图标
                  unSelectedIcon: Icons.search_outlined, // 未选中状态的图标
                  text: '搜索', // 文本标签
                ),
                NavigationSideBarItem(
                  selectedIcon: Icons.settings_rounded, // 选中状态的图标
                  unSelectedIcon: Icons.settings_outlined, // 未选中状态的图标
                  text: '设置', // 文本标签
                ),
              ],
              initialSelectedIndex: _selectedIndex, // 初始选中索引
              onItemSelected: (int value) {
                setState(() {
                  _selectedIndex = value; // 更新选中索引
                });
              },
            ),
            Expanded(
              child: Center(
                child: Text('当前页面: ${['首页', '搜索', '设置'][_selectedIndex]}'), // 动态显示当前页面
              ),
            ),
          ],
        ),
      ),
    );
  }
}

其他信息

import 'package:flutter/material.dart';
import 'package:navigation_sidebar.dart';
import 'package:navigation_sidebar_theme.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _selectedIndex = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: NavigationSideBar(
        items: [
          Page1(), // 第一页
          Page2(), // 第二页
          Page3(), // 第三页
        ],
        onItemSelected: (int index) {
          setState(() {
            _selectedIndex = index; // 更新选中索引
          });
        },
        initialSelectedIndex: _selectedIndex, // 初始选中索引
        isExtended: true, // 是否扩展
        isIndicatorActive: true, // 是否显示指示器
        animationDuration: Duration(milliseconds: 500), // 动画持续时间
        bottomWidget2: Container(), // 添加底部小部件
        bottomWidget: Container(), // 添加底部小部件
        topWidget2: Container(), // 添加顶部小部件
        topWidget: Container(), // 添加顶部小部件
        collapsedWidth: 60, // 收缩宽度
        extendedWidth: 200, // 扩展宽度
        showExtendedButton: true, // 是否显示扩展按钮

        theme: NavigationSideBarTheme(
          backgroundColor: Colors.white, // 背景颜色
          elevation: 10, // 阴影高度
          selectedIconColor: Colors.blue, // 选中图标的颜色
          selectedTextStyle: TextStyle(
            color: Colors.blue, // 选中文本的颜色
            fontSize: 20, // 字号
            fontWeight: FontWeight.bold, // 字体粗细
          ),
          unSelectedIconColor: Colors.black, // 未选中图标的颜色
          unSelectedTextStyle: TextStyle(
            color: Colors.black, // 未选中文本的颜色
            fontSize: 20, // 字号
            fontWeight: FontWeight.bold, // 字体粗细
          ),
        ),
      ),
    );
  }
}