Home > Mobile >  how to create bottom nav bar with dynamic floating action button with good animation flutter?
how to create bottom nav bar with dynamic floating action button with good animation flutter?

Time:10-14

I would like to create a custom bottom nav bar with a changed floating action button like this:

enter image description here

and when change tab it will be like this with nice and ease animation:

enter image description here

any suggestions how we can built it.

CodePudding user response:

You can use for this design

ff_navigation_bar package here

motion_tab_bar package here

fancy_bottom_navigation here hope its helpful to you.

for more packages for bottom navigation bar go here

CodePudding user response:

You can try with the Convex_bottom_bar

And here all bottom_nav_bar package


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