Flutter侧边抽屉导航插件flutter_inner_drawer的使用

Flutter侧边抽屉导航插件flutter_inner_drawer的使用

Inner Drawer 是一个简单的侧边抽屉导航组件，可以方便地在左侧或右侧创建一个内部区域，你可以在其中插入列表菜单或其他内容。

安装

将以下依赖添加到你的 pubspec.yaml 文件中：

dependencies:
  flutter_inner_drawer: "^1.0.0+1"

示例

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

import 'package:flutter/material.dart';
import 'package:flutter_inner_drawer/inner_drawer.dart';

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

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

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<InnerDrawerState> _innerDrawerKey = GlobalKey<InnerDrawerState>();

  void _toggle() {
    _innerDrawerKey.currentState.toggle(
      direction: InnerDrawerDirection.end,
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return InnerDrawer(
      key: _innerDrawerKey,
      onTapClose: true,
      swipe: true,
      colorTransitionChild: Colors.red,
      colorTransitionScaffold: Colors.black54,
      offset: IDOffset.only(bottom: 0.05, right: 0.0, left: 0.0),
      scale: IDOffset.horizontal(0.8),
      proportionalChildArea: true,
      borderRadius: 50,
      leftAnimationType: InnerDrawerAnimation.static,
      rightAnimationType: InnerDrawerAnimation.quadratic,
      backgroundDecoration: BoxDecoration(color: Colors.red),
      onDragUpdate: (val, direction) {
        print(val);
        print(direction == InnerDrawerDirection.start);
      },
      innerDrawerCallback: (a) => print(a),
      leftChild: Container(
        color: Colors.blue,
        child: Center(
          child: Text("左抽屉"),
        ),
      ),
      rightChild: Container(
        color: Colors.green,
        child: Center(
          child: Text("右抽屉"),
        ),
      ),
      scaffold: Scaffold(
        appBar: AppBar(
          title: Text('Inner Drawer'),
          actions: [
            IconButton(
              icon: Icon(Icons.menu),
              onPressed: _toggle,
            ),
          ],
        ),
        body: Center(
          child: Text('主页面内容'),
        ),
      ),
    );
  }
}

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

1 回复

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


flutter_inner_drawer 是一个用于在 Flutter 应用中实现侧边抽屉导航的插件。它允许你在屏幕的左侧或右侧添加一个可滑动的抽屉，并且可以自定义抽屉的样式和行为。以下是如何使用 flutter_inner_drawer 的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  flutter_inner_drawer: ^1.0.0+1

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

2. 基本使用

在你的 Dart 文件中导入 flutter_inner_drawer：

import 'package:flutter_inner_drawer/inner_drawer.dart';

接下来，你可以使用 InnerDrawer 组件来创建一个带有侧边抽屉的布局。以下是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:flutter_inner_drawer/inner_drawer.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: InnerDrawerPage(),
    );
  }
}

class InnerDrawerPage extends StatelessWidget {
  final GlobalKey<InnerDrawerState> _innerDrawerKey = GlobalKey<InnerDrawerState>();

  @override
  Widget build(BuildContext context) {
    return InnerDrawer(
      key: _innerDrawerKey,
      scaffold: Scaffold(
        appBar: AppBar(
          title: Text('Inner Drawer Example'),
          leading: IconButton(
            icon: Icon(Icons.menu),
            onPressed: () {
              _innerDrawerKey.currentState.toggle();
            },
          ),
        ),
        body: Center(
          child: Text('Main Content'),
        ),
      ),
      leftChild: Container(
        color: Colors.blue,
        child: Center(
          child: Text('Left Drawer'),
        ),
      ),
      rightChild: Container(
        color: Colors.green,
        child: Center(
          child: Text('Right Drawer'),
        ),
      ),
      onTapClose: true,
      swipe: true,
      leftAnimationType: InnerDrawerAnimation.static,
      rightAnimationType: InnerDrawerAnimation.static,
      leftOffset: 0.3,
      rightOffset: 0.3,
    );
  }
}

3. 参数说明

  • scaffold: 这是主内容区域，通常是一个 Scaffold 组件。
  • leftChild: 左侧抽屉的内容。
  • rightChild: 右侧抽屉的内容。
  • onTapClose: 点击主内容区域是否关闭抽屉。
  • swipe: 是否允许通过滑动手势打开或关闭抽屉。
  • leftAnimationType 和 rightAnimationType: 定义抽屉打开和关闭的动画类型。
  • leftOffset 和 rightOffset: 定义抽屉打开时的偏移量（相对于屏幕宽度或高度的比例）。

4. 控制抽屉

你可以通过 GlobalKey<InnerDrawerState> 来控制抽屉的打开和关闭：

_innerDrawerKey.currentState.toggle(); // 切换抽屉状态
_innerDrawerKey.currentState.openLeft(); // 打开左侧抽屉
_innerDrawerKey.currentState.openRight(); // 打开右侧抽屉
_innerDrawerKey.currentState.close(); // 关闭抽屉
回到顶部