Flutter animated curved bottom bars, choice to make


Bored with regular old looking navigation bar at the bottom ? Flutter has many alternatives, you don’t have to stay with same UI for all time. I have two good looking curved navigation bar today curved navigation and convex bottom bar.

Curved Bottom Navigation in Flutter

Curved Bottom Navigation in Flutter

A Flutter Favorite, convex Bottom AppBar is my first choice, it look neater than the curved_navigation bar. For both all you need neat looking Icons and few lines of code to handle the clicks.

Curved Navigation

Curved Navigation in Flutter

In the curved you may struggle with button click , have to click the right place ( while using it in a emulator) , while for Convex stay cool, just wrote down the event handle on OnTap.

For convex lovers I suggest to use the following widget function, it may help you to use it to the multiple window

_bottomNav(BuildContext context, {int actIndex = 2}) {
return ConvexAppBar(
items: [
TabItem(icon: Icons.home, title: 'Home'),
TabItem(icon: Icons.map, title: 'History'),
TabItem(icon: Icons.add, title: 'Add'),
TabItem(icon: Icons.message, title: 'Future'),
TabItem(icon: Icons.people, title: 'Finished'),
],
initialActiveIndex: actIndex, //optional, default as 0
onTap: (int i) {
switch (i) {
case 2:
Get.to(NewKart());
 
break;
default:
{
Get.to(LiveCart());
}
}
},
);
}

In case you mis Git.to() here it is

  • Use ‘Get’ navigation manager to switch route /page in Flutter

    Heard about Get , a light weight Flutter framework for developing apps with a smart Navigation manager. So what’s make Get Special, Is Flutter has Navigator to do what you want to do ? Yeh. But Get is smart and fast and it is one of the top package on pub.dev

    How to use Get

    Go to pubspec.yaml file add it as dependecies and also add an import statement to the top of your .dart file.

    dependencies:
      flutter:
        sdk: flutter
      get:
    
    
    import 'package:get/get.dart';
    

    Get can be used to move to another widget page/route or simply calling Get.to . A prerequisite for this is a small change in main, replace the MeterialApp constructor with GetMaterialApp

    void main() async {
       runApp(new GetMaterialApp(
        home: new MyApp(),
      ));
    }
    

    Suppose I have widget screens like ProductPage, I want to replace conventional flutter way of calling the push with Get.

    Navigator.push(context,
         new MaterialPageRoute(builder: (context) => (Product())));

    can replace with

    Get.to(Product());
    

    Get can be useful on various occasions, I save it for another post.

Then you can use it as

bottomNavigationBar: _bottomNav(context),

in a Scaffold widget.

That’s it.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.