Flutter滑动抽屉菜单插件flutter_slider_drawer_v的使用

发布于 1周前 作者 htzhanglong 来自 Flutter

Flutter滑动抽屉菜单插件flutter_slider_drawer_v的使用

插件信息

Plugin example demo 
dependencies:
  flutter_slider_drawer: '<latest_release>'

特性

  • 支持自定义动画时间的滑块
  • 提供基本的AppBar，并可自定义颜色、大小和标题
  • 动态滑动打开和关闭偏移量
  • 提供抽屉图标动画
  • 可自定义主屏幕阴影的颜色、模糊半径和扩展半径
  • 支持RTL（从右到左）、LTR（从左到右）和TTB（从上到下）滑动打开选择

示例代码

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

import 'main_widget.dart';
import 'menu_widget.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  GlobalKey<SliderMenuContainerState> _key = new GlobalKey<SliderMenuContainerState>();
  late String title;

  @override
  void initState() {
    title = "Home";
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SliderMenuContainer(
            appBarColor: Colors.white,
            key: _key,
            sliderMenuOpenSize: 200,
            title: Text(
              title,
              style: TextStyle(fontSize: 22, fontWeight: FontWeight.w700),
            ),
            sliderMenu: MenuWidget(
              onItemClick: (title) {
                _key.currentState!.closeDrawer();
                setState(() {
                  this.title = title;
                });
              },
            ),
            sliderMain: MainWidget()),
      ),
    );
  }
}

滑动打开方向

SliderOpen.LEFT_TO_RIGHT SliderOpen.RIGHT_TO_LEFT SliderOpen.TOP_TO_BOTTOM
slider_left slider_right slider_top

控制抽屉

GlobalKey<SliderMenuContainerState> _key = new GlobalKey<SliderMenuContainerState>();

@override
Widget build(BuildContext context) {
  return SliderMenuContainer(
    appBarColor: Colors.white,
    key: _key,
    sliderMenuOpenSize: 200,
    sliderMenu: MenuWidget(
      onItemClick: (title) {
        _key.currentState!.closeDrawer();
        setState(() {
          this.title = title;
        });
      },
    ),
    sliderMain: MainWidget(),
  );
}

控制方法：

_key.currentState!.closeDrawer();
_key.currentState!.openDrawer();
_key.currentState!.toggle();
_key.currentState!.isDrawerOpen();

动画控制变量：

_key.currentState!.animationController

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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何使用flutter_slider_drawer_v插件在Flutter中实现滑动抽屉菜单的示例代码。这个插件允许你创建一个可滑动的抽屉菜单，类似于许多移动应用中的导航抽屉。

首先，确保你已经在pubspec.yaml文件中添加了flutter_slider_drawer_v依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_slider_drawer_v: ^x.x.x  # 请替换为最新版本号

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

接下来，在你的Dart文件中，你可以这样使用flutter_slider_drawer_v插件：

import 'package:flutter/material.dart';
import 'package:flutter_slider_drawer_v/flutter_slider_drawer.dart';

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<SliderDrawerState> _drawerKey = GlobalKey<SliderDrawerState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Slider Drawer Demo'),
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: () {
            _drawerKey.currentState?.openDrawer();
          },
        ),
      ),
      body: SliderDrawer(
        key: _drawerKey,
        controller: SliderDrawerController(),
        margin: EdgeInsets.zero,
        alignment: DrawerAlignment.start,
        child: Container(
          color: Colors.white,
          width: 250,
          child: Column(
            children: <Widget>[
              ListTile(
                leading: Icon(Icons.home),
                title: Text('Home'),
                onTap: () {
                  Navigator.pop(context); // 关闭抽屉菜单
                },
              ),
              ListTile(
                leading: Icon(Icons.settings),
                title: Text('Settings'),
                onTap: () {
                  Navigator.pop(context); // 关闭抽屉菜单
                },
              ),
              // 更多菜单项...
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _drawerKey.currentState?.openDrawer();
        },
        tooltip: 'Open drawer',
        child: Icon(Icons.menu),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个滑动抽屉菜单。抽屉菜单通过SliderDrawer小部件实现，并且可以通过点击左上角的菜单图标或浮动操作按钮来打开。

代码解释：

  1. 依赖导入：首先导入flutter_slider_drawer_v包。
  2. 主应用：MyApp是一个StatelessWidget，它配置了应用的主题并设置了主页为MyHomePage。
  3. 主页：MyHomePage是一个StatefulWidget，它的状态_MyHomePageState包含了抽屉菜单的逻辑。
  4. 抽屉菜单键：使用GlobalKey<SliderDrawerState>来访问和控制抽屉菜单的状态。
  5. 抽屉菜单：SliderDrawer小部件用于创建抽屉菜单，它包含了一个简单的列表（Column中包含多个ListTile）。
  6. 打开抽屉：通过点击AppBar中的菜单图标或浮动操作按钮来调用_drawerKey.currentState?.openDrawer()方法打开抽屉菜单。

这个示例展示了如何使用flutter_slider_drawer_v插件在Flutter应用中实现一个基本的滑动抽屉菜单。你可以根据需要进一步自定义和扩展这个菜单。

回到顶部