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

Question

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

当更改选项卡时，它会是这样的，带有漂亮而轻松的动画：

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

Answer 1

您可以用于此设计

ff_navigation_bar包在这里

motion_tab_bar包在这里

这里的fancy_bottom_navigation希望对你有帮助。

有关底部导航栏的更多包，请转到此处

Answer 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'),
      ),
    );
  }
}