Flutter 页面托动按钮 DraggableFloatingActionButton

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

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

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

---

本文章实现的效果图

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 的应用，小编已总结在书中

• 手机点击查看 # 电脑点击查看
  

---

• 手机点击查看 # 电脑点击查看

---