Flutter app - Problems Lifting State...Suggestions? - flutter

I'm working on a Flutter app and trying to make my bottom navigator bar more universal. As part of that, I've moved it to its own file and now need to simply lift state up to the parent class in order to highlight the selected icon. I call it like so from the parent:
bottomNavigationBar: buildBottomNavBar(
selectedIndex: selectedIndex,
redrawDisplay: redrawDisplay,
context: context,
),
And the bottomNaviBar is built like so:
return BottomNavigationBar(
currentIndex: selectedIndex,
onTap: (int index) {
selectedIndex = index;
redrawDisplay(selectedIndex);
onBottomMenuTap(index, appProject.picsSelectable, context);
},
elevation: 5.0,
iconSize: 30.0,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.note_add),
label: 'Add Metadata',
),
BottomNavigationBarItem(
icon: Icon(Icons.share),
label: 'Share Pics',
),
BottomNavigationBarItem(
icon: Icon(Icons.delete),
label: 'Delete Pics',
),
],
);
The 'redrawDisplay' function is simply a function in the parent class that sets state, like so:
void redrawDisplay({int selectedIndex}) {
setState(() {
this.selectedIndex = selectedIndex ?? 0;
});
}
I swear this was working a few days ago, but now I'm getting the following exception:
════════ Exception caught by gesture ═════════════════════════════════════════════
Closure call with mismatched arguments: function '_SearchScreenState.redrawDisplay'
Receiver: Closure: ({int selectedIndex}) => dynamic from Function 'redrawDisplay':.
Tried calling: _SearchScreenState.redrawDisplay(0)
Found: _SearchScreenState.redrawDisplay({int selectedIndex}) => dynamic
═══════════════════════════════════════════════════════════════════════
Obviously something has changed in my code, but I have been staring at this for hours and haven't cracked it yet. Anybody have some insight into what I've screwed up?
Thanks in advance.

Related

How to show alert dialog box if page is switched in bottom navigation bar in flutter

Currently I am working on flutter project in which I have used bottom navigation bar and in one of the pages I have a form in which information needs to fill. In this case if the user switches to another page after filling information and does not submit it, I want to show dialog box to user that "You have information filled leaving this page will discard the info". Please help.
I have tried WillPopScope widget but it only works when you press back button I want to show dialog box when the text fields are filled but not submitted and without submitting user tries to switch to another page.
In the onTap callback, check if the Navbar Item index is not equal to the Item which contains the form. If it is different, show the dialog and await its response.
void _onItemTapped(int index) async {
if(_selectedIndex == formItemIndex && index != formItemIndex)
{
// await showDialog();
}
setState(() {
_selectedIndex = index;
});
}
BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
)

How to prevent not to rebuild UI inside Index Stack

I'm using index stack in home screen to show different screen at one time.
My Problem is that child widget is rebuilt again and make API call when ever I re-enter to any screen
home screen code:
final _currentPage =
context.select<MenuProvider, int>((provider) => provider.currentPage);
void _onItemTapped(int index) {
Provider.of<MenuProvider>(context, listen: false)
.updateCurrentPage(index);
}
List<MenuItem> mainMenu = [
MenuItem(
AppLocalizations.of(context)!.sd_title,
'Home',
Icons.home,
0,
),
MenuItem(
AppLocalizations.of(context)!.profile_title,
'Profile',
Icons.person,
1,
),
MenuItem(
AppLocalizations.of(context)!.sd_calculator,
'Calculator',
Icons.calculate_rounded,
2,
),
];
var screens = [
mainMenu[_currentPage].index == 0 ? const HomeFragment() : Container(),
mainMenu[_currentPage].index == 1 ? const Profile() : Container(),
mainMenu[_currentPage].index == 2
? LoanCalculatorScreen(isHome: true)
: Container(),
];
var container = Container(
alignment: Alignment.center,
color: Colors.white,
child: FadeIndexedStack(
index: mainMenu[_currentPage].index,
children: screens,
),
);
Container is used in body of Scaffold.
Bottom Navigation:
bottomNavigationBar: BottomNavigationBar(
items: mainMenu
.map(
(item) => BottomNavigationBarItem(
label: item.bottomTitle,
icon: Icon(
item.icon,
),
),
)
.toList(),
currentIndex: _currentPage,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
)
Home screen: As statefull to make a call on init state;
#override
void initState() {
var homeData = Provider.of<HomeProvider>(context, listen: false);
homeData.getOffersAndPartnersSlider();
super.initState();
}
I'm using Provider for state management and API call.
any suggestion will help me to write better code and make good performance.
I've Try Page View also same thing happen the inside child is rebuilt.
I just want to make The API call once.
To fix this I've made changes with Pages.
Declare list of pages above built method with PageStorageKey.
final List<Widget> pages = [
const HomeFragment(
key: PageStorageKey('Page1'),
),
const Profile(
key: PageStorageKey('Page2'),
),
Lo
LoanCalculatorScreen(key: const PageStorageKey('Page'), isHome: true),
];
And Call pages inside Indexed Stack Widgets Children
Container(
alignment: Alignment.center,
color: Colors.white,
child: FadeIndexedStack(
index: mainMenu[_currentPage].index,
children: pages,
),
)

Flutter - call Navigator inside switch which it is inside builder

I want to navigate to QrScan screen once the icons get pressed, instead, I got an error!!
setState() or markNeedsBuild() called during build
I want to navigate to that screen and get data from QR Codes, after that I want this data to be shown on another screen!
It says:
This Overlay widget cannot be marked as needing to build because the framework is already in the process of building widgets.
A widget can be marked as needing to be built during the build phase only if one of its ancestors is currently building.
This exception is allowed because the framework builds parent widgets before children, which means a dirty descendant will always be built.
Otherwise, the framework might not visit this widget during this build phase.
The widget on which setState() or markNeedsBuild() was called was:
Overlay- [LabeledGlobalKey#a5a46]
The widget which was currently being built when the offending call wasmade was: builder
class MainTabsScreen extends StatefulWidget {
#override
_MainTabsScreenState createState() => _MainTabsScreenState();
}
class _MainTabsScreenState extends State<MainTabsScreen> {
int page = 3;
void _openScanner() {
Navigator.push(context, MaterialPageRoute(builder: (context) => QrScan()));
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Builder(
builder: (context) {
switch (page) {
case 0:
return ExploreScreen();
case 1:
return OffersScreen();
case 2:
_openScanner();
break;
case 3:
return AltersScreen();
case 4:
return ChatsScreen();
default:
return ExploreScreen();
}
},
),
),
bottomNavigationBar: ConvexAppBar(
top: -20.0,
backgroundColor: Colors.white,
activeColor: Color(0xBB0BCC83),
color: Color(0xBB0BCC83),
height: 53.0,
elevation: 0.0,
initialActiveIndex: 3,
items: [
TabItem(
icon: Icons.home,
title: 'Home',
),
TabItem(
icon: Icons.list,
title: 'Offers',
),
TabItem(
icon: Icons.qr_code,
title: 'Scan',
),
TabItem(
icon: Icons.add_alert,
title: 'Notification',
),
TabItem(
icon: Icons.chat,
title: 'Chats',
),
],
onTap: (id) {
setState(() => page = id);
},
),
);
}
}
As discussed in comments, a solution was to call the navigator.push when id == 2 within the onTap function.

Class 'bool' has no instance method '-'. Receiver: true Tried calling: -(false)

I was trying to use TweenAnimationBuilder<bool> but I really don't know what was the problem even I had the exception logs. I tired googling before posting this question, but it was of no help.
Exception:
Class 'bool' has no instance method '-'.
Receiver: true
Tried calling: -(false)
The relevant error-causing widget was TweenAnimationBuilder<bool>
Code:
#override
Widget build(BuildContext context) {
return TweenAnimationBuilder<bool>(
duration: Duration(seconds: 2),
tween: Tween<bool>(begin: false, end: true),
builder: (BuildContext context, bool tween, Widget child) {
print(tween.toString());
return Visibility(visible: showNavBar, child: child);
},
child: BottomNavigationBar(
selectedItemColor: Colors.green,
unselectedItemColor: Colors.black,
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), label: "Home"),
BottomNavigationBarItem(icon: Icon(Icons.explore), label: "Home"),
BottomNavigationBarItem(
icon: Icon(Icons.library_books), label: "Home"),
BottomNavigationBarItem(icon: Icon(Icons.settings), label: "Home")
],
onTap: (index) {},
),
);
}
TweenAnimationBuilder<bool> attempts to use a Tween<bool>, but Tween<T> cannot be used with bool. From the Tween documentation:
Types with special considerations
...
Types that define + and - operators to combine values (T + T → T and T - T → T) and an * operator to scale by multiplying with a double (T * double → T) can be directly used with Tween<T>.
bool does not provide +, -, and * operators.

How to Navigate to parent of widget in flutter

I want to navigate to the second bottom item on a page in flutter, from other pages.
The parent here is BottomNavigationBar that I want to configure to change the page (I define a key for it in Provider to access it from other pages).
List<Widget> pages = new List<Widget>();
BottomNavigationBar bottomNavigationBar;
updateList(){
pages.addAll({
Dashboard(),
AllServices(),
Account(),
Charge(),
});
}
int _selectedIndex = 0;
Widget _bottomNavigationBar(int selectedIndex,key) {
return BottomNavigationBar(
key: key,
onTap: (int index) => setState(() => _selectedIndex = index),
currentIndex: selectedIndex,
type: BottomNavigationBarType.fixed,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: new Icon(Icons.home),
title: new Text("A page"),
),
BottomNavigationBarItem(
icon: new Icon(Icons.location_on),
title: new Text("B page")
),
BottomNavigationBarItem(
icon: new Icon(Icons.store),
title: new Text("C page")
),
BottomNavigationBarItem(
icon: new Icon(Icons.person),
title:new Text("D page")
),
],
);
}
#override
void initState() {
// TODO: implement initState
super.initState();
updateList();
}
#override
Widget build(BuildContext context) {
final globalKeyForBottomNavigate = Provider.of<Controller>(context, listen: false).bottomNavigate;
return Scaffold(
bottomNavigationBar: _bottomNavigationBar(_selectedIndex,globalKeyForBottomNavigate),
body: pages[_selectedIndex],
);
}
And children are Page A, B, C, D. now from page A I Navigate to Page F. Then if an action is triggered, I want to navigate to page B, but my solution is to change the index of BottomNavigationBar in page F and then navigate to page A. It works, but does not directly navigate to the content of page B and the BottomNavigationBar. In my solution, I say ok first change index of BottomNavigationBar, then go to last page (that here is Page A), but as you see, I do not know how to directly navigate to page B. This is the code for page F.
onTap: (){
var bottomKey=Provider.of<Controller>(context, listen: false).bottomNavigate;
final BottomNavigationBar navigationBar = bottomKey.currentWidget;
navigationBar.onTap(1);
Navigator.pop(context);
},
You can try using an environment variable in the app. and based on the action change the value of environment variable. Secondly bind the value of selectedIndex with that environment variable, so whenever that variable change, it will change the value of selectedIndex and call the dashboard page again with new value of the index it will navigate you to the required page from the bottom bar.