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

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

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

side_menu_animation 是一个用于Flutter的侧边菜单动画插件,它提供了可定制的UI,并且灵感来源于Yalantis库(适用于Android/iOS)。以下是该插件的基本介绍和使用方法。

功能特点

  • 可选参数:点击外部区域关闭菜单
  • 可选参数:更改遮罩颜色 (scrimColor)
  • 自定义菜单项选中时的颜色
  • 自定义菜单项未选中时的颜色
  • 自定义侧边菜单宽度
  • 自定义动画持续时间
  • 从左侧或右侧显示菜单

示例效果

标准侧边菜单动画 支持拖动手势的侧边菜单动画
标准侧边菜单动画 支持拖动手势的侧边菜单动画

快速开始

添加依赖

在您的pubspec.yaml文件中添加如下依赖:

dependencies:
  side_menu_animation: "^0.0.1"

然后运行flutter packages upgrade或者更新您的包管理器。

导入包

在您需要使用的Dart文件中导入此包:

import 'package:side_menu_animation/side_menu_animation.dart';

使用示例

基本使用 - SideMenuScreen

下面是一个基本的SideMenuScreen实现示例:

class SideMenuScreen extends StatelessWidget {
  final _index = ValueNotifier<int>(1);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SideMenuAnimation(
        appBarBuilder: (showMenu) => AppBar(
          leading: IconButton(icon: Icon(Icons.menu, color: Colors.black), onPressed: showMenu),
          backgroundColor: Theme.of(context).scaffoldBackgroundColor,
          elevation: 0,
          brightness: Brightness.light,
          centerTitle: true,
          title: ValueListenableBuilder<int>(
            valueListenable: _index,
            builder: (_, value, __) => Text(value.toString(), style: TextStyle(color: Colors.black)),
          ),
        ),
        views: [YourCustomViews1Here(), YourCustomViews2Here()],
        items: [MyCustomItem1Here(), MyCustomItem2Here()],
        selectedColor: Color(0xFFFF595E),
        unselectedColor: Color(0xFF1F2041),
        tapOutsideToDismiss: true,
        scrimColor: Colors.black45,
        onItemSelected: (value) {
          if (value > 0 && value != _index.value) _index.value = value;
        },
      ),
    );
  }
}

使用构建器 - SideMenuBuilderScreen

如果您希望更灵活地控制内容,可以使用SideMenuBuilder

class SideMenuBuilderScreen extends StatelessWidget {
  final _index = ValueNotifier<int>(1);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SideMenuAnimation.builder(
        builder: (showMenu) {
          return Scaffold(
            appBar: AppBar(
              leading: IconButton(icon: Icon(Icons.menu, color: Colors.black), onPressed: showMenu),
              backgroundColor: Theme.of(context).scaffoldBackgroundColor,
              elevation: 0,
              brightness: Brightness.light,
              centerTitle: true,
              title: ValueListenableBuilder<int>(
                valueListenable: _index,
                builder: (_, value, __) => Text(_index.value.toString(), style: TextStyle(color: Colors.black)),
              ),
            ),
            body: ValueListenableBuilder<int>(
              valueListenable: _index,
              builder: (_, value, __) => IndexedStack(
                index: value - 1,
                children: [YourCustomViews1Here(), YourCustomViews2Here()],
              ),
            ),
          );
        },
        items: [MyCustomItem1Here(), MyCustomItem2Here()],
        selectedColor: Color(0xFFFF595E),
        unselectedColor: Color(0xFF1F2041),
        onItemSelected: (value) {
          if (value > 0 && value != _index.value) _index.value = value;
        },
      ),
    );
  }
}

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

1 回复

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


当然,下面是一个关于如何使用 side_menu_animation 插件在 Flutter 中实现侧边菜单动画的示例代码。这个插件可以帮助你创建带有动画效果的侧边菜单。

首先,你需要在你的 pubspec.yaml 文件中添加 side_menu_animation 依赖:

dependencies:
  flutter:
    sdk: flutter
  side_menu_animation: ^x.y.z  # 请将 x.y.z 替换为最新的版本号

然后运行 flutter pub get 来获取依赖。

接下来,你可以在你的 Flutter 应用中使用这个插件。以下是一个简单的示例,展示如何实现一个带有动画效果的侧边菜单:

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

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

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

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

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Offset> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 300),
      vsync: this,
    )..addListener(() {
        setState(() {});
      });

    _animation = Tween<Offset>(
      begin: Offset.zero,
      end: const Offset(-0.7, 0),
    ).animate(CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
    ));
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _toggleMenu() {
    if (_controller.isDismissed) {
      _controller.forward();
    } else {
      _controller.reverse();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Side Menu Animation Demo'),
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: _toggleMenu,
        ),
      ),
      body: Stack(
        children: <Widget>[
          // Main content
          Container(
            color: Colors.white,
          ),
          // Animated side menu
          SlideTransition(
            position: _animation,
            child: Material(
              color: Colors.grey[900].withOpacity(0.8),
              child: SafeArea(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.only(left: 16.0, top: 16.0),
                      child: Text(
                        'Side Menu',
                        style: TextStyle(color: Colors.white, fontSize: 24),
                      ),
                    ),
                    ListTile(
                      leading: Icon(Icons.home),
                      title: Text('Home'),
                      onTap: () {
                        _toggleMenu();
                        // Handle home tap
                      },
                    ),
                    ListTile(
                      leading: Icon(Icons.settings),
                      title: Text('Settings'),
                      onTap: () {
                        _toggleMenu();
                        // Handle settings tap
                      },
                    ),
                    // Add more menu items as needed
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

在这个示例中,我们创建了一个简单的 Flutter 应用,其中包含一个带有侧边菜单的 Scaffold。侧边菜单通过 SlideTransitionTween<Offset> 动画来实现。当用户点击菜单按钮时,_toggleMenu 方法会被调用,从而控制动画的前进和后退。

请注意,这个示例没有使用 side_menu_animation 插件的特定功能,因为这个插件的 API 可能会根据你的需求有所不同。不过,上面的代码展示了如何在 Flutter 中实现基本的侧边菜单动画效果。如果你需要 side_menu_animation 插件的特定功能,请参考该插件的官方文档和示例代码,以便更好地集成到你的项目中。

回到顶部