关于java:Flutter-底部向上动画弹出菜单

在挪动利用开发中，咱们常常会遇到弹出菜单的开发需要，对于下拉菜单能够参考 Flutter 自定义下拉菜单，而如果是向上的弹出菜单或者更加负责的扇形菜单，则须要开发者进行自定义开发。

下面是自定义向上弹出菜单的示例，如果要实现下面的成果，须要开发者对动画（AnimationController、Animation）和 Flow 组件可能很纯熟的进行应用。，为了不便大家疾速的进行开发，当初咱们将它封装城一个组件，应用前须要增加如下插件依赖代码。

shake_animation_widget: ^2.1.2

而后，再增加如下测试代码。

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){},),
            ),

          ],
        ),
      ),
    );
  }

除了下面这种线性的菜单外，扇形菜单或者圆形菜单也是比拟罕用的，例如上面是扇形菜单的示例代码。

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

class RootPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: HomePage(),
    );
  }
}

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: [buildContainer(),
          ],
        ),
      ),
    );
  }

  Container buildContainer() {
    return Container(
      child: BottomRoundFlowMenu(
        iconList: [
          Icon(
            Icons.add_circle_outline,
            color: Colors.white,
          ),
          Icon(Icons.directions_car, color: Colors.white),
          Icon(Icons.camera, color: Colors.white),
          Icon(Icons.local_shipping, color: Colors.white),
        ],
        iconBackgroundColorList: [
          Colors.deepOrangeAccent,
          Colors.deepPurple,
          Colors.blueGrey,
          Colors.blueAccent,
        ],
        // 点击事件回调
        clickCallBack: (int index) {},),
    );
  }
}

能够发现，配合动画组件和 Flow 组件，咱们能够开发出很多简单的成果。

参考：Flow 弹出菜单