Flutter - Dynamic Persistent Theme Switcher using Provider and Shared Preferences
Vložit
- čas přidán 11. 12. 2019
- Dynamically switch between themes in flutter during runtime using provider as well as make the chosen theme permanent between app sessions using shared preferences.
Source Code (github.com/lohanidamodar/flut...)
Use start branch for following through the tutorial.
_______________________________________________
Repository of my UI Challenges (github.com/lohanidamodar/flut...)
Download from Play Store (play.google.com/store/apps/de...)
Download from App Store (apps.apple.com/np/app/flutter...)
** -------------------------------------------------------------------------------- **
Let's get connected
github.com/lohanidamodar
reactbits
lohanidamodar
/ lohani.damodar
/ lohanidamodar
/ lohanidamodar
Finally a video that explains it properly.. thank you
Thank you. Glad that it was helpful
this sharedprefs tutorial is black magic fuckery, i can instantly understand it, thank you
Thank you
Thank you very much!
I've been struggling with sharedPref for days and your tutorial put it together.
Great to hear!
Superb Video Sir .Nice tutorial ..thank u for source code
Most welcome. Keep supporting.
Finally I found a tutorial that I can understand and applied to my project. Thanks bro.
Glad it helped! Awesome, keep fluttering!
Thank you brother 😌 Good one!
Thank you sir for great time and motivate me, you are really great man
I have Subscribed...Perfect Tutorials
Awesome, thank you!
thanks man you save my day :)
Awesome!!
Oh thanks god !! you make my day
You're welcome!!
I followed this tutorial and it is working perfectly, I also added a system default setting
Awesome!
@@appwriters It is also the first time I use Provider and a getter, so thank you very much
Thank you bro!
Thank Youuu 😇
You're welcome 😊
Thanks buddy
you used shared preferences so easily and here I'm stuck from 2 hr that how to use it.
Go through more tutorials, check out more samples on github how other's have done, you will get there in no time.
@@appwriters actully want to use dark mode and I have customised my buttons color on dark mode as well as light mode.
I have made a function to get and set the value on shared preferences. Here are my functions
void setBoolToSF(bool boolValue) async {
SharedPreferences prefs = await SharedPreferences.getInstance();
prefs.setBool('darkMode', boolValue);
}
Future getBoolValuesSF() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
//Return bool
bool boolValue = prefs.getBool('boolValue');
return boolValue;
}
And here is init function :
@override
void initState() {
super.initState();
_darkMode = _prefs.then((SharedPreferences prefs) {
return (prefs.getInt('darkMode') ?? false);
});
}
Now the issue is how to call the getboolvaluesf? I tried several times and it says future bool connot be assigned to bool value.
Then how to call getboolvaluesf ()... On the color argument where I'm using ternary function.
Can you help?
Thanks a lot!
You're welcome! Thank you for your support.
@@appwriters can you make a video about 'add to favourite' with provider and sqflite or hive. Please nested local json 🤗
Hello, thanks for this great video. I had a question.
My app save app settings to Firestore for each user. One of setting is dark theme. I want switch dynamically themeMode of MaterialApp with user data in Firebase. (Without Shared Preferences)
1. Create a splash screen, independent of theme (dark or light), and until the user data is loaded from firestore, display the splash screen, once loaded then load the theme data, to do that you might have use two steps (first a MaterialApp or WidgetsApp, with default theme for splash and loding stuff, then once loaded, another MaterialApp with the theme applied.). Let me know how you did it.
10:48 Thanks for this but when we hot restart the App shows dark theme for a second before accessing SharedPreferences. How can we overcome it?
If you want to prevent that, just introduce a bool loading in the theme notifier, which is by default true and after successfully loaded from shared preferences it's false, and in app, until loading is true, just show a progress bar or splash screen and display the app only after loading is false...
Thanks for this video brother, you are declaring Themedata in another file, that file does not contain context, if i want to override some of the properties of theme by using copywith ? how to do that.
Create a function that returns themedata instead of variable, pass context as parameter
I use the same code and when start my app it s flash for second from default theme to the presist one?
Yes that happens. For that you can use a theme agnostic splash screen that is used until the persisted value is loaded
_saveToPrefs is async method and calling notifyListeners right after this in toggleTheme looks like an error
Nope, saving to sharedprefs is in background. However we have already updated in the change notifier so we can notify right await to change theme
@@appwriters got it
What is the purpose of getter in you change notifier class?
Can you explain me pls?
Getter is for private fields, we don't want fields changed outside notifier (as it will not notify) so we make it private, when a variable is private to access it outside the scope of notifier we need a getter
@@appwriters Thank you so much!
Your video and reply help me so much!
Great work... Sir, I have tried this code to make my theme persistent but can not implement it. Sir, I need your help.
Given is my code on GitHub please kindly review the code and please correct it.
Thank You, Sir.
Hi, please add a runnable flutter code in the repository and send me the link, that way I will be able to run and test and would be help you quicker :)
@@appwriters Sir I have created a repository on GitHub. Please Kindly Check It.
Thank You, Sir.
Only 2 themes? Mine uses 4.
Do share, if you have a public repo, it will be helpful for others..
@@appwriters I used this guy's example medium.com/flutter-community/dynamic-theming-with-flutter-78681285d85f I use it to change basically everything dynamically(Titles, labels, map markers, etc) play.google.com/store/apps/details?id=popcornbeerfootball.kc_gatefinder and the state management stuff I use MobX.
how can use for some pages?
Not sure I understand what you mean?
@@appwriters i want use dark mod and light mod use for same screen when i use switch in drawer , when switch to dark all screens get to dark.
i hope you understand.
@@BrYarDJ oh, to do that, you just need to use a stateful widget and based on theme selected (don't change the theme in material app) change on that file only
@@appwriters
bro im sorry but i dont understand, this your code in main page its work in main but i dont know how call in second screen or more.
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ChangeNotifierProvider(
create: (_)=>ThemeNotifier(),
child: Consumer(
builder: (context,ThemeNotifier notifier,child){
return MaterialApp(
title: 'demo',
theme:notifier.darkTheme ? dark :light ,
debugShowCheckedModeBanner: false,
home: MyHomePage(),
);
},
),
);
}
}
............................
i use this in second screen but its not work full response .
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeNotifier().darkTheme ? dark :light,
home: Scaffold(
i hope fix it