Null Check Operator Used On a Null Value? GetStorage in flutter give me this error - flutter

I am using GetStorage package in Flutter to check if the current user is login or not but it gives the error.
For example, when a user does not login it shows the null error and when I login it then it is filn, check if you can.
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:mobihub_2/Screens/main_login.dart';
import 'package:mobihub_2/Screens/navigationscreens.dart/add.dart';
import 'navigationscreens.dart/adds.dart';
import 'navigationscreens.dart/chat.dart';
import 'navigationscreens.dart/home2.dart';
import 'navigationscreens.dart/person.dart';
class Home extends StatefulWidget {
const Home({Key? key}) : super(key: key);
#override
// ignore: library_private_types_in_public_api
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
final auth = FirebaseAuth.instance;
int currentTab = 0;
final List<Widget> screens = const [
Home2(),
Chat(),
Youradds(),
Account(),
];
final PageStorageBucket bucket = PageStorageBucket();
Widget currentScreen = const Home2();
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey.shade100,
body: PageStorage(
bucket: bucket,
child: currentScreen,
),
floatingActionButton: FloatingActionButton(
backgroundColor: const Color(0xFFFFDC3D),
elevation: 2.5,
onPressed: () {
if(FirebaseAuth.instance.currentUser != null){
Navigator.push(context,
MaterialPageRoute(builder: (context) => const AddItems()));
}else{
Navigator.push(context,
MaterialPageRoute(builder: (context) => MainLogin()));
}
},
child: const Icon(
Icons.add,
color: Colors.black,
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
color: Colors.white,
shape: const CircularNotchedRectangle(),
notchMargin: 10,
child: SizedBox(
height: 60,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
MaterialButton(
highlightElevation: 0.0,
highlightColor: Colors.white,
hoverColor: Colors.white,
hoverElevation: 0.0,
minWidth: 40,
onPressed: () {
setState(() {
currentScreen = const Home2();
currentTab = 0;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.home,
color: currentTab == 0
? const Color(0xFFFFDC3D)
: Colors.black,
size: 25,
),
Text(
'',
style: TextStyle(
color: currentTab == 0
? const Color(0xFFFFDC3D)
: Colors.white),
)
],
),
),
MaterialButton(
highlightElevation: 0.0,
highlightColor: Colors.white,
hoverColor: Colors.white,
hoverElevation: 0.0,
minWidth: 40,
onPressed: () {
setState(() {
if(FirebaseAuth.instance.currentUser != null){
currentScreen = const Chat();
currentTab = 1;
}else{
Navigator.push(context,
MaterialPageRoute(builder: (context) => MainLogin()));
}
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.chat,
color: currentTab == 1
? const Color(0xFFFFDC3D)
: Colors.black,
size: 25,
),
Text(
'',
style: TextStyle(
color: currentTab == 1
? const Color(0xFFFFDC3D)
: Colors.white),
)
],
),
)
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
MaterialButton(
highlightElevation: 0.0,
highlightColor: Colors.white,
hoverColor: Colors.white,
hoverElevation: 0.0,
minWidth: 40,
onPressed: () {
setState(() {
if(FirebaseAuth.instance.currentUser != null){
currentScreen = const Youradds();
currentTab = 2;
}else{
Navigator.push(context,
MaterialPageRoute(builder: (context) => MainLogin()));
}
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.favorite,
color: currentTab == 2
? const Color(0xFFFFDC3D)
: Colors.black,
size: 25,
),
Text(
'',
style: TextStyle(
color: currentTab == 2
? const Color(0xFFFFDC3D)
: Colors.white),
)
],
),
),
MaterialButton(
highlightElevation: 0.0,
highlightColor: Colors.white,
hoverColor: Colors.white,
hoverElevation: 0.0,
autofocus: false,
minWidth: 40,
onPressed: () {
setState(() {
if(FirebaseAuth.instance.currentUser != null){
currentScreen = Account();
currentTab = 3;
}else{
Navigator.push(context,
MaterialPageRoute(builder: (context) => MainLogin()));
}
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.person,
color: currentTab == 3
? const Color(0xFFFFDC3D)
: Colors.black,
size: 25,
),
Text(
'',
style: TextStyle(
color: currentTab == 3
? const Color(0xFFFFDC3D)
: Colors.white),
)
],
),
)
],
)
],
),
),
),
);
}
}
I need help if anyone expert in Flutter checks my code and gives me the right answer. Thank you in advance.

Related

how to solve that buttom navigation bar doesn't appear in flutter

First,, Thanks for answering of questions about flutter in everytime.
As explaining the way this time, I tried to make that seperating button navigation bar as a widget in another file from main file and try to use it in main file like below. but it doesn't appear and not specific error.. so I don't get why is it not apper and how to use this in the way that I tried to? Could you give me some advice about this? Thanks a lot.
--main page I used--
return Scaffold(
bottomNavigationBar: BottomBar(),
--bottomNavigationBar widget page--
class BottomBar extends StatefulWidget {
const BottomBar({Key? key}) : super(key: key);
#override
State<BottomBar> createState() => _BottomBarState();
}
class _BottomBarState extends State<BottomBar> {
int currentTab = 0;
final List<Widget> screens = [
HomePage(),
ShopPage(),
PeoplePage(),
WalletPage()
];
final PageStorageBucket bucket = PageStorageBucket();
Widget currentScreen = HomePage();
#override
Widget build(BuildContext context) {
return Scaffold(
body: PageStorage(
child: currentScreen,
bucket: bucket,
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: (){},
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
notchMargin: 10,
child: Container(
height: 60,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
MaterialButton(
minWidth: 40,
onPressed: (){
setState(() {
currentScreen = HomePage();
currentTab = 0;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.home,
color: currentTab == 0? Colors.blue : Colors.grey,
),
Text(
'Home',
style: TextStyle(
color: currentTab == 0? Colors.blue : Colors.grey,
),
)
],
),
),
MaterialButton(
minWidth: 40,
onPressed: (){
setState(() {
currentScreen = ShopPage();
currentTab = 1;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.shop,
color: currentTab == 1? Colors.blue : Colors.grey,
),
Text(
'Shop',
style: TextStyle(
color: currentTab == 1? Colors.blue : Colors.grey,
),
)
],
),
),
],
),
//Right Tab Bar Icons
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
MaterialButton(
minWidth: 40,
onPressed: (){
setState(() {
currentScreen = WalletPage();
currentTab = 2;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.wallet,
color: currentTab == 2? Colors.blue : Colors.grey,
),
Text(
'Home',
style: TextStyle(
color: currentTab == 3? Colors.blue : Colors.grey,
),
)
],
),
),
MaterialButton(
minWidth: 40,
onPressed: (){
setState(() {
currentScreen = PeoplePage();
currentTab = 3;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.people,
color: currentTab == 3? Colors.blue : Colors.grey,
),
Text(
'Shop',
style: TextStyle(
color: currentTab == 3? Colors.blue : Colors.grey,
),
)
],
),
),
],
),
],
),
),
),
);
}
}
It is likely due to the fact that your BottomBar class' build method contains a Scaffold and it should not. It should only return a BottomAppBar widget. You can move all of your FAB widget code to the outer scaffold in your Main Page class.

how to change icon color when navigate to another page in flutter?

I made a BottomBar and make them enable to navigate to the other pages using onPressed function like below codes. but after navigating to other page that'd be can't change icon color because I think i made bottomnavigationbar: BottomBar in other page so that the page build BottomBar newly and 'int current Tab=0' is build again..
how can I change the way to can be change icon's color?
--BottomBar--
class BottomBar extends StatefulWidget {
const BottomBar({Key? key}) : super(key: key);
#override
State<BottomBar> createState() => BottomBarState();
}
class BottomBarState extends State<BottomBar> {
int currentTab = 0;
PageStorageBucket bucket = PageStorageBucket();
Widget currentScreen = HomePage();
final List<Widget> screens = [
HomePage(),
ShopPage(),
PeoplePage(),
WalletPage()
];
#override
Widget build(BuildContext context) {
return BottomAppBar(
shape: CircularNotchedRectangle(),
notchMargin: 10,
child: Container(
height: 60,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
MaterialButton(
minWidth: 40,
onPressed: (){
setState(() {
currentScreen = HomePage();
currentTab = 0;
});
Navigator.push(
context, MaterialPageRoute(builder: (context)=> HomePage())
);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.home,
color: currentTab == 0? Colors.blue : Colors.grey,
),
],
),
),
MaterialButton(
minWidth: 40,
onPressed: (){
setState(() {
currentScreen = ShopPage();
});
Navigator.push(
context, MaterialPageRoute(builder: (context)=> const ShopPage())
);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.shop,
color: currentTab == 1? Colors.blue : Colors.grey,
),
],
),
),
],
),
//Right Tab Bar Icons
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
MaterialButton(
minWidth: 40,
onPressed: (){
setState(() {
currentScreen = WalletPage();
currentTab = 2;
});
Navigator.push(
context, MaterialPageRoute(builder: (context)=> const WalletPage())
);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.wallet,
color: currentTab == 2? Colors.blue : Colors.grey,
),
],
),
),
MaterialButton(
minWidth: 40,
onPressed: (){
setState(() {
currentScreen = PeoplePage();
currentTab = 3;
});
Navigator.push(
context, MaterialPageRoute(builder: (context)=> PeoplePage())
);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.people,
color: currentTab == 3? Colors.blue : Colors.grey,
),
],
),
),
],
),
],
),
),
);
}
}
--the way I used BottomBar in the other page--
bottomNavigationBar: BottomBar(),
Consider trying this :
return SafeArea(
child: Scaffold(
extendBody: true,
body:pageOPtions[selectedPage]
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
backgroundColor: const Color(0xff282828),
currentIndex: selectedPage, //let's say it's 0
selectedLabelStyle: cardSecondaryTextStyle,
unselectedLabelStyle: cardSecondaryTextStyle,
selectedItemColor: const Color(0xffc8332c),
unselectedItemColor: const Color(0xff707070),
selectedIconTheme: const IconThemeData(color: Color(0xffc8332c)),
onTap: (index) {
setState(() {
selectedPage = index;
});
},
items: [
const BottomNavigationBarItem(
icon: Icon(
Icons.person,
color: Color(0xff707070),
size: 16,
),
activeIcon: Icon(
Icons.person,
color: Color(0xffc8332c),
size: 22,
),
label: 'Profile',
),
const BottomNavigationBarItem(
icon: Icon(
Icons.history,
color: Color(0xff707070),
size: 16,
),
activeIcon: Icon(
Icons.history,
color: Color(0xffc8332c),
size: 22,
),
label: 'Orders',
),
where pageOptions can be your screens like :
final pageOptions = [
const GeneralSettingsForm(),
const OrdersAndDelivery(),
];

Flutter: A list of generated TextFields deletes item at the final index regardless of the index passed

Assuming I have created 10 fields and use the delete button at index 2, the fields reduce to 9 but the item in index 10 is deleted instead of deleting 2 and moving up the others. I have written some minimal reproduction of the code
Here is the sample code.
import 'package:flutter/material.dart';
void main() {
runApp(const EditFields());
}
class EditFields extends StatefulWidget {
const EditFields({Key? key}) : super(key: key);
#override
State<EditFields> createState() => _EditFieldsState();
}
class _EditFieldsState extends State<EditFields> {
List<String> openRoles = [];
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'ShrinkWrap vs Slivers',
home: Scaffold(
appBar: AppBar(
title: const Text("ShrinkWrap"),
),
body: Column(
children: [
...List.generate(
openRoles.length,
(i) {
return Row(
children: [
SizedBox(
width: 300,
child: TextFormField(
maxLines: 1,
key: Key('rolefield$i'),
//..decoration
onChanged: (value) {
setState(() {
openRoles[i] = value!;
});
},
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: InkWell(
onTap: () {
openRoles.removeAt(i);
setState(() {});
},
child: const Icon(
Icons.delete,
color: Colors.red,
size: 24,
),
),
),
],
);
},
),
ElevatedButton(
style: ElevatedButton.styleFrom(
elevation: 0,
primary: Colors.transparent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
side: const BorderSide(color: Colors.blue))),
child: Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: const [
Padding(
padding: EdgeInsets.all(4.0),
child: Icon(
Icons.add_rounded,
size: 25,
color: Colors.blue,
),
),
Text('ADD', style: TextStyle(color: Colors.blue)),
],
),
onPressed: () {
openRoles.add("Text");
setState(() {});
}),
],
),
),
);
}
}
The issue is with using key, once a single item remove key changes by from
List.generate(
openRoles.length,
(i) {
If we do use map instead of list, removing n item, Data will for n> items. We can use TextEditingController in this case to work properly
class EditFields extends StatefulWidget {
const EditFields({Key? key}) : super(key: key);
#override
State<EditFields> createState() => _EditFieldsState();
}
class _EditFieldsState extends State<EditFields> {
List<TextEditingController> controllers = [];
int counterX = 0;
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'ShrinkWrap vs Slivers',
home: Scaffold(
appBar: AppBar(
title: const Text("ShrinkWrap"),
),
body: Column(
children: [
for (final c in controllers) rowB(c),
ElevatedButton(
style: ElevatedButton.styleFrom(
elevation: 0,
primary: Colors.transparent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
side: const BorderSide(color: Colors.blue))),
child: Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: const [
Padding(
padding: EdgeInsets.all(4.0),
child: Icon(
Icons.add_rounded,
size: 25,
color: Colors.blue,
),
),
Text('ADD', style: TextStyle(color: Colors.blue)),
],
),
onPressed: () {
controllers.add(TextEditingController());
setState(() {});
}),
],
),
),
);
}
Row rowB(TextEditingController c) {
return Row(
children: [
SizedBox(
width: 300,
child: TextFormField(
maxLines: 1,
controller: c,
//..decoration
onChanged: (value) {
setState(() {});
},
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: InkWell(
onTap: () {
controllers.remove(c);
setState(() {});
},
child: const Icon(
Icons.delete,
color: Colors.red,
size: 24,
),
),
),
],
);
}
}

How to make a Persistent BottomAppBar?

I made a BottomAppbar and a FAB at the center of a screen. The BottomAppbar is working fine, moving by indexes but now I want to make it persistent across all screens whenever I navigate.
Here is the current code:
class BottomNavBar extends StatefulWidget {
#override
_BottomNavBarState createState() => _BottomNavBarState();
}
class _BottomNavBarState extends State<BottomNavBar> {
int currentTab = 0;
final List<Widget> screens = [
MenuPage(),
OffersPage(),
ProfilePage(),
MorePage(),
HomePage(),
];
final PageStorageBucket buckets = PageStorageBucket();
Widget currentScreen = HomePage();
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
bottomNavigationBar: BottomAppBar(
shape: const CircularNotchedRectangle(),
notchMargin: 20,
child: SizedBox(
height: 80,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
MaterialButton(
minWidth: 40,
onPressed: () {
setState(() {
currentScreen = MenuPage();
currentTab = 4;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
'assets/images/menu.png',
color: currentTab == 4
? kPrimaryColor
: Colors.grey.withOpacity(0.5),
),
SizedBox(height: 0.2 * kDefaultPadding),
Text(
'Menu',
style: Theme.of(context).textTheme.caption!.copyWith(
color: currentTab == 4
? kPrimaryColor
: Colors.grey.withOpacity(0.5),
),
),
],
),
),
MaterialButton(
minWidth: 40,
onPressed: () {
setState(() {
currentScreen = OffersPage();
currentTab = 1;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
'assets/images/offers.png',
color: currentTab == 1
? kPrimaryColor
: Colors.grey.withOpacity(0.5),
),
SizedBox(height: 0.2 * kDefaultPadding),
Text(
'Offers',
style: Theme.of(context).textTheme.caption!.copyWith(
color: currentTab == 1
? kPrimaryColor
: Colors.grey.withOpacity(0.5),
),
)
],
),
),
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
MaterialButton(
minWidth: 40,
onPressed: () {
setState(() {
currentScreen = ProfilePage();
currentTab = 2;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
'assets/images/profile.png',
color: currentTab == 2
? kPrimaryColor
: Colors.grey.withOpacity(0.5),
),
Text(
'Profile',
style: Theme.of(context).textTheme.caption!.copyWith(
color: currentTab == 2
? kPrimaryColor
: Colors.grey.withOpacity(0.5),
),
),
],
),
),
MaterialButton(
minWidth: 40,
onPressed: () {
setState(() {
currentScreen = MorePage();
currentTab = 3;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
'assets/images/more.png',
color: currentTab == 3
? kPrimaryColor
: Colors.grey.withOpacity(0.5),
),
Text(
'Menu',
style: Theme.of(context).textTheme.caption!.copyWith(
color: currentTab == 3
? kPrimaryColor
: Colors.grey.withOpacity(0.5),
),
)
],
),
),
],
),
],
),
),
),
floatingActionButton: FloatingActionButton(
backgroundColor:
currentTab == 0 ? kPrimaryColor : Colors.grey.withOpacity(0.5),
onPressed: () {
setState(() {
currentScreen = HomePage();
currentTab = 0;
});
},
child: const Icon(
Icons.home,
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
body: PageStorage(
bucket: buckets,
child: currentScreen,
),
);
}
}

Flutter : How do I make BottomAppBar of buttomNavigationBar appear in every screens I have?

I'm using BottomAppBar instead of BottomNavigationBar widget. And I want to make this bar appear in every screen I have. Again, I don't want to use BottomNavigationBar.
bottomNavigationBar: BottomAppBar(
child: Container(
height: 60,
width: width,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
// Home
MaterialButton(
onPressed: () {
setState(() {
currentScreen = HomeScreenWrapper();
currentTab = 0;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.home,
color: currentTab == 0 ? primaryColor : Colors.grey,
),
Text(
AppLocalizations.of(context).translate('HOME'),
style: TextStyle(
color: currentTab == 0 ? primaryColor : Colors.grey,
fontSize: 10,
),
),
],
),
minWidth: width / 5,
),
// Dashboard
MaterialButton(
onPressed: () {
setState(() {
currentScreen = PointScreenWrapper();
currentTab = 2;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SvgPicture.asset(
'assets/images/dashboard.svg',
color: currentTab == 2 ? primaryColor : null,
),
// Icon(
// // Icons.show_chart,
// Icons.dashboard,
// //Icons.crop_square,
// color: currentTab == 2 ? primaryColor : Colors.grey,
// ),
Text(
AppLocalizations.of(context).translate('DASHBOARD'),
style: TextStyle(
color: currentTab == 2 ? primaryColor : Colors.grey,
fontSize: 10,
),
),
],
),
minWidth: width / 5,
),
// //Make a dummy space between
SizedBox(
width: width / 5,
),
// Score
MaterialButton(
onPressed: () {
setState(() {
currentScreen = ChallengeScreen();
currentTab = 1;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SvgPicture.asset(
'assets/images/ranking.svg',
color: currentTab == 1 ? primaryColor : Colors.grey,
),
// Icon(
// Icons.star,
// color: currentTab == 1 ? primaryColor : Colors.grey,
// size: 30,
// ),
Text(
AppLocalizations.of(context).translate('RATING'),
style: TextStyle(
color: currentTab == 1 ? primaryColor : Colors.grey,
fontSize: 10,
),
),
],
),
minWidth: width / 5,
),
//
MaterialButton(
onPressed: () {
setState(() {
currentScreen = ProfileWrapper();
currentTab = 3;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SvgPicture.asset(
'assets/images/profile.svg',
color: currentTab == 3 ? primaryColor : Colors.grey,
),
// Icon(
// Icons.settings,
// color: currentTab == 3 ? primaryColor : Colors.grey,
// ),
Text(
AppLocalizations.of(context).translate('PROFILE'),
style: TextStyle(
color: currentTab == 3 ? primaryColor : Colors.grey,
fontSize: 10,
),
),
],
),
minWidth: width / 5,
),
],
),
),
shape: CircularNotchedRectangle(),
),
How do I do that? Please give me some pointer regarding this issue. I am looking forward to hearing from anyone of you. Thank you in advance...
You can copy paste run full code below
You can use PageView when click on MaterialButton call bottomTapped with index
code snippet
Widget buildPageView() {
return PageView(
controller: pageController,
onPageChanged: (index) {
pageChanged(index);
},
children: <Widget>[
Red(),
Blue(),
Yellow(),
Green(),
],
);
}
#override
void initState() {
super.initState();
}
void pageChanged(int index) {
setState(() {
currentTab = index;
});
}
void bottomTapped(int index) {
setState(() {
currentTab = index;
pageController.animateToPage(index,
duration: Duration(milliseconds: 500), curve: Curves.ease);
});
}
working demo
full code
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// 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(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
double width;
Color primaryColor = Colors.blue;
int currentTab = 0;
PageController pageController = PageController(
initialPage: 0,
keepPage: true,
);
Widget buildPageView() {
return PageView(
controller: pageController,
onPageChanged: (index) {
pageChanged(index);
},
children: <Widget>[
Red(),
Blue(),
Yellow(),
Green(),
],
);
}
#override
void initState() {
super.initState();
}
void pageChanged(int index) {
setState(() {
currentTab = index;
});
}
void bottomTapped(int index) {
setState(() {
currentTab = index;
pageController.animateToPage(index,
duration: Duration(milliseconds: 500), curve: Curves.ease);
});
}
#override
Widget build(BuildContext context) {
width = MediaQuery.of(context).size.width;
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: buildPageView(),
bottomNavigationBar: BottomAppBar(
child: Container(
height: 60,
width: width,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
// Home
MaterialButton(
onPressed: () {
bottomTapped(0);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.home,
color: currentTab == 0 ? primaryColor : Colors.grey,
),
Text(
'HOME',
style: TextStyle(
color: currentTab == 0 ? primaryColor : Colors.grey,
fontSize: 10,
),
),
],
),
minWidth: width / 5,
),
// Dashboard
MaterialButton(
onPressed: () {
bottomTapped(1);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.network(
'https://picsum.photos/20/20?image=9',
color: currentTab == 1 ? primaryColor : null,
),
// Icon(
// // Icons.show_chart,
// Icons.dashboard,
// //Icons.crop_square,
// color: currentTab == 2 ? primaryColor : Colors.grey,
// ),
Text(
'DASHBOARD',
style: TextStyle(
color: currentTab == 1 ? primaryColor : Colors.grey,
fontSize: 10,
),
),
],
),
minWidth: width / 5,
),
// //Make a dummy space between
SizedBox(
width: width / 10,
),
// Score
MaterialButton(
onPressed: () {
bottomTapped(2);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.network(
'https://picsum.photos/20/20?image=9',
color: currentTab == 2 ? primaryColor : Colors.grey,
),
// Icon(
// Icons.star,
// color: currentTab == 1 ? primaryColor : Colors.grey,
// size: 30,
// ),
Text(
'RATING',
style: TextStyle(
color: currentTab == 2 ? primaryColor : Colors.grey,
fontSize: 10,
),
),
],
),
minWidth: width / 5,
),
//
MaterialButton(
onPressed: () {
bottomTapped(3);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.network(
'https://picsum.photos/20/20?image=9',
color: currentTab == 3 ? primaryColor : Colors.grey,
),
// Icon(
// Icons.settings,
// color: currentTab == 3 ? primaryColor : Colors.grey,
// ),
Text(
'PROFILE',
style: TextStyle(
color: currentTab == 3 ? primaryColor : Colors.grey,
fontSize: 10,
),
),
],
),
minWidth: width / 5,
),
],
),
),
shape: CircularNotchedRectangle(),
),
);
}
}
class Red extends StatefulWidget {
#override
_RedState createState() => _RedState();
}
class _RedState extends State<Red> {
#override
Widget build(BuildContext context) {
return Container(
color: Colors.red,
);
}
}
class Blue extends StatefulWidget {
#override
_BlueState createState() => _BlueState();
}
class _BlueState extends State<Blue> {
#override
Widget build(BuildContext context) {
return Container(
color: Colors.blueAccent,
);
}
}
class Yellow extends StatefulWidget {
#override
_YellowState createState() => _YellowState();
}
class _YellowState extends State<Yellow> {
#override
Widget build(BuildContext context) {
return Container(
color: Colors.yellowAccent,
);
}
}
class Green extends StatefulWidget {
#override
_GreenState createState() => _GreenState();
}
class _GreenState extends State<Green> {
#override
Widget build(BuildContext context) {
return Container(
color: Colors.greenAccent,
);
}
}
#Eren is right you cannot use same widget on every screen its against the flutter physics because its the scope of Scaffold field but you can use Common bottom-sheet class for every Page and pass that page context.
In flutter a good practice would be to create a widget and use that in every scaffold. Here is an example code I am using in my application
import 'package:flutter/material.dart';
class AppBottomNavigationBar extends StatelessWidget {
final int selectedIndex;
const AppBottomNavigationBar({
Key key,
#required this.selectedIndex,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.mail_outline),
title: Text('Messages'),
),
BottomNavigationBarItem(
icon: Icon(Icons.explore),
title: Text('Explore'),
),
BottomNavigationBarItem(
icon: Icon(Icons.person_outline),
title: Text('Profile'),
),
],
currentIndex: selectedIndex,
onTap: (int index) {
if (selectedIndex == index) {
return;
}
if (index == 0) {
Navigator.of(context).pushReplacementNamed('/home');
} else if (index == 1) {
Navigator.of(context).pushReplacementNamed('/messages');
} else if (index == 2) {
Navigator.of(context).pushReplacementNamed('/explore');
} else if (index == 3) {
Navigator.of(context).pushReplacementNamed('/profile');
}
},
);
}
}