Hey Friends today discuss very interesting Topic of Flutter or Android so topic is
How to create bottom Navigation in flutter or Android || Programmer Hubs for Just Programmer
firstly i want to be create a project with command so command is flutter create project_Name after that folder is created so the address.
after that open the main.dart
and type this code here
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
debugShowCheckedModeBanner: false,
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int _currentIndex = 0;
Widget callpage(int currentIndex) {
switch (currentIndex) {
case 0:
return HomePageforuser();
case 1:
return CartPage();
case 2:
return OrderPage();
case 3:
return ProfilePage();
break;
default:
return HomePageforuser();
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: appBar(context),
backgroundColor: Colors.transparent,
elevation: 0.0,
brightness: Brightness.light,
),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
iconSize: 30,
selectedItemColor: Colors.pink,
backgroundColor: Colors.blue,
currentIndex: _currentIndex,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text("Home"),
backgroundColor: Colors.yellow,
),
BottomNavigationBarItem(
icon: Icon(Icons.shopping_cart), title: Text("Cart")),
BottomNavigationBarItem(
icon: Icon(Icons.file_upload), title: Text("Order")),
BottomNavigationBarItem(
icon: Icon(Icons.person), title: Text("Profile"))
],
onTap: (index) {
_currentIndex = index;
setState(() {});
},
),
body: callpage(_currentIndex),
);
}
}
Result is Here...
0 Comments
thanks for your suggestion and improving quality of the content