Custom Shaped Bottom Navigation Bar with Flutter

Overview

• Tutorial on creating a custom-shaped bottom navigation bar in Flutter using Custom Paint
• Focuses on complex shapes and how to align elements, including a floating action button

Initial Setup

• Flutter app with MyHomePage widget
• MyHomePage is a StatefulWidget
• Uses a Scaffold widget to structure the app
  • body: Container
  • backgroundColor: Colors.white

Steps for Implementation

Create the Base App

1. Remove Container:

   • Replace it with a Stack widget
   • Position navigation bar at the bottom
   • Display app contents behind the navigation bar

2. Add Children to Stack:

   • Positioned widget for bottom and left: 0
   • Container as child
   • Use MediaQuery to get screen size and set Container width to size.width and height to 80

3. Add Background Color:

   • Temporary color to visualize container: Colors.white

Custom Paint Widget

1. Define custom paint:

   • Add CustomPaint widget
   • Set size: Size(size.width, 80)
   • Create CustomPainter

2. Create CustomPainter Class:

   • BNBCustomPainter extends CustomPainter class
   • Override paint and shouldRepaint functions
   • shouldRepaint returns false
   • paint contains drawing logic

Drawing with CustomPainter

1. Create Paint Object:

   • Use Paint() with color: Colors.white
   • Set Style to PaintingStyle.fill

2. Quadratic Bezier Curves:

   • Concept: P1 as a reference point to create an arc from P0 to P2
   • Extensively used for path creation in the navigation bar
   • Illustration used points 0, 2, 4, 6, 8, 10 and reference points for bezier curves

3. Path Creation Steps:

   • moveTo (0, 20)
   • Draw curves using quadraticBezierTo:
     • 0 to 0.35width, 0 with 0.2width, 0 as reference
     • 0.35width, 0 to 0.4width, 20 with 0.4*width, 0 as reference
     • Additional curves and arcs as in the illustration
   • Close path with path.close()
   • Draw the path and add shadow if needed*

Finalizing the Bottom Nav Bar

1. FloatingActionButton:

   • Centered in the BottomNavigationBar using Center widget
   • Adjusted height with heightFactor: 0.6
   • FloatingActionButton properties
     • backgroundColor: Colors.orange
     • Icon: Icons.shopping_basket
   • Set elevation: 0.1

2. Add Icons to Navigation Bar:

   • Use Row within another Container
   • Align icons horizontally
   • Add IconButtons for each navigation item
   • Adjust position with mainAxisAlignemnt: MainAxisAlignment.spaceEvenly
   • Add a spacer Container for gap between icons

Summary

• You learned how to create a custom bottom navigation bar with custom shapes using Custom Paint in Flutter
• Utilized quadratic bezier curves for creating paths
• Aligned floating action button and icons correctly
• Encouraged to like, subscribe, and support the creator