flutter向上动画弹出菜单效果

最新推荐文章于 2024-08-07 16:26:46 发布

早起的年轻人

最新推荐文章于 2024-08-07 16:26:46 发布

阅读量3.5k

点赞数 3

分类专栏： Flutter项目开发全套教程文章标签： flutter悬浮按钮 flutterFAB flutter动画菜单

本文链接：https://blog.csdn.net/zl18603543572/article/details/106437662

版权

本文介绍如何在Flutter中创建一个向上动画弹出的菜单效果。通过点击悬浮按钮，子菜单向上动画展开，再次点击时，子菜单向下回弹。详细步骤包括构建页面主体和自定义RoteFloatingButton组件，提供了相关代码示例。

摘要由CSDN通过智能技术生成

题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精。

重要消息【视频教程感兴趣的伙伴可以瞅瞅】

本文章最后的效果如下：
在这里插入图片描述

如上图的效果，当点击菜单按钮时，子菜单向上动画弹出，然后当点击弹出的子菜单时，所有的子菜单再依次向下回弹回去。

1 第一步构建页面的主体，代码如下：

///向上弹出菜单页主体页面
class FloatingActionButton9Page extends StatefulWidget {
   
  @override
  _PageState createState() => _PageState();
}

class _PageState extends State<FloatingActionButton9Page> {
   
  @override
  Widget build(BuildContext context) {
   
    ///定义菜单按钮选项
    List<Icon> iconList = [
      Icon(Icons.add),
      Icon(Icons.save),
      Icon(Icons.share),
    ];
    return Scaffold(
      appBar: AppBar(
        title: Text("悬浮按钮"),
      ),
      backgroundColor: Colors.white,
      ///填充屏幕空间
      body: ConstrainedBox(constraints: BoxConstraints.expand(), child: Stack(
        children: [
          ///向上弹出的按钮组件
          RoteFloatingButton(
            ///子菜单按钮选项
              iconList:iconList,
            子菜单按钮的点击事件回调
            clickCallback: (int index){
   
                print(<