Flutter滑动抽屉导航插件slidable_drawer的使用

Flutter滑动抽屉导航插件slidable_drawer的使用

此插件用于实现一个可以通过简单滑动打开的自定义抽屉。 🚀

包含可进行动画打开/关闭抽屉的 SlidableDrawerController 😊
点个赞并 收藏此仓库 来支持我们的项目!

Pub License: MIT Repository views Pub

Pub likes Pub popularity Pub points


📌 特性 #

  • ✅ 通过向右滑动简单地打开/关闭抽屉
  • ✅ 使用 SlidableDrawerController 打开/关闭抽屉

📌 开始使用 #

请按照以下步骤使用此插件:

添加依赖 #

dependencies:
  slidable_drawer: ^1.0.6

导入包 #

import 'package:slidable_drawer/slidable_drawer.dart';

使用简单 #

以下是一个简单的 SlidableDrawer 使用示例。

Slidable package's example

小部件部分:

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

void main() {
  runApp(MaterialApp(
    theme: ThemeData.dark(),
    home: const MyApp(),
  ));
}

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

  // 创建并返回与 MyApp 相关联的状态。
  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

// MyApp 小部件的状态。
class _MyAppState extends State<MyApp> {
  final SlidableDrawerController _slidableDrawer = SlidableDrawerController();

  // 当此对象插入到树中时调用。
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  // 构建此状态所表示的小部件。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SlidableDrawer(
        drawerBody: _SlidableDraweBody(
          controller: _slidableDrawer,
        ),
        innerDrawerController: _slidableDrawer,
        child: SizedBox(
          height: MediaQuery.of(context).size.height,
          child: Center(
              child: TextButton(
            style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all(Colors.blue),
            ),
            onPressed: () {
              _slidableDrawer.animateToOpen(); // 打开抽屉
            },
            child: const Text(
              'Open Drawer',
              style: TextStyle(color: Colors.white),
            ),
          )),
        ),
      ),
    );
  }
}

class _SlidableDraweBody extends StatelessWidget {
  final SlidableDrawerController controller;

  const _SlidableDraweBody({required this.controller});

  // 构建此无状态小部件所表示的小部件。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      color: const Color.fromARGB(255, 66, 66, 66), // 可以是任何颜色
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TextButton(
            onPressed: () {
              controller.animateToClose(); // 关闭抽屉
            },
            child: const Text('Close'),
          ),
        ],
      ),
    );
  }
}

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

1 回复

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


当然,以下是如何在Flutter中使用slidable_drawer插件来实现滑动抽屉导航的一个简单示例。slidable_drawer是一个流行的Flutter包,用于创建可滑动的抽屉导航菜单。不过需要注意的是,截至我的最后一次更新(由于信息时效性),slidable_drawer可能不是官方包或非常流行的第三方包,因此这里我会展示一个类似效果的实现,使用Flutter内置的Drawer组件结合DraggableScrollableSheet来实现一个可滑动的抽屉效果。

首先,确保在你的pubspec.yaml文件中添加必要的依赖(虽然这里不涉及额外包,但通常Flutter开发需要一些基本依赖):

dependencies:
  flutter:
    sdk: flutter

然后,你可以按照以下步骤创建一个带有可滑动抽屉导航的应用:

  1. 创建主应用框架
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Sliding Drawer Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}
  1. 实现主页和抽屉导航
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  double _drawerElevation = 16.0;
  double _drawerPercentOpen = 0.0;
  final double _minExtent = 56.0; // Minimum drawer extent
  final double _maxExtent = 300.0; // Maximum drawer extent

  void _openDrawer() {
    setState(() {
      _drawerPercentOpen = 1.0;
    });
  }

  void _closeDrawer() {
    setState(() {
      _drawerPercentOpen = 0.0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sliding Drawer Demo'),
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: _openDrawer,
        ),
      ),
      body: Center(
        child: Text('Swipe left to open drawer'),
      ),
      endDrawer: DraggableScrollableSheet(
        expand: _drawerPercentOpen,
        minChildSize: _minExtent,
        maxChildSize: _maxExtent,
        builder: (BuildContext context, ScrollController scrollController) {
          return Drawer(
            elevation: _drawerElevation,
            child: ListView(
              controller: scrollController,
              // Important: Remove any padding from the ListView.
              padding: EdgeInsets.zero,
              children: <Widget>[
                DrawerHeader(
                  decoration: BoxDecoration(
                    color: Colors.blue,
                  ),
                  child: Text('Drawer Header'),
                ),
                ListTile(
                  leading: Icon(Icons.home),
                  title: Text('Home'),
                  onTap: () {
                    _closeDrawer();
                    // Navigator.pop(context); // Uncomment if you want to close drawer on item tap
                  },
                ),
                ListTile(
                  leading: Icon(Icons.settings),
                  title: Text('Settings'),
                  onTap: () {
                    _closeDrawer();
                    // Navigator.pop(context); // Uncomment if you want to close drawer on item tap
                  },
                ),
                // Add more ListTiles as needed
              ],
            ),
          );
        },
      ),
    );
  }
}

在这个示例中,我们使用了DraggableScrollableSheet来实现抽屉的可滑动效果。expand属性控制抽屉的展开程度,而minChildSizemaxChildSize定义了抽屉的最小和最大尺寸。Drawer组件用于构建抽屉的内容,包括头部和列表项。

请注意,这里使用的是endDrawer属性,这意味着抽屉将从屏幕的右侧滑出。如果你希望抽屉从左侧滑出,可以使用drawer属性代替endDrawer

这个示例展示了如何使用Flutter内置组件创建一个基本的可滑动抽屉导航菜单。虽然这不是直接使用slidable_drawer插件的代码,但它提供了类似的功能和效果。如果你确实需要使用slidable_drawer插件,请确保它存在并在其官方文档或GitHub仓库中查找具体的用法示例。

回到顶部