Flutter抽屉导航插件flutter

Flutter抽屉导航插件flutter_drawers的使用

Beautiful drawer designs

特点

自定义抽屉UI
使用简单
兼容所有平台
遵循stable Flutter通道
支持空安全

Example Project

在example文件夹中有非常棒的示例项目。查看它。否则，继续阅读以快速上手。

Getting started

首先包含flutter_drawers然后享受内置小部件：

import 'package:flutter_drawers/flutter_drawers.dart';

// 其他代码

BoxDrawer(
    drawer: MyDrawer(), // 定义抽屉内容
    alignment: DrawerAlignment.start, // 抽屉位置（start表示左侧）
    showDrawerOpener: true, // 是否显示打开抽屉的按钮
    drawerOpenerTopMargin: 8, // 打开按钮的顶部间距
    animatedHeader: MyDrawerHeader(), // 动画头部内容
    headerHeight: 50, // 头部高度
    child: MyHomePage(), // 主页面内容
),

作者：AMIT HASAN

示例代码

以下是一个完整的示例代码，展示如何使用flutter_drawers插件：

import 'package:flutter/material.dart';
import 'package:flutter_drawers/flutter_drawers.dart'; // 引入插件
import 'package:provider/provider.dart'; // 使用状态管理

// 假设我们有一个计数器作为示例数据
class MyCounter with ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

// 抽屉内容
class MyDrawer extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: [
        const Text("这是抽屉内容"),
        ElevatedButton(
          onPressed: () {
            Navigator.pop(context); // 关闭抽屉
          },
          child: const Text("关闭"),
        ),
      ],
    );
  }
}

// 抽屉头部动画
class MyDrawerHeader extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      height: 50,
      color: Colors.blue,
      alignment: Alignment.center,
      child: const Text(
        "抽屉头部",
        style: TextStyle(color: Colors.white, fontSize: 18),
      ),
    );
  }
}

// 主页面
class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("主页面")),
      body: Center(
        child: Text(
          "点击按钮打开抽屉",
          style: Theme.of(context).textTheme.headlineMedium,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => const MyDrawer()),
          ); // 手动打开抽屉
        },
        child: const Icon(Icons.menu),
      ),
    );
  }
}

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => MyCounter(), // 创建状态管理实例
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        home: BoxDrawer(
          drawer: const MyDrawer(), // 抽屉内容
          alignment: DrawerAlignment.start, // 抽屉位置
          showDrawerOpener: true, // 显示打开抽屉的按钮
          drawerOpenerTopMargin: 8, // 按钮顶部间距
          animatedHeader: const Text( // 动画头部内容
            'Hello Flutter',
            style: TextStyle(
              color: Colors.white,
              fontSize: 24,
              fontWeight: FontWeight.bold,
              backgroundColor: Colors.blue,
            ),
            textAlign: TextAlign.center,
          ),
          headerHeight: 50, // 头部高度
          child: const MyHomePage(), // 主页面内容
        ),
      ),
    );
  }
}

更多关于Flutter抽屉导航插件flutter_drawers的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

songsunli 1楼

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

flutter_drawers 是一个用于在 Flutter 应用中实现抽屉导航的插件。它提供了多种抽屉样式和配置选项，可以帮助你轻松地创建自定义的抽屉导航。以下是如何使用 flutter_drawers 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 flutter_drawers 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_drawers: ^0.0.1  # 请检查最新版本

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

2. 导入包

在你的 Dart 文件中导入 flutter_drawers 包：

import 'package:flutter_drawers/flutter_drawers.dart';

3. 使用 `DrawerScaffold`

flutter_drawers 提供了一个 DrawerScaffold 组件，它可以替代 Flutter 的 Scaffold 组件，并允许你添加抽屉导航。

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DrawerScaffold(
      appBar: AppBar(
        title: Text('Drawer Example'),
      ),
      drawers: [
        Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: <Widget>[
              DrawerHeader(
                child: Text('Drawer Header'),
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
              ),
              ListTile(
                title: Text('Item 1'),
                onTap: () {
                  // 处理点击事件
                },
              ),
              ListTile(
                title: Text('Item 2'),
                onTap: () {
                  // 处理点击事件
                },
              ),
            ],
          ),
        ),
      ],
      body: Center(
        child: Text('Main Content'),
      ),
    );
  }
}

4. 配置抽屉

DrawerScaffold 允许你配置多个抽屉，并且可以设置抽屉的位置、宽度、动画等。

DrawerScaffold(
  appBar: AppBar(
    title: Text('Drawer Example'),
  ),
  drawers: [
    Drawer(
      width: 250, // 设置抽屉宽度
      position: DrawerPosition.left, // 设置抽屉位置
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          DrawerHeader(
            child: Text('Left Drawer'),
            decoration: BoxDecoration(
              color: Colors.blue,
            ),
          ),
          ListTile(
            title: Text('Item 1'),
            onTap: () {
              // 处理点击事件
            },
          ),
          ListTile(
            title: Text('Item 2'),
            onTap: () {
              // 处理点击事件
            },
          ),
        ],
      ),
    ),
    Drawer(
      width: 250,
      position: DrawerPosition.right, // 右侧抽屉
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          DrawerHeader(
            child: Text('Right Drawer'),
            decoration: BoxDecoration(
              color: Colors.green,
            ),
          ),
          ListTile(
            title: Text('Item 3'),
            onTap: () {
              // 处理点击事件
            },
          ),
          ListTile(
            title: Text('Item 4'),
            onTap: () {
              // 处理点击事件
            },
          ),
        ],
      ),
    ),
  ],
  body: Center(
    child: Text('Main Content'),
  ),
);

5. 控制抽屉

你可以通过 DrawerScaffoldController 来控制抽屉的打开和关闭。

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

class _MyHomePageState extends State<MyHomePage> {
  final DrawerScaffoldController _drawerController = DrawerScaffoldController();

  @override
  Widget build(BuildContext context) {
    return DrawerScaffold(
      controller: _drawerController,
      appBar: AppBar(
        title: Text('Drawer Example'),
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: () {
            _drawerController.toggleDrawer(DrawerPosition.left);
          },
        ),
      ),
      drawers: [
        Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: <Widget>[
              DrawerHeader(
                child: Text('Drawer Header'),
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
              ),
              ListTile(
                title: Text('Item 1'),
                onTap: () {
                  _drawerController.closeDrawer();
                },
              ),
              ListTile(
                title: Text('Item 2'),
                onTap: () {
                  _drawerController.closeDrawer();
                },
              ),
            ],
          ),
        ),
      ],
      body: Center(
        child: Text('Main Content'),
      ),
    );
  }
}

6. 自定义抽屉样式

你可以通过 Drawer 的 decoration 属性来自定义抽屉的样式，例如背景颜色、边框等。

Drawer(
  width: 250,
  decoration: BoxDecoration(
    color: Colors.white,
    boxShadow: [
      BoxShadow(
        color: Colors.black26,
        blurRadius: 10.0,
        spreadRadius: 2.0,
      ),
    ],
  ),
  child: ListView(
    padding: EdgeInsets.zero,
    children: <Widget>[
      DrawerHeader(
        child: Text('Custom Drawer'),
        decoration: BoxDecoration(
          color: Colors.blue,
        ),
      ),
      ListTile(
        title: Text('Item 1'),
        onTap: () {
          // 处理点击事件
        },
      ),
      ListTile(
        title: Text('Item 2'),
        onTap: () {
          // 处理点击事件
        },
      ),
    ],
  ),
);

7. 处理抽屉事件

你可以通过 DrawerScaffold 的 onDrawerOpened 和 onDrawerClosed 回调来处理抽屉的打开和关闭事件。

DrawerScaffold(
  onDrawerOpened: (DrawerPosition position) {
    print('Drawer opened: $position');
  },
  onDrawerClosed: (DrawerPosition position) {
    print('Drawer closed: $position');
  },
  appBar: AppBar(
    title: Text('Drawer Example'),
  ),
  drawers: [
    Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          DrawerHeader(
            child: Text('Drawer Header'),
            decoration: BoxDecoration(
              color: Colors.blue,
            ),
          ),
          ListTile(
            title: Text('Item 1'),
            onTap: () {
              // 处理点击事件
            },
          ),
          ListTile(
            title: Text('Item 2'),
            onTap: () {
              // 处理点击事件
            },
          ),
        ],
      ),
    ),
  ],
  body: Center(
    child: Text('Main Content'),
  ),
);

Flutter抽屉导航插件flutter_drawers的使用