如何创建具有良好动画颤动的动态浮动动作按钮的底部导航栏？答案

【问题标题】：how to create bottom nav bar with dynamic floating action button with good animation flutter?如何创建具有良好动画颤动的动态浮动动作按钮的底部导航栏？
【发布时间】：2021-12-01 21:37:28
【问题描述】：

我想创建一个自定义底部导航栏，其中包含更改后的浮动操作按钮，如下所示：

当改变标签时，它会是这样的，并且动画很轻松：

关于我们如何构建它的任何建议。

【问题讨论】：

标签： flutter floating-action-button flutter-bottomnavigation

【解决方案1】：

你可以使用这个设计

ff_navigation_bar 包here

motion_tab_bar包here

fancy_bottom_navigation here 希望对您有所帮助。

更多底部导航栏的包请去here

【讨论】：

非常感谢分享插件

【解决方案2】：

你可以试试Convex_bottom_bar

这里所有bottom_nav_bar 包


import 'package:convex_bottom_bar/convex_bottom_bar.dart';
import 'package:flutter/material.dart';


void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  State createState() => _State();
}

class _State extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: "/",
      routes: {
        "/": (_) => HelloConvexAppBar(),
        "/bar": (BuildContext context) => Container(),
        "/custom": (BuildContext context) => Container(),
        "/fab": (BuildContext context) => Container(),
      },
    );
  }
}

class HelloConvexAppBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Hello ConvexAppBar')),
      body: Center(
          child: TextButton(
            child: Text('Click to show full example'),
            onPressed: () => Navigator.of(context).pushNamed('/bar'),
          )),
      bottomNavigationBar: ConvexAppBar(
        style: TabStyle.react,
        items: [
          TabItem(icon: Icons.list),
          TabItem(icon: Icons.calendar_today),
          TabItem(icon: Icons.assessment),
        ],
        initialActiveIndex: 1,
        onTap: (int i) => print('click index=$i'),
      ),
    );
  }
}

【讨论】：

感谢分享