Flutter 页面托动按钮 DraggableFloatingActionButton

曾经终败给现在 2023-10-07 18:19 36阅读 0赞

> 志在巅峰的攀登者，不会陶醉在沿途的某个脚印之中，在码农的世界里，优美的应用体验，来源于程序员对细节的处理以及自我要求的境界，年轻人也是忙忙碌碌的码农中一员，每天、每周，都会留下一些脚印，就是这些创作的内容，有一种执着，就是不知为什么，如果你迷茫，不妨来瞅瞅码农的轨迹。

如果你有兴趣 你可以关注一下公众号 biglead 来获取最新的学习资料。

*  [Flutter 从入门 到精通系列文章在这里][Flutter _]
 *  [当然也必需是要有源码的 在这里了][Link 1]
 *  [github 有点慢 不妨来看看码云的源码吧][github _]
 *  [系列学习教程在这里][Link 2]

--------------------

本文章实现的效果图  
![在这里插入图片描述][e14eaee50d3c48b89a72deda2c485846.gif]

##### 1 第一步添加插件依赖 #####

shake_animation_widget: ^3.0.3

###### 2 在代码中使用 ######

class Exam223HomePage extends StatefulWidget {
        
      const Exam223HomePage({
        Key? key}) : super(key: key);
    
      @override
      State<Exam223HomePage> createState() => _Exam223HomePageState();
    }
    
    
    
    class _Exam223HomePageState extends State<Exam223HomePage> {
        
      //Stack使用的Key
      final GlobalKey _parentKey = GlobalKey();
    
      @override
      Widget build(BuildContext context) {
        
        return Scaffold(
          body: SizedBox(
            width: double.infinity,
            height: double.infinity,
            child: Stack(
              key: _parentKey,
              children: [
                Container(color: Colors.blueGrey),
    
                DraggableFloatingActionButton(
                  child: Container(
                    width: 60,
                    height: 60,
                    decoration: const ShapeDecoration(
                      shape: CircleBorder(),
                      color: Colors.white,
                    ),
                    child: const Icon(Icons.add),
                  ),
                  initialOffset: const Offset(120, 70),
                  parentKey: _parentKey,
                  onPressed: () {
        },
                ),
              ],
            ),
          ),
        );
      }
    }

如果你迷茫 不妨来此 每日分享 先积累着再说  
更多Widget 的应用，小编已总结在书中

*  [手机点击查看][Link 3] \# [电脑点击查看][Link 4]  
    ![请添加图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16]

--------------------

*  [手机点击查看][Link 5] \# [电脑点击查看][Link 6]

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

--------------------

[Flutter _]: https://blog.csdn.net/zl18603543572/article/details/93532582
[Link 1]: https://gitee.com/android.long/flutter-ho/blob/279b5185f50a3379c71a74fc6c51b421f59c0354/lib/src/pages/demo/demo18/demo_DateRangPage.dart
[github _]: https://github.com/zhaolongs
[Link 2]: https://study.163.com/instructor/1021406098.htm?_trace_c_p_k2_=09d88ef1f37645abadcc2b58620d4b00
[e14eaee50d3c48b89a72deda2c485846.gif]: https://img-blog.csdnimg.cn/e14eaee50d3c48b89a72deda2c485846.gif
[Link 3]: https://m.tb.cn/h.f6IsZcl?sm=b5555a
[Link 4]: https://detail.tmall.com/item.htm?id=658886049139
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/ed9ecf4aacc84e5cb17d5b486e431083.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5pep6LW355qE5bm06L275Lq6,size_20,color_FFFFFF,t_70,g_se,x_16
[Link 5]: https://item.m.jd.com/product/10040957873690.html?&utm_source=iosapp&utm_medium=appshare&utm_campaign=t_335139774&utm_term=CopyURL&ad_od=share&utm_user=plusmember&gx=RnFjxjUIbWGNztQUp4J3XrJgfXzlaNZ0
[Link 6]: https://item.jd.com/13009851.html
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: https://img-blog.csdnimg.cn/0b0016200df2484aa2029c1b20224fee.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pep6LW355qE5bm06L275Lq6,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center