Flutter自定义侧边栏插件side_bar_custom的使用

当然，以下是如何在Flutter项目中自定义侧边栏插件 side_bar_custom 的一个基本示例。假设你已经将 side_bar_custom 插件添加到了你的 pubspec.yaml 文件中，并且已经运行了 flutter pub get。

步骤 1: 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  side_bar_custom: ^最新版本号

步骤 2: 导入插件

在你的 Dart 文件中导入插件：

import 'package:side_bar_custom/side_bar_custom.dart';

步骤 3: 创建自定义侧边栏

以下是一个完整的示例，展示如何使用 side_bar_custom 创建一个简单的侧边栏。

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

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

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

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

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  int _selectedIndex = 0;
  final List<Widget> _widgetOptions = <Widget>[
    Text('首页'),
    Text('发现'),
    Text('朋友'),
    Text('我的'),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('侧边栏示例'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      drawer: Drawer(
        child: Column(
          children: <Widget>[
            UserAccountsDrawerHeader(
              accountName: Text('用户名'),
              accountEmail: Text('user@example.com'),
              currentAccountPicture: CircleAvatar(
                backgroundColor: Colors.grey,
                child: Icon(Icons.person, size: 64,),
              ),
            ),
            Expanded(
              child: SidebarCustom(
                items: [
                  {
                    "icon": Icons.home,
                    "title": "首页",
                    "onPressed": () {
                      _onItemTapped(0);
                      Navigator.pop(context);
                    },
                  },
                  {
                    "icon": Icons.explore,
                    "title": "发现",
                    "onPressed": () {
                      _onItemTapped(1);
                      Navigator.pop(context);
                    },
                  },
                  {
                    "icon": Icons.people,
                    "title": "朋友",
                    "onPressed": () {
                      _onItemTapped(2);
                      Navigator.pop(context);
                    },
                  },
                  {
                    "icon": Icons.person,
                    "title": "我的",
                    "onPressed": () {
                      _onItemTapped(3);
                      Navigator.pop(context);
                    },
                  },
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释

1. 导入必要的包：

   • package:flutter/material.dart 用于基本的 Flutter 组件。
   • package:side_bar_custom/side_bar_custom.dart 用于自定义侧边栏。

2. 创建主应用：

   • MyApp 是一个 StatelessWidget，它设置了应用的基本主题和主页。

3. 创建主页：

   • MyHomePage 是一个 StatefulWidget，它包含了一个 _selectedIndex 变量来跟踪当前选中的项。
   • _widgetOptions 列表包含了要显示的不同内容。

4. 侧边栏：

   • 在 Drawer 中，我们使用了 SidebarCustom 小部件，它接受一个包含侧边栏项的列表。
   • 每个项都是一个包含 icon、title 和 onPressed 回调的字典。

5. 导航：

   • 当用户点击侧边栏中的项时，_onItemTapped 方法会被调用，更新 _selectedIndex 并关闭 Drawer。

这样，你就创建了一个带有自定义侧边栏的 Flutter 应用。你可以根据需要进一步自定义侧边栏的样式和功能。