How To Create Curved Navigation Bar With Different Design In Flutter App

admin_img Posted By Bajarangi soft , Posted On 23-09-2020

I tried curved top edge bottom navigation Bar notch

How to create curved Navigation Bar with different design and different shap in flutter app

Lets start with creating a new flutter project in Android Studio by going to File => New => New Flutter Project.In order to download any custom package in our flutter project, all we need to do is to specify the package name into pubspec.yaml file.
Step 1
we will add curved_navigation_bar: ^0.3.3 dependency name to our pubspec.yaml file as shown below:

dependencies:
  flutter:
    sdk: flutter
  curved_navigation_bar: ^0.3.3


Step 2
You can install packages from the command line: with Flutter:

flutter pub get


Step 3
Now after adding the dependency and downloading, in order to use any package, we must import it before using it. So, in our case, we will import it in our main.dart file as:
import 'package:curved_navigation_bar/curved_navigation_bar.dart';

Step 4
 Now, We will create the Stateful Widget and inside the Scaffold widget we will add the following code:
You can add this curved_navigation_bar WIth different design and diffrent shap code :
bottomNavigationBar: BottomAppBar(
    elevation: 0.3,
    notchMargin: 5,
    clipBehavior: Clip.antiAlias,
    color: Color(0xff1c1f26),
    shape: AutomaticNotchedShape(
        RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(20), topRight: Radius.circular(25))),
        RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(25)))),
    child: SizedBox(
      width: double.infinity,
      height: 60,
    )),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(25))),
  onPressed: () {},
  child: Icon(Icons.favorite),
),


Complete Code  curved_navigation_bar WIth different design and diffrent shap in flutter
Main.dart
import 'package:flutter/material.dart';
import 'package:curved_navigation_bar/curved_navigation_bar.dart';


void main() =>
    runApp(MyApp());



class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowMaterialGrid: false,
        title: "Curved Navigation Bar",
        debugShowCheckedModeBanner: false,
        home: MyHomePage());
  }
}
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() =>
      _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('Notch Shape Navigationbar', style: TextStyle(color: Colors.white),),
        backgroundColor: Colors.black,
      ),
      body: Center(
        child: Text('Welcome TO Bajarangisoft!'),
      ),
      bottomNavigationBar: BottomAppBar(
          elevation: 0.3,
          notchMargin: 5,
          clipBehavior: Clip.antiAlias,
          color: Color(0xff1c1f26),
          shape: AutomaticNotchedShape(
              RoundedRectangleBorder(
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(20), topRight: Radius.circular(25))),
              RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(25)))),
          child: SizedBox(
            width: double.infinity,
            height: 60,
          )),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(25))),
        onPressed: () {},
        child: Icon(Icons.favorite),
      ),
    );
  }
}

Related Post