Flutter侧边栏导航插件arc_sidebar的使用

arc_sidebar 是一个用于Flutter应用的侧边栏导航插件，由 Eliezer António 开发。该插件允许开发者轻松地在应用中添加美观且功能丰富的侧边栏。

安装

要使用 arc_sidebar 插件，请按照以下步骤操作：

1. 在 pubspec.yaml 文件中添加依赖项：

   dependencies:
     arc_sidebar: ^0.0.4
   

2. 运行 flutter pub get 命令来安装依赖。
3. 在 Dart 文件中导入该插件：

   import 'package:arc_sidebar/arc_sidebar.dart';
   

如何使用

示例代码

下面是一个简单的示例，展示了如何使用 ArcSideBar 和 SideBarItem 来创建一个带有侧边栏的应用程序。

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

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: HomeScreen(),
    );
  }
}

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _currentIndex = 0;
  final List<Widget> _currentScreen = [
    Container(color: Colors.red, width: 500, height: 1000),
    Container(color: Colors.purpleAccent, width: 500, height: 1000),
    Container(color: Colors.orange, width: 500, height: 1000),
    Container(color: Colors.greenAccent, width: 500, height: 1000),
  ];

  void onIconPressed(int index) async {
    if (_currentIndex == index) return; // 防止重复构造当前屏幕
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          _currentScreen[_currentIndex],
          ArcSideBar(
            background: Colors.white,
            header: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  SizedBox(height: 50),
                  Icon(
                    Icons.flutter_dash,
                    size: 100,
                    color: Colors.blueAccent,
                  ),
                ],
              ),
            ),
            body: [
              SideBarItem(
                icon: Icons.play_arrow_outlined,
                title: 'Exhibition Screen',
                onTap: () => onIconPressed(0),
              ),
              SideBarItem(
                title: 'Popular Screen',
                icon: Icons.movie_outlined,
                onTap: () => onIconPressed(1),
              ),
              SideBarItem(
                title: 'Briefly Screen',
                icon: Icons.card_giftcard,
                onTap: () => onIconPressed(2),
              ),
            ],
            footer: Column(
              children: [
                ListTile(
                  title: Text("Dark Mode", style: TextStyle(fontWeight: FontWeight.w300, fontSize: 17)),
                  leading: Icon(Icons.lightbulb_outline, size: 30),
                  trailing: Switch.adaptive(
                    value: false,
                    onChanged: (value) {},
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

参数说明

以下是 SideBarItem 的所有参数：

Key? key,
IconData? icon,
TextStyle? style,
Color? iconColor,
String title,
void Function()? onTap,

贡献

如果您希望为 arc_sidebar 做出贡献，可以按照以下步骤进行：

1. Fork 仓库：创建您的副本。
2. 创建分支：

   git checkout -b my-feature-branch
   

3. 进行更改：实现您的功能或修复问题。
4. 提交更改：

   git commit -m "Add a new feature"
   

5. 推送到您的 Fork：

   git push origin my-feature-branch