Design Homepage in Flutter
Lets see how to design Homepage in flutter which has appbar, bottomnavigatonbar and body which changes the content on selection of bottom menu. The output is added below for preview.
So here comes the play of Scaffold which helps us in creating the appbar and bottomNavigationBar. As you know the Scaffold helps us in designing some predefined material design such as navigationBar, bottomNavigationBar and appbar etc.
so lets create a new DashBaordPage.dart and inside the file our first step is to import the flutter material.darta as seen below
import 'package:flutter/material.dart';so the next step is to create a class which extends StatefulWidget
class DashBaordPage extends StatefulWidget {
const DashBaordPage({Key? key}) : super(key: key);
@override
State<DashBaordPage> createState() => _DashBaordPageState();
}
class _DashBaordPageState extends State<DashBaordPage> {
@override
Widget build(BuildContext context) {
return Scaffold()
}Next step is to call appbar inside Scaffhold
appBar: AppBar(
elevation: 5,
title: const Text("DashBoard",
style: TextStyle(
fontStyle: FontStyle.italic,
fontSize: 20,
color: Colors.white))
)So the elevation define the shade below the appbar as seen in image
And we added the TextStyle for the font.Next we create bottomNavigationBar which has four menus
bottomNavigationBar: BottomNavigationBar(
currentIndex: _selectedIndex,
elevation: 5,
backgroundColor: Colors.blue,
onTap: (index) {
setState(() {
_selectedIndex = index;
});
},
selectedLabelStyle: TextStyle(fontStyle: FontStyle.italic,
fontWeight: FontWeight.normal,
fontSize: 12),
items: [
BottomNavigationBarItem(icon: Icon(Icons.home),
label: "HOME",
backgroundColor: Colors.green,
),
BottomNavigationBarItem(icon: Icon(Icons.search),
label: "SEARCH",
backgroundColor: Colors.blue,
),
BottomNavigationBarItem(icon: Icon(Icons.contact_mail),
label: "INBOX",
backgroundColor: Colors.orange,
),
BottomNavigationBarItem(icon: Icon(Icons.person),
label: "PROFILE",
backgroundColor: Colors.red,
),
],
),As you see above we have BottomNavigationBar which has items of array
BottomNavigationBarItem(icon: Icon(Icons.home),
label: "HOME",
backgroundColor: Colors.green,
)We add each single item like seen above label holds the text and backgroundColor changes when user select on particular menu and icon contains the image of the menu
In bottomNavigationBar we have currentIndex which make the menu clickable. so we created an
int _selectedIndex = 0;and assigned to currentIndex as seen below
bottomNavigationBar: BottomNavigationBar(
currentIndex: _selectedIndex,And elevation: 5, for the shade of the menu line . And we have onTap which works on section of menu where we update the index
onTap: (index) {
setState(() {
_selectedIndex = index;
});
},If you want to change the selected text design we can use selectedLabelStyle
selectedLabelStyle: TextStyle(fontStyle: FontStyle.italic,
fontWeight: FontWeight.normal,
fontSize: 12),So on selection of menu we need to show particular content as an body so we create an list of widgets to call on specific click
List<Widget> tabs = [
Center(child: Text("Welcome To Home Page", style: TextStyle(fontStyle: FontStyle.italic, fontSize: 30))),
Center(child: Text("Welcome To Search Page", style: TextStyle(fontStyle: FontStyle.italic, fontSize: 30))),
Center(child: Text("Welcome To Inbox Page", style: TextStyle(fontStyle: FontStyle.italic, fontSize: 30))),
Center(child: Text("Welcome To Profile Page", style: TextStyle(fontStyle: FontStyle.italic, fontSize: 30)))
];And call it on Scaffold body as below
body: Center(
child: tabs[_selectedIndex],
)Lets see the complete code for the Home page you can copy this entire code and call it from main.dart file.I have attached both pages main and DashBaordPage dart file
— — — — — — — — — — — — -main.dart — — — — — — — — — — — —
import 'package:flutter/material.dart';
import 'DashBaordPage.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(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: const DashBaordPage(),
);
}
}— — — — — — — — — — — — -DashBaordPage .dart— — — — — — — — — — — —
import 'package:flutter/material.dart';
class DashBaordPage extends StatefulWidget {
const DashBaordPage({Key? key}) : super(key: key);
@override
State<DashBaordPage> createState() => _DashBaordPageState();
}
class _DashBaordPageState extends State<DashBaordPage> {
int _selectedIndex = 0;
List<Widget> tabs = [
Center(child: Text("Welcome To Home Page", style: TextStyle(fontStyle: FontStyle.italic, fontSize: 30))),
Center(child: Text("Welcome To Search Page", style: TextStyle(fontStyle: FontStyle.italic, fontSize: 30))),
Center(child: Text("Welcome To Inbox Page", style: TextStyle(fontStyle: FontStyle.italic, fontSize: 30))),
Center(child: Text("Welcome To Profile Page", style: TextStyle(fontStyle: FontStyle.italic, fontSize: 30)))
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 5,
title: const Text("DashBoard",
style: TextStyle(
fontStyle: FontStyle.italic,
fontSize: 20,
color: Colors.white))
),
body: Center(
child: tabs[_selectedIndex],
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _selectedIndex,
elevation: 5,
backgroundColor: Colors.blue,
onTap: (index) {
setState(() {
_selectedIndex = index;
});
},
selectedLabelStyle: TextStyle(fontStyle: FontStyle.italic,
fontWeight: FontWeight.normal,
fontSize: 12),
items: [
BottomNavigationBarItem(icon: Icon(Icons.home),
label: "HOME",
backgroundColor: Colors.green,
),
BottomNavigationBarItem(icon: Icon(Icons.search),
label: "SEARCH",
backgroundColor: Colors.blue,
),
BottomNavigationBarItem(icon: Icon(Icons.contact_mail),
label: "INBOX",
backgroundColor: Colors.orange,
),
BottomNavigationBarItem(icon: Icon(Icons.person),
label: "PROFILE",
backgroundColor: Colors.red,
),
],
),
);
}
}
