Flutter自定义抽屉导航插件 fancy_drawer 的使用

fancy_drawer 是一个用于Flutter应用的自定义抽屉导航插件，提供了美观的抽屉体验。以下是详细的使用说明和完整的示例代码。

功能展示

使用方法

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 fancy_drawer 依赖：

dependencies:
  flutter:
    sdk: flutter
  fancy_drawer: ^1.0.0

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

2. 初始化控制器

在你的 StatefulWidget 中初始化 FancyDrawerController，并在 initState 和 dispose 方法中进行相应的处理：

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

class HomeScreen extends StatefulWidget {
  HomeScreen({Key? key}) : super(key: key);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateMixin {
  late FancyDrawerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = FancyDrawerController(
        vsync: this, duration: Duration(milliseconds: 250))
      ..addListener(() {
        setState(() {});
      });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

3. 构建界面

使用 FancyDrawerWrapper 组件来包裹你的主内容，并设置抽屉中的项目：

@override
Widget build(BuildContext context) {
  return Material(
    child: FancyDrawerWrapper(
      backgroundColor: Colors.white,
      controller: _controller,
      drawerItems: <Widget>[
        Text(
          "Go to home",
          style: TextStyle(
            fontSize: 18,
            color: Colors.purple.shade700,
            fontWeight: FontWeight.bold,
          ),
        ),
        Text(
          "About us",
          style: TextStyle(
            fontSize: 18,
            color: Colors.purple.shade700,
            fontWeight: FontWeight.bold,
          ),
        ),
        Text(
          "Our products",
          style: TextStyle(
            fontSize: 18,
            color: Colors.purple.shade700,
            fontWeight: FontWeight.bold,
          ),
        ),
        Text(
          "Support us",
          style: TextStyle(
            fontSize: 18,
            color: Colors.purple.shade700,
            fontWeight: FontWeight.bold,
          ),
        ),
        Text(
          "Log out",
          style: TextStyle(
            fontSize: 18,
            color: Colors.purple.shade700,
            fontWeight: FontWeight.bold,
          ),
        ),
      ],
      child: Scaffold(
        appBar: AppBar(
          elevation: 4.0,
          title: Text(
            "Some appbar",
            style: TextStyle(color: Colors.black),
          ),
          backgroundColor: Colors.white,
          leading: IconButton(
            icon: Icon(
              Icons.menu,
              color: Colors.black,
            ),
            onPressed: () {
              _controller.toggle();
            },
          ),
        ),
        body: Center(
          child: Text("Body"),
        ),
      ),
    ),
  );
}

参数说明

必填参数

• drawerItems: 抽屉中的项目，通常为 Text 或其他小部件。
• child: 主应用程序内容。
• controller: 控制动画的控制器。

可选参数

• backgroundColor: 设置抽屉背景颜色，默认为白色。
• itemGap: 设置项目之间的间距，默认为10.0。
• hideOnContentTap: 控制点击内容区域时是否隐藏抽屉，默认为 true。
• cornerRadius: 设置圆角半径，默认为8.0。

完整示例

以下是一个完整的示例，展示了如何集成 fancy_drawer 插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class HomeScreen extends StatefulWidget {
  HomeScreen({Key? key}) : super(key: key);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateMixin {
  late FancyDrawerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = FancyDrawerController(
        vsync: this, duration: Duration(milliseconds: 250))
      ..addListener(() {
        setState(() {});
      });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      child: FancyDrawerWrapper(
        backgroundColor: Colors.white,
        controller: _controller,
        drawerItems: <Widget>[
          Text(
            "Go to home",
            style: TextStyle(
              fontSize: 18,
              color: Colors.purple.shade700,
              fontWeight: FontWeight.bold,
            ),
          ),
          Text(
            "About us",
            style: TextStyle(
              fontSize: 18,
              color: Colors.purple.shade700,
              fontWeight: FontWeight.bold,
            ),
          ),
          Text(
            "Our products",
            style: TextStyle(
              fontSize: 18,
              color: Colors.purple.shade700,
              fontWeight: FontWeight.bold,
            ),
          ),
          Text(
            "Support us",
            style: TextStyle(
              fontSize: 18,
              color: Colors.purple.shade700,
              fontWeight: FontWeight.bold,
            ),
          ),
          Text(
            "Log out",
            style: TextStyle(
              fontSize: 18,
              color: Colors.purple.shade700,
              fontWeight: FontWeight.bold,
            ),
          ),
        ],
        child: Scaffold(
          appBar: AppBar(
            elevation: 4.0,
            title: Text(
              "Some appbar",
              style: TextStyle(color: Colors.black),
            ),
            backgroundColor: Colors.white,
            leading: IconButton(
              icon: Icon(
                Icons.menu,
                color: Colors.black,
              ),
              onPressed: () {
                _controller.toggle();
              },
            ),
          ),
          body: Center(
            child: Text("Body"),
          ),
        ),
      ),
    );
  }
}

通过上述步骤，你就可以成功地在你的Flutter应用中集成并使用 fancy_drawer 插件了。