CODEWITHSUNDEEP
flutterfloating-action-buttonflutter-bottomnavigation
ahmed khattab
ahmed khattab

Reputation: 2501

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

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.

Upvotes: 0

Views: 771

Answers (2)

Jahidul Islam
Jahidul Islam

Reputation: 12575

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

Upvotes: 1

Ravindra S. Patil
Ravindra S. Patil

Reputation: 14785

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

Upvotes: 1

Related Questions