Flutter 底部向上弹出的动画按钮

题记

—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，优美的应用体验 来自于细节的处理，更源自于码农的自我要求与努力

Flutter是谷歌推出的最新的移动开发框架。

【x1】微信公众号的每日提醒 随时随记 每日积累 随心而过 文章底部扫码关注

【x2】各种系列的视频教程 免费开源 关注 你不会迷路

【x3】系列文章 百万 Demo 随时 复制粘贴 使用

【x4】一目了然的源码

【x5】简短的视频不一样的体验

本文章实现Demo运行效果 如下：

小编已将这个效果封装成了一个组件，地址在这里，大家直接使用就可以。

首先是添加依赖

dependencies:
  shake_animation_widget: ^2.0.0

然后是加载依赖

flutter pub get

最后就是在使用的文件中导包

import 'package:shake_animation_widget/shake_animation_widget.dart';

然后 上图的 Demo 效果 实现下使用层叠布局来实现：

class HomePage extends StatefulWidget {
  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<HomePage> {
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("测试"),
      ),
      body: Container(
        //填充
        constraints: BoxConstraints.expand(),
        //层叠布局
        child: Stack(
          children: [
            
            Positioned(
              right: 33,
              bottom: 33,
              //悬浮按钮
              child: RoteFloatingButton(
                //菜单图标组
                iconList: [
                  Icon(Icons.add),
                  Icon(Icons.message),
                  Icon(Icons.aspect_ratio),
                ],
                //点击事件回调
                clickCallback: (int index){

                },
              ),
            ),

          ],
        ),
      ),
    );
  }

以小编的性格，要实现百万Demo随时复制粘贴肯定是需要源码的完整源码在这里

以小编的性格，肯定是要录制一套视频的，点击这里查看详情

有兴趣 你可以关注一下 西瓜视频 — 早起的年轻人