Flutter rebuilding the parent widget of the Consumer - flutter

Widget build(BuildContext context) {
print("homepage");
final navigation = Provider.of<NavigationProvider>(context, listen: false);
return Consumer<ThemeProvider>(builder: (context, themeData, _) {
return Scaffold(
backgroundColor: themeData.getTheme['mainBackground'],
appBar: AppBar(
backgroundColor: themeData.getTheme['appBar'],
elevation: 0.0,
title: Text(
"INTRADAE",
style: GoogleFonts.montserrat(
color: themeData.getTheme['textColor'],
),
),
actions: <Widget>[
Container(
margin: EdgeInsets.only(right: 5),
child: IconButton(
icon: Icon(
Icons.account_balance_wallet,
size: 30,
color: themeData.getTheme['textColor'],
),
onPressed: null,
),
)
],
),
body: Consumer<NavigationProvider>(
builder: (context, navigationProvider, _) =>
navigationProvider.getNavigation),
bottomNavigationBar: CurvedNavigationBar(
index: 0,
height: 50,
color: themeData.getTheme['secondaryBackground'],
backgroundColor: themeData.getTheme['mainBackground'],
buttonBackgroundColor: themeData.getTheme['mainBackground'],
items: <Widget>[
Icon(Icons.home, color: Colors.white),
Icon(Icons.shopping_cart, color: Colors.white),
Icon(Icons.person, color: Colors.white)
],
onTap: (index) {
navigation.updateNavigation(_pages[index]);
},
),
);
});
I am trying to update whatever is inside the body of the scaffold when updateNavigation takes place. Everything seemed fine, until I put a print inside the build method of the main widget and noticed that it was being called on every update the to NavigationProvider.
I am scratching my head since. I can't understand why this widget has to rebuild when only the Consumers should rebuild which in this case is inside the body of the Scaffold.
Coming from a React background this just seems weird to me.
Can anyone tell me why this is happening?

The problem was solved once I performed a hot restart. I then read about Hot Reload in Flutter the docs and realised that the changes I was making to the code weren't going to be seen unless I performed a hot restart.
Although the code posted here has
listen:false
in,
Provider.of<NavigationProvider>(context, listen: false)
But, I originally did not have that in my code. And when adding that argument too didn't seem to help, I decided to post a question here.
The problem was hot reload all along. Should've have made sure before posting.

Related

Black line showing on AdaptiveNavigationScaffold Flutter Windows

I am using the following AdaptiveNavigationScaffold implementation for a scaffold for a Windows flutter application...
Widget build(BuildContext context) => AdaptiveNavigationScaffold(
selectedIndex: StatefulShellRoute.of(context).currentIndex,
drawerHeader: SizedBox(
child: Container(
color: Colors.red,
),
height: 200,
width: double.infinity,
),
drawerScrimColor: Colors.white,
backgroundColor: Colors.white,
bottomNavigationOverflow: 10,
body: ClipRect(child: child),
onDestinationSelected: (int idx) => _goBranch(context, idx),
destinations: branches.map((e) => e.adaptiveDestination).toList(),
);
Everything is working well with go_router for handling navigation/state/all that good stuff. The issue I'm experiencing is with this black line showing up, and I can't seem to figure out where it is coming from. I can confirm this issue is not present when running the app with a web target.
I've tried to configure all the parameters of the AdaptiveNavigationScaffold but have not had any luck.
Git report: https://github.com/material-components/material-components-flutter-adaptive/issues/66

How to place all showDialog elements centered in the flutter

I'm having trouble creating showDialog. I want to draw a dialog apo sample I have all the elements. But the problem is that I can't place them properly. Here's what I want to do:
enter image description here
I'm having trouble creating showDialog. I want to draw a dialog apo sample I have all the elements. But the problem is that I can't place them properly. Here's what I want to do:
There is text, an icon and a button. I created it all, but there is a problem with the display, it's not in the center. Here is my code, can anyone know how all this will lead to a normal look, I will be grateful.
_showDialog(BuildContext context) {
showDialog(
context: context,
builder: (BuildContext ctx) {
// return object of type Dialog
return AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(15)),
),
title: Center(child: Text(Titles.serviceNotAvailable)),
//content: const Text(Titles.serviceNotAvailable),
actions: <Widget>[
SvgPicture.asset(Img.simpleOrder),
CustomElevatedButton(
isDark: false,
isEnabled: false,
onPressed: () {
_showDialog(context);
},
child: Text(
Titles.backToChoiceServices,
style: TextStyle(
color: Colorz.primary,
fontSize: FontSize.small,
fontWeight: FontWeight.w600,
),
),
),
],
);
},
);
}
Trye to wrap it in a Center widget, setting it as his child.

Flutter Feature Discovery Not SHowing Overlay

I had built an application and I'm trying to show feature discovery but, It is not showing discovery. Also not showing any error.
Question I Referred To Solve Issue
Main.dart
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp])
.then((_) async {
runApp(
FeatureDiscovery(
child: MaterialApp(
home: SplashScreen(),
),
),
);
});
}
ServicesOffersReviewsPhotos.dart
class ServicesOffersReviewsPhotos extends StatefulWidget {
#override
_ServicesOffersReviewsPhotosState createState() =>
_ServicesOffersReviewsPhotosState();
}
class _ServicesOffersReviewsPhotosState
extends State<ServicesOffersReviewsPhotos>
with SingleTickerProviderStateMixin {
late TabController _controller;
#override
void initState() {
_controller = TabController(length: 4, vsync: this, initialIndex: 0);
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: kOffWhiteBackGroundColor,
appBar: AppBar(
backgroundColor: kOffWhiteBackGroundColor,
elevation: 0,
leading: IconButton(
icon: Icon(
Icons.arrow_back_ios,
color: kDarkGrey,
size: MediaQuery.of(context).size.width*0.05,
),
onPressed: () {
Navigator.pop(context);
},
),
actions: [
IconButton(
icon: Icon(
Icons.favorite_border,
color: kDarkGrey,
size: MediaQuery.of(context).size.width*0.05,
),
onPressed: () {},
),
IconButton(
icon: Icon(
Icons.share,
color: kDarkGrey,
size: MediaQuery.of(context).size.width*0.05,
),
onPressed: () {},
),
],
),
body: SafeArea(
child: DescribedFeatureOverlay(
featureId: 'add_item_feature_id', // Unique id that identifies this overlay.
tapTarget: const Icon(Icons.add), // The widget that will be displayed as the tap target.
title: Text('Add item'),
description: Text('Tap the plus icon to add an item to your list.'),
backgroundColor: Theme.of(context).primaryColor,
targetColor: Colors.black,
textColor: Colors.black,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
children's...
],
),
),
),
);
}
}
My Application Flow
SplashScreen (PushReplacement) -> onBoardingScreen(PushReplacement) -> LoginScreen(PushReplacement) -> Home(push) -> ServicesOffersReviewsPhotos
I have tried placing feature discovery on the top of servicesoffersReviewsPhotos Scaffold but didn't get any output.
I have referred every blog on medium, youtube videos. But didn't found any solution.
Question's probably old and abandoned but I think Feature Discovery is a great plugin with a lot of potential so, here goes...
I had cause to use the feature discovery plugin and ran into the same issue. After hours of reading their documentation, it turns out that the reason it seems like nothing is happening is because once the feature is show cased once or twice, Feature discovery automatically records that you have seen it in the shared preferences without telling you.
So, you'll notice that when you uninstall the app completely and clear all data, feature discovery seems to work again the first few times until it saves to shared preference again and doesn't seem to work again.
This is the expected behaviour in production environment as it saves you the hassle to writing an onComplete callback function that involves shared preferences.
For the sake of development, they provided this function
FeatureDiscovery.clearPreferences
It essentially deletes the shared preferences data. So you can see it as many times as you want.
But the neatest way to stop auto save to shared preferences is to set this
recordStepsInSharedPreferences: false,
or this
persistenceProvider: NoPersistenceProvider(),
as an argument to the FeatureDiscovery widget like this
home: FeatureDiscovery(
recordStepsInSharedPreferences: false,
child: DemoApp()
),
If none of these work, try using only the compulsory parameters of DescribedFeatureOverlay before adding optional parameters one by one and testing each to see the faulty code.
link to the pub
Cheers.

How to update AppBar icon notification(State) from event implemented in different class?

My requirement is something like this:
Flutter - change appbar icon when receiving notification
But AppBar 'cart icon' which is to be notified on 'addToCart' button click implemented in another dart file. Am I doing something wrong by placing the AppBar and the rest in two different dart files? Let me know how to proceed.
You can use a global ValueNotifier variable. Then you can change it's content regardless the page in which you are.
Assuming this variable declaration ValueNotifier cartCounterNotifier = ValueNotifier(0);, you can update your AppBar action like this
appBar: AppBar(
// title and other
actions: [
ValueListenableBuilder(
valueListenable: cartCounterNotifier,
builder: (context, cartCounter, child) {
return Stack(
children: [
IconButton(
icon: Icon(Icons.shopping_cart_rounded),
onPressed: () {},
),
Positioned(
child: 0 < cartCounter ? Container(
decoration: ShapeDecoration(
color: Colors.red,
shape: CircleBorder(),
),
padding: EdgeInsets.all(2.0),
child: Text("$cartCounter", style: TextStyle(
color: Colors.white,
),),
) : SizedBox(),
),
],
);
}
)
],
),
Update:
So to update your action button, simply change the content of your variable like this
cartCounterNotifier.value = cartCounterNotifier.value + 1; // or another value

Dynamically added widget works only after route change

I am using the flutter Slidable widget inside a SliverList, where the list elements are pulled from an array. I use setState to update the list.
The problem I am having is that after the list update, I can see all new elements correctly, but the slidable functionality doesn't work. However, after entering a new page with push and leaving with pop, the slidable functionality starts working.
Why is this happening?
return SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => Card(
child: InkWell(
child: Slidable(
key: Key(_fileList[index].key),
actionPane: SlidableDrawerActionPane(),
child: Container(
child: ListTile(
onTap: () {
...
},
title: Text(_fileList[index].subtitle),
subtitle: Text(_fileList[index].subtitle),
),
),
secondaryActions: <Widget>[
IconSlideAction(
caption: 'Delete',
color: Colors.red,
icon: Icons.delete,
onTap: () {
...
}
),
],
),
),
),
childCount: _fileList.length,
),
);
Updating is done like this:
setState(() {
_fileList = newFileList;
});
i think you may try not to test on hot reload
just type in terminal : flutter run
Never mind, i accidentally disabled and then re-enabled the SlidableController.