Flutter侧边菜单动画插件anim_side

Flutter侧边菜单动画插件anim_side_menu的使用

属性

以下是您可以自定义的一些重要属性：

属性名称	描述
`animatedDuration`	调整滑动动画的持续时间。
`background`	滑动菜单的背景颜色。
`curve`	调整滑动动画的曲线样式。
`closeIcon`	显示用于关闭滑动菜单的图标。

如何使用

要将My anim_side_menu 包集成到您的项目中，请遵循以下步骤：

1. 添加依赖

在pubspec.yaml文件中添加以下依赖项：

dependencies:
  flutter:
    sdk: flutter
  anim_side_menu:

2. 使用SideMenuType.animNRotate

final GlobalKey<SideMenuState> _sideMenuKey = GlobalKey<SideMenuState>();

SideMenu(
    key: _sideMenuKey,
    menu: buildMenu(),
    type: SideMenuType.animNRotate,
    child: Scaffold(
        appBar: AppBar(
            leading: IconButton(
              icon: Icon(Icons.menu),
              onPressed: () {
                final _state = _sideMenuKey.currentState;
                if (_state.isOpened)
                  _state.closeSideMenu(); // 关闭侧边菜单
                else
                  _state.openSideMenu(); // 打开侧边菜单
              },
            ),
        ),
    ),
);

3. 使用SideMenuType.animNSlide

final GlobalKey<SideMenuState> _sideMenuKey = GlobalKey<SideMenuState>();

SideMenu(
    key: _sideMenuKey,
    menu: buildMenu(),
    type: SideMenuType.animNSlide,
    child: Scaffold(
        appBar: AppBar(
            leading: IconButton(
              icon: Icon(Icons.menu),
              onPressed: () {
                final _state = _sideMenuKey.currentState;
                if (_state.isOpened)
                  _state.closeSideMenu(); // 关闭侧边菜单
                else
                  _state.openSideMenu(); // 打开侧边菜单
              },
            ),
        ),
    ),
);

4. 使用SideMenuType.slide

final GlobalKey<SideMenuState> _sideMenuKey = GlobalKey<SideMenuState>();

SideMenu(
    key: _sideMenuKey,
    menu: buildMenu(),
    type: SideMenuType.slide,
    child: Scaffold(
        appBar: AppBar(
            leading: IconButton(
              icon: Icon(Icons.menu),
              onPressed: () {
                final _state = _sideMenuKey.currentState;
                if (_state.isOpened)
                  _state.closeSideMenu(); // 关闭侧边菜单
                else
                  _state.openSideMenu(); // 打开侧边菜单
              },
            ),
        ),
    ),
);

5. 使用SideMenuType.slideNRotate

final GlobalKey<SideMenuState> _sideMenuKey = GlobalKey<SideMenuState>();

SideMenu(
    key: _sideMenuKey,
    menu: buildMenu(),
    type: SideMenuType.slideNRotate,
    child: Scaffold(
        appBar: AppBar(
            leading: IconButton(
              icon: Icon(Icons.menu),
              onPressed: () {
                final _state = _sideMenuKey.currentState;
                if (_state.isOpened)
                  _state.closeSideMenu(); // 关闭侧边菜单
                else
                  _state.openSideMenu(); // 打开侧边菜单
              },
            ),
        ),
    ),
);

示例代码

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

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

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

  // 这个小部件是您的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Anim Side Menu',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Anim Side Menu'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  final GlobalKey<SideMenuState> _sideMenuKey = GlobalKey<SideMenuState>();

  void toggleMenu() {
    setState(() {
      if (_sideMenuKey.currentState!.isOpened) {
        _sideMenuKey.currentState!.closeSideMenu();
      } else {
        _sideMenuKey.currentState!.openSideMenu();
      }
    });
  }

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SideMenu(
      key: _sideMenuKey,
      type: SideMenuType.slide,
      onClosedIcon: () {
        toggleMenu();
      },
      menu: buildMenu(),
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blue,
          leading: GestureDetector(
            onTap: () => toggleMenu(),
            child: const Icon(Icons.menu),
          ),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text(
                '你已经点击了按钮多少次：',
              ),
              Text(
                '$_counter',
                style: Theme.of(context).textTheme.headlineMedium,
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: '增加',
          child: const Icon(Icons.add),
        ),
      ),
    );
  }

  Widget buildMenu() {
    return SingleChildScrollView(
      padding: const EdgeInsets.symmetric(vertical: 50.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: EdgeInsets.only(left: 16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                CircleAvatar(
                  backgroundColor: Colors.white,
                  radius: 22.0,
                  child: Image.asset('assets/image.png'),
                ),
                const SizedBox(height: 16.0),
                const Text(
                  "你好，John Doe",
                  style: TextStyle(color: Colors.white),
                ),
                const SizedBox(height: 20.0),
              ],
            ),
          ),
          ListTile(
            onTap: () {},
            leading: const Icon(Icons.home, size: 20.0, color: Colors.white),
            title: const Text("首页"),
            textColor: Colors.white,
            dense: true,
          ),
          ListTile(
            onTap: () {},
            leading: const Icon(Icons.verified_user,
                size: 20.0, color: Colors.white),
            title: const Text("个人资料"),
            textColor: Colors.white,
            dense: true,
          ),
          ListTile(
            onTap: () {},
            leading: const Icon(Icons.monetization_on,
                size: 20.0, color: Colors.white),
            title: const Text("钱包"),
            textColor: Colors.white,
            dense: true,
          ),
          ListTile(
            onTap: () {},
            leading: const Icon(Icons.shopping_cart,
                size: 20.0, color: Colors.white),
            title: const Text("购物车"),
            textColor: Colors.white,
            dense: true,
          ),
          ListTile(
            onTap: () {},
            leading:
                const Icon(Icons.star_border, size: 20.0, color: Colors.white),
            title: const Text("收藏夹"),
            textColor: Colors.white,
            dense: true,
          ),
          ListTile(
            onTap: () {},
            leading:
                const Icon(Icons.settings, size: 20.0, color: Colors.white),
            title: const Text("设置"),
            textColor: Colors.white,
            dense: true,
          ),
        ],
      ),
    );
  }
}

更多关于Flutter侧边菜单动画插件anim_side_menu的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

wuwangju 1楼

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

anim_side_menu 是一个用于在 Flutter 应用中创建动画侧边菜单的插件。它能帮助你轻松地实现平滑的侧边菜单打开和关闭动画效果。

安装

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

dependencies:
  flutter:
    sdk: flutter
  anim_side_menu: ^1.0.0  # 使用最新版本

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

基本用法

以下是一个简单的示例，展示了如何使用 anim_side_menu 插件来创建一个带有动画效果的侧边菜单：

import 'package:flutter/material.dart';
import 'package:anim_side_menu/anim_side_menu.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: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  bool _isMenuOpen = false;

  void _toggleMenu() {
    setState(() {
      _isMenuOpen = !_isMenuOpen;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Anim Side Menu Demo'),
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: _toggleMenu,
        ),
      ),
      body: AnimSideMenu(
        isMenuOpen: _isMenuOpen,
        menu: Container(
          width: 200,
          color: Colors.blue,
          child: ListView(
            children: <Widget>[
              ListTile(
                title: Text('Item 1'),
                onTap: () {
                  // 处理点击事件
                  _toggleMenu();
                },
              ),
              ListTile(
                title: Text('Item 2'),
                onTap: () {
                  // 处理点击事件
                  _toggleMenu();
                },
              ),
              ListTile(
                title: Text('Item 3'),
                onTap: () {
                  // 处理点击事件
                  _toggleMenu();
                },
              ),
            ],
          ),
        ),
        child: Center(
          child: Text('Main Content'),
        ),
      ),
    );
  }
}