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彈出菜單