Flutter fancy bottom navbar in flutter without any plugin

 Flutter fancy bottom navbar in flutter without any plugin

Flutter fancy bottom navbar in flutter without any plugin
Flutter fancy bottom navbar in flutter without any plugin


please see the coding part for better understanding


return Scaffold(
body: PageStorage(
child: currentScreen,
bucket: bucket,
),
floatingActionButton: InkWell(
onTap: () {
setState(() {
currentScreen =
const DashBoardLanding(); // if user taps on this dashboard tab will be active
currentTab = -1;
});
},
child: Container(
width: 56.0,
height: 56.0,
decoration: const BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(
colors: [
Color(0xffDFE9F5),
Color(0xffF8D7E7),
],
),
),
child: CircleAvatar(
backgroundColor: Colors.transparent,
child: Image.asset(
"assets/images/logo.png",
height: 32,
),
)),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
shape: const CircularNotchedRectangle(),
notchMargin: 8,
child: SizedBox(
height: 60,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: InkWell(
onTap: () {
setState(() {
currentScreen =
const Practitioners(); // if user taps on this dashboard tab will be active
currentTab = 0;
});
},
child: SizedBox(
child: Column(
children: [
Icon(
Icons.add_outlined,
color: currentTab == 0
? Theme.of(context).primaryColor
: const Color(0xff707070).withOpacity(0.7),
),
Text(
"Practitioners",
style: TextStyle(
color: currentTab == 0
? Theme.of(context).primaryColor
: const Color(0xff707070)
.withOpacity(0.7),
),
)
],
),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: InkWell(
onTap: () {
setState(() {
currentScreen =
const Content(); // if user taps on this dashboard tab will be active
currentTab = 1;
});
},
child: SizedBox(
child: Column(
children: [
Icon(
Icons.chat,
color: currentTab == 1
? Theme.of(context).primaryColor
: const Color(0xff707070).withOpacity(0.7),
),
Text(
"Content",
style: TextStyle(
color: currentTab == 1
? Theme.of(context).primaryColor
: const Color(0xff707070)
.withOpacity(0.7),
),
)
],
),
),
),
)
],
),
Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: InkWell(
onTap: () {
setState(() {
currentScreen =
const Bookings(); // if user taps on this dashboard tab will be active
currentTab = 2;
});
},
child: SizedBox(
child: Column(
children: [
Icon(
Icons.event_outlined,
color: currentTab == 2
? Theme.of(context).primaryColor
: const Color(0xff707070).withOpacity(0.7),
),
Text(
"Bookings",
style: TextStyle(
color: currentTab == 2
? Theme.of(context).primaryColor
: const Color(0xff707070)
.withOpacity(0.7),
),
)
],
),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: InkWell(
onTap: () {
setState(() {
currentScreen =
const Profile(); // if user taps on this dashboard tab will be active
currentTab = 3;
});
},
child: SizedBox(
child: Column(
children: [
Icon(
Icons.person_outline,
color: currentTab == 3
? Theme.of(context).primaryColor
: const Color(0xff707070).withOpacity(0.7),
),
Text(
"Profile",
style: TextStyle(
color: currentTab == 3
? Theme.of(context).primaryColor
: const Color(0xff707070)
.withOpacity(0.7),
),
)
],
),
),
),
),
],
)
],
),
),
),
)


Previous
Next Post »