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
flutter pub get
import 'package:curved_navigation_bar/curved_navigation_bar.dart';
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),
),
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),
),
);
}
}