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

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

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

flutter_slide_drawer 是一个帮助你轻松实现具有滑动效果的抽屉导航的Flutter插件。本文将介绍如何使用这个插件，并提供完整的示例代码。

开始使用

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

dependencies:
    flutter_slide_drawer: '<latest_release>'

确保替换 <latest_release> 为最新发布的版本号。

文档

SliderDrawerWidget

这是主控件，用于创建带有滑动效果的抽屉。

SliderDrawerWidget(
    key: drawerKey,
    option: SliderDrawerOption(),
    drawer: CustomDrawer(),
    body: Scaffold(
      appBar: AppBar(),
      body: Container(),
    )
)

参数说明

参数 类型 是否必需 说明
key GlobalKey<SliderDrawerWidgetState> 是 必须提供以打开抽屉
drawer Widget 是 自定义的抽屉组件
body Widget 是 主体内容组件
option SliderDrawerOption 否 设置多种选项

SliderDrawerOption

用于配置抽屉的各种选项。

SliderDrawerOption(
  backgroundImage: Image.asset("assets/sample_background.jpg"),
  backgroundColor: Colors.black,
  sliderEffectType: SliderEffectType.Rounded,
  upDownScaleAmount: 50,
  radiusAmount: 50,
  direction: SliderDrawerDirection.LTR,
)

参数说明

参数 类型 是否必需 说明
backgroundImage Image Widget 否 抽屉背景图片
backgroundColor Color 否 抽屉背景颜色，默认蓝色
sliderEffectType SliderEffectType 否 滑动效果类型（Rounded, Rectangle）
upDownScaleAmount double 否 如果使用 Rounded 类型，可以设置此参数调整垂直间距
radiusAmount double 否 如果使用 Rounded 类型，可以设置此参数调整圆角半径
direction SliderDrawerDirection 否 抽屉方向，默认从左到右（LTR）

示例应用

下面是一个完整的示例应用，展示了如何使用 flutter_slide_drawer 插件。

完整示例代码

import 'package:flutter/material.dart';
import 'package:flutter_slide_drawer/flutter_slide_widget.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: App(),
    );
  }
}

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

  [@override](/user/override)
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  final GlobalKey<SliderDrawerWidgetState> drawerKey = GlobalKey();

  bool toggleBackgroundState = false;

  void toggleBackgroundImage() {
    setState(() {
      toggleBackgroundState = !toggleBackgroundState;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SliderDrawerWidget(
        key: drawerKey,
        option: SliderDrawerOption(
          backgroundImage: toggleBackgroundState
              ? Image.asset("assets/sample_background.jpg")
              : Image.asset("assets/sample_background2.jpg"),
          backgroundColor: Colors.black,
          sliderEffectType: SliderEffectType.Rounded,
          upDownScaleAmount: 50,
          radiusAmount: 50,
          direction: SliderDrawerDirection.LTR,
        ),
        drawer: CustomDrawer(),
        body: Scaffold(
          appBar: AppBar(
            leading: GestureDetector(
              onTap: () {
                drawerKey.currentState!.toggleDrawer();
              },
              child: Icon(Icons.menu),
            ),
            actions: [
              GestureDetector(
                onTap: () {
                  drawerKey.currentState!.toggleDrawer();
                },
                child: Padding(
                  padding: const EdgeInsets.all(15.0),
                  child: Icon(Icons.menu),
                ),
              ),
            ],
          ),
          body: Container(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: ElevatedButton(
                      onPressed: toggleBackgroundImage,
                      child: Text('Change Drawer Background')),
                ),
                Expanded(
                    child: SingleChildScrollView(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: List.generate(
                      100,
                      (index) => Container(
                        padding: const EdgeInsets.all(15),
                        child: Text("$index Contents "),
                      ),
                    ),
                  ),
                )),
              ],
            ),
          ),
        ));
  }
}

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

  Widget _thumbnailPart() {
    return Row(
      children: [
        SizedBox(
          width: 50,
          height: 50,
          child: CircleAvatar(
            backgroundImage:
                Image.asset("assets/default_user.png", fit: BoxFit.contain).image,
          ),
        ),
        Expanded(
          child: Padding(
            padding: const EdgeInsets.all(15.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Text(
                  "Sudarlife",
                  style: TextStyle(color: Colors.white, fontSize: 24),
                ),
                Text(
                  "Boys, be ambitious",
                  style: TextStyle(
                    color: Colors.white.withOpacity(0.5),
                    fontSize: 12,
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget get _line => Container(
      margin: const EdgeInsets.symmetric(vertical: 15),
      height: 1,
      color: Colors.white.withOpacity(0.2));

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SafeArea(
      child: Container(
        padding: const EdgeInsets.all(25),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            _thumbnailPart(),
            SizedBox(height: 20),
            _line,
            MenuBox(
              padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 15),
              icon: Icon(
                Icons.add_chart,
                color: Colors.white,
              ),
              menu: Text(
                "Chart",
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.white,
                ),
              ),
            ),
            MenuBox(
              padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 15),
              icon: Icon(
                Icons.add_to_photos_outlined,
                color: Colors.white,
              ),
              menu: Text(
                "Photos",
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.white,
                ),
              ),
            ),
            MenuBox(
              padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 15),
              icon: Icon(
                Icons.announcement_rounded,
                color: Colors.white,
              ),
              menu: Text(
                "Service center",
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.white,
                ),
              ),
            ),
            MenuBox(
              padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 15),
              icon: Icon(
                Icons.settings,
                color: Colors.white,
              ),
              menu: Text(
                "Setting",
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.white,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class MenuBox extends StatelessWidget {
  final EdgeInsetsGeometry? padding;
  final Widget? icon;
  final Widget menu;
  final Function()? onTap;
  const MenuBox({
    Key? key,
    required this.menu,
    this.padding = const EdgeInsets.all(10),
    this.icon,
    this.onTap,
  }) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        if (onTap != null) {
          this.onTap!();
        }
      },
      child: Container(
        padding: padding,
        child: Row(
          children: [
            icon != null ? icon! : Container(),
            SizedBox(width: 15),
            menu,
          ],
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用flutter_slide_drawer插件来实现滑动抽屉导航的示例代码。

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

dependencies:
  flutter:
    sdk: flutter
  flutter_slide_drawer: ^x.y.z  # 替换为最新版本号

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

接下来，创建一个Flutter项目（如果你还没有项目的话），并在main.dart文件中使用flutter_slide_drawer插件。以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Slide Drawer Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SlideDrawerScaffold(
        drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: <Widget>[
              DrawerHeader(
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(
                    'Drawer Header',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 24,
                    ),
                  ),
                ),
              ),
              ListTile(
                leading: Icon(Icons.home),
                title: Text('Home'),
                onTap: () {
                  Navigator.pop(context); // 关闭抽屉并返回主页面
                  // 你可以在这里添加跳转到其他页面的代码
                },
              ),
              ListTile(
                leading: Icon(Icons.settings),
                title: Text('Settings'),
                onTap: () {
                  Navigator.pop(context); // 关闭抽屉并返回主页面
                  // 你可以在这里添加跳转到其他页面的代码
                },
              ),
            ],
          ),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'Hello, Flutter!',
                style: TextStyle(fontSize: 24),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  // 打开抽屉
                  SlideDrawerScaffold.of(context).openDrawer();
                },
                child: Text('Open Drawer'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

  1. 使用MaterialApp来创建我们的应用。
  2. 使用SlideDrawerScaffold来替代默认的Scaffold，它提供了滑动抽屉的功能。
  3. 在drawer属性中定义了一个Drawer，它包含了一个DrawerHeader和两个ListTile，用于导航到不同的页面（尽管在这个示例中，我们只是简单地关闭了抽屉）。
  4. 在body属性中，我们放置了一个简单的文本和一个按钮，点击按钮时会打开抽屉。

注意，SlideDrawerScaffold.of(context).openDrawer();用于打开抽屉。这是flutter_slide_drawer插件提供的方法，用于控制抽屉的打开和关闭。

你可以根据需要进一步自定义和扩展这个示例。

回到顶部