Aim : Create BottomNavigationBar, TabBar and Navigation Drawer in flutter.
BottomNavigationBar :
Code:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return BottomNavigation();
}
}
class BottomNavigation extends State<MyHomePage> {
var selectedItem = 0;
List itemList = [Text('Home'), Text('Bookmark'), Text('Settings')];
void updateItem(int value) {
setState(() {
selectedItem = value;
});
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
BottomNavigationBarItem(
icon: Icon(Icons.bookmark), label: 'Bookmark'),
BottomNavigationBarItem(
icon: Icon(Icons.settings), label: 'Settings'),
],
currentIndex: selectedItem,
onTap: updateItem,
),
body: Center(child: itemList[selectedItem]),
);
}
}
TabBar:
Code :
Main.dart
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return BottomNavigation();
}
}
class BottomNavigation extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: Text('Welcome'),
bottom: TabBar(
tabs: [
Tab(
icon: Icon(Icons.home),
text: 'Home',
),
Tab(
icon: Icon(Icons.bookmark),
text: 'Bookmark',
),
Tab(
icon: Icon(Icons.call),
text: 'call',
),
],
),
),
body: TabBarView(children: [
Center(child: Text('Home')),
Center(child: Text('Bookmark')),
Center(child: Text('Call')),
]),
));
}
}
Navigation drawer :
Code :
MyHeaderDrawer.dart
import 'package:flutter/material.dart';
class MyHeaderDrawer extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return _MyHeaderDrawer();
}
}
class _MyHeaderDrawer extends State<MyHeaderDrawer> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
margin: EdgeInsets.all(4),
child: Center(
child: Column(children: [
Image.network(
'https://www.google.com/imgres?q=business%20manager&imgurl=https%3A%2F%2Fsundancecollege.com%2Fwp-content%2Fuploads%2F2024%2F09%2Fprofessional-business-manager-working-on-project-with-laptop-768x399.webp&imgrefurl=https%3A%2F%2Fsundancecollege.com%2Fblog%2Fwhat-does-a-business-manager-do%2F&docid=zDeJJw83fwU0IM&tbnid=l-Mm_gwgYI_csM&vet=12ahUKEwjWucrkjtSLAxWtcGwGHZgHHIAQM3oECBkQAA..i&w=768&h=399&hcb=2&ved=2ahUKEwjWucrkjtSLAxWtcGwGHZgHHIAQM3oECBkQAA'),
Text('user name'),
Text('user@gmail.com')
]),
));
}
}
Main.dart:
import 'dart:async';
import 'dart:html';
import 'MyHeaderDrawer.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return _HomePage();
}
}
class _HomePage extends State<MyHomePage> {
var currentPage = DrawerSection.home;
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('welcome'),
),
body: Center(
child: Text('hello'),
),
drawer: Drawer(
child: SingleChildScrollView(
child: Column(children: [MyHeaderDrawer(), MyDrawerList()]),
)),
);
}
Widget MyDrawerList() {
return Container(
child: Column(children: [
menuItem(1, "home", Icons.home,
currentPage == DrawerSection.home ? true : false),
menuItem(2, "contacts", Icons.contact_page,
currentPage == DrawerSection.contacts ? true : false),
menuItem(3, "notifications", Icons.notifications,
currentPage == DrawerSection.notifications ? true : false),
menuItem(4, "settings", Icons.settings,
currentPage == DrawerSection.settings ? true : false),
]),
);
}
Widget menuItem(int id, String title, IconData icon, bool selected) {
return Material(
color: selected ? Colors.grey[300] : Colors.transparent,
child: InkWell(
onTap: () {
Navigator.pop(context);
setState(() {
if (id == 1) {
currentPage = DrawerSection.home;
} else if (id == 2) {
currentPage = DrawerSection.contacts;
} else if (id == 3) {
currentPage = DrawerSection.notifications;
} else if (id == 4) {
currentPage = DrawerSection.settings;
}
});
},
child: Row(children: [
Icon(
icon,
color: Colors.black,
),
Text(title),
]),
),
);
}
}
enum DrawerSection {
home,
contacts,
notifications,
settings,
}
Comments
Post a Comment