Skip to content

Commit cda60b3

Browse files
amitamrutiyaamitamrutiya
committed
Implement theme persistence throughout your app
1 parent c89c741 commit cda60b3

File tree

8 files changed

+110
-52
lines changed

8 files changed

+110
-52
lines changed

‎lib/Components/dark_transition.dart‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ class DarkTransition extends StatefulWidget {
1111
this.themeController,
1212
this.radius,
1313
this.duration = const Duration(milliseconds: 400),
14-
this.isDark = false})
14+
this.isDark = false,
15+
required this.themeIndex})
1516
: super(key: key);
1617

1718
final Widget Function(BuildContext, int, bool, int, Function(int))
@@ -21,6 +22,7 @@ class DarkTransition extends StatefulWidget {
2122
final Offset offset;
2223
final double? radius;
2324
final Duration? duration;
25+
final int themeIndex;
2426

2527
@override
2628
_DarkTransitionState createState() => _DarkTransitionState();
@@ -139,11 +141,11 @@ class _DarkTransitionState extends State<DarkTransition>
139141
builder: (BuildContext context, Widget? child) {
140142
return Stack(
141143
children: [
142-
_body(2, false),
144+
_body(widget.themeIndex == 2 ? 2 : 1, false),
143145
ClipPath(
144146
clipper: CircularClipper(
145147
_animationController.value * radius, position),
146-
child: _body(1, _needsSetup)),
148+
child: _body(widget.themeIndex == 2 ? 1 : 2, _needsSetup)),
147149
],
148150
);
149151
});

‎lib/Constants/theme_provider.dart‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,31 @@
11
import 'package:flutter/material.dart';
2+
import 'package:shared_preferences/shared_preferences.dart';
23

34
class ThemeProvider extends ChangeNotifier {
45
static ThemeMode themeMode = ThemeMode.dark;
56

7+
Future<void> getPreviousTheme() async {
8+
SharedPreferences prefs = await SharedPreferences.getInstance();
9+
prefs.getString('themeMode') == 'ThemeMode.light'
10+
? themeMode = ThemeMode.light
11+
: themeMode = ThemeMode.dark;
12+
13+
notifyListeners();
14+
}
15+
616
bool get isDarkMode => themeMode == ThemeMode.dark;
717

818
static ThemeData theme(int index) =>
919
index == 2 ? MyThemes.darkTheme : MyThemes.lightTheme;
1020

11-
void toggleTheme() {
21+
void toggleTheme() async {
22+
SharedPreferences prefs = await SharedPreferences.getInstance();
1223
if (themeMode == ThemeMode.dark) {
1324
themeMode = ThemeMode.light;
25+
prefs.setString('themeMode', 'ThemeMode.light');
1426
} else {
1527
themeMode = ThemeMode.dark;
28+
prefs.setString('themeMode', 'ThemeMode.dark');
1629
}
1730
}
1831
}

‎lib/Pages/home_screen.dart‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,11 @@ import '../Constants/notification_keys.dart';
4242
import '../Components/RSSFeedButtonWidget.dart';
4343

4444
class HomeScreen extends StatefulWidget {
45+
final int? themeIndex;
4546
final GlobalKey<NavigatorState> navigatorKey =
4647
new GlobalKey<NavigatorState>();
48+
49+
HomeScreen({Key? key, this.themeIndex}) : super(key: key);
4750
@override
4851
_HomeScreenState createState() => _HomeScreenState();
4952
}
@@ -147,6 +150,7 @@ class _HomeScreenState extends State<HomeScreen> {
147150
Widget build(BuildContext context) {
148151
final mediaQuery = MediaQuery.of(context);
149152
return DarkTransition(
153+
themeIndex: widget.themeIndex ?? 2,
150154
isDark: isDark,
151155
offset: Offset(mediaQuery.viewPadding.left + 115 + 23,
152156
mediaQuery.viewPadding.top + 35 + 25),
@@ -180,7 +184,7 @@ class _HomeScreenState extends State<HomeScreen> {
180184
screenCurrent = AboutScreen(index: themeIndex);
181185
break;
182186
}
183-
if (needsSetup && themeIndex == 1) {
187+
if (needsSetup) {
184188
SchedulerBinding.instance.addPostFrameCallback((_) {
185189
controller.open();
186190
});
@@ -530,8 +534,10 @@ class _MenuState extends State<Menu> {
530534
Provider.of<UserDetailProvider>(context, listen: false)
531535
.setUsersList(<CurrentUserDetailModel>[]);
532536
Navigator.of(context).pushNamedAndRemoveUntil(
533-
Routes.loginScreenRoute,
534-
(Route<dynamic> route) => false);
537+
Routes.loginScreenRoute,
538+
(Route<dynamic> route) => false,
539+
arguments: widget.index,
540+
);
535541
},
536542
index: widget.index,
537543
),

‎lib/Pages/login_screen.dart‎

Lines changed: 48 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import 'dart:async';
2+
13
import 'package:clipboard/clipboard.dart';
24
import 'package:flood_mobile/Api/auth_api.dart';
35
import 'package:flood_mobile/Components/toast_component.dart';
@@ -14,6 +16,9 @@ import '../Components/custom_dialog_animation.dart';
1416
import '../Provider/login_status_data_provider.dart';
1517

1618
class LoginScreen extends StatefulWidget {
19+
final int? themeIndex;
20+
21+
const LoginScreen({Key? key, this.themeIndex}) : super(key: key);
1722
@override
1823
_LoginScreenState createState() => _LoginScreenState();
1924
}
@@ -26,16 +31,23 @@ class _LoginScreenState extends State<LoginScreen> {
2631
TextEditingController urlController =
2732
new TextEditingController(text: 'http://localhost:3000');
2833
final _formKey = GlobalKey<FormState>();
34+
late int themeIndex;
35+
36+
@override
37+
void initState() {
38+
super.initState();
39+
themeIndex = widget.themeIndex ?? 2;
40+
}
2941

3042
@override
3143
Widget build(BuildContext context) {
3244
double hp = MediaQuery.of(context).size.height;
3345
double wp = MediaQuery.of(context).size.width;
3446
return LoadingOverlay(
35-
color: ThemeProvider.theme(2).primaryColor,
47+
color: ThemeProvider.theme(themeIndex).primaryColor,
3648
isLoading: showSpinner,
3749
child: Scaffold(
38-
backgroundColor: ThemeProvider.theme(2).primaryColor,
50+
backgroundColor: ThemeProvider.theme(themeIndex).primaryColor,
3951
body: SafeArea(
4052
child: Form(
4153
key: _formKey,
@@ -59,7 +71,7 @@ class _LoginScreenState extends State<LoginScreen> {
5971
Text(
6072
'Welcome to Flood',
6173
style: TextStyle(
62-
color: ThemeProvider.theme(2)
74+
color: ThemeProvider.theme(themeIndex)
6375
.textTheme
6476
.bodyLarge!
6577
.color!,
@@ -69,7 +81,7 @@ class _LoginScreenState extends State<LoginScreen> {
6981
Text(
7082
'Sign in to your account',
7183
style: TextStyle(
72-
color: ThemeProvider.theme(2)
84+
color: ThemeProvider.theme(themeIndex)
7385
.textTheme
7486
.bodyLarge!
7587
.color!,
@@ -86,15 +98,15 @@ class _LoginScreenState extends State<LoginScreen> {
8698
key: Key('Url TextField'),
8799
controller: urlController,
88100
style: TextStyle(
89-
color: ThemeProvider.theme(2)
101+
color: ThemeProvider.theme(themeIndex)
90102
.textTheme
91103
.bodyLarge
92104
?.color,
93105
),
94106
decoration: InputDecoration(
95107
prefixIcon: Icon(
96108
Icons.link,
97-
color: ThemeProvider.theme(2)
109+
color: ThemeProvider.theme(themeIndex)
98110
.textTheme
99111
.bodyLarge!
100112
.color!,
@@ -103,35 +115,35 @@ class _LoginScreenState extends State<LoginScreen> {
103115
labelStyle: TextStyle(
104116
fontFamily: 'Montserrat',
105117
fontWeight: FontWeight.bold,
106-
color: ThemeProvider.theme(2)
118+
color: ThemeProvider.theme(themeIndex)
107119
.textTheme
108120
.bodyLarge!
109121
.color!),
110122
focusedBorder: UnderlineInputBorder(
111123
borderSide: BorderSide(
112-
color:
113-
ThemeProvider.theme(2).primaryColorDark,
124+
color: ThemeProvider.theme(themeIndex)
125+
.primaryColorDark,
114126
),
115127
),
116128
border: UnderlineInputBorder(
117129
borderSide: BorderSide(
118-
color: ThemeProvider.theme(2)
130+
color: ThemeProvider.theme(themeIndex)
119131
.textTheme
120132
.bodyLarge!
121133
.color!,
122134
),
123135
),
124136
disabledBorder: UnderlineInputBorder(
125137
borderSide: BorderSide(
126-
color: ThemeProvider.theme(2)
138+
color: ThemeProvider.theme(themeIndex)
127139
.textTheme
128140
.bodyLarge!
129141
.color!,
130142
),
131143
),
132144
enabledBorder: UnderlineInputBorder(
133145
borderSide: BorderSide(
134-
color: ThemeProvider.theme(2)
146+
color: ThemeProvider.theme(themeIndex)
135147
.textTheme
136148
.bodyLarge!
137149
.color!,
@@ -157,7 +169,7 @@ class _LoginScreenState extends State<LoginScreen> {
157169
},
158170
icon: Icon(
159171
Icons.paste,
160-
color: ThemeProvider.theme(2)
172+
color: ThemeProvider.theme(themeIndex)
161173
.textTheme
162174
.bodyLarge!
163175
.color!,
@@ -176,15 +188,15 @@ class _LoginScreenState extends State<LoginScreen> {
176188
key: Key('Username TextField'),
177189
controller: usernameController,
178190
style: TextStyle(
179-
color: ThemeProvider.theme(2)
191+
color: ThemeProvider.theme(themeIndex)
180192
.textTheme
181193
.bodyLarge!
182194
.color!,
183195
),
184196
decoration: InputDecoration(
185197
prefixIcon: Icon(
186198
Icons.person,
187-
color: ThemeProvider.theme(2)
199+
color: ThemeProvider.theme(themeIndex)
188200
.textTheme
189201
.bodyLarge!
190202
.color!,
@@ -193,34 +205,35 @@ class _LoginScreenState extends State<LoginScreen> {
193205
labelStyle: TextStyle(
194206
fontFamily: 'Montserrat',
195207
fontWeight: FontWeight.bold,
196-
color: ThemeProvider.theme(2)
208+
color: ThemeProvider.theme(themeIndex)
197209
.textTheme
198210
.bodyLarge!
199211
.color!),
200212
focusedBorder: UnderlineInputBorder(
201213
borderSide: BorderSide(
202-
color: ThemeProvider.theme(2).primaryColorDark,
214+
color: ThemeProvider.theme(themeIndex)
215+
.primaryColorDark,
203216
),
204217
),
205218
border: UnderlineInputBorder(
206219
borderSide: BorderSide(
207-
color: ThemeProvider.theme(2)
220+
color: ThemeProvider.theme(themeIndex)
208221
.textTheme
209222
.bodyLarge!
210223
.color!,
211224
),
212225
),
213226
disabledBorder: UnderlineInputBorder(
214227
borderSide: BorderSide(
215-
color: ThemeProvider.theme(2)
228+
color: ThemeProvider.theme(themeIndex)
216229
.textTheme
217230
.bodyLarge!
218231
.color!,
219232
),
220233
),
221234
enabledBorder: UnderlineInputBorder(
222235
borderSide: BorderSide(
223-
color: ThemeProvider.theme(2)
236+
color: ThemeProvider.theme(themeIndex)
224237
.textTheme
225238
.bodyLarge!
226239
.color!,
@@ -245,7 +258,7 @@ class _LoginScreenState extends State<LoginScreen> {
245258
key: Key('Password TextField'),
246259
controller: passwordController,
247260
style: TextStyle(
248-
color: ThemeProvider.theme(2)
261+
color: ThemeProvider.theme(themeIndex)
249262
.textTheme
250263
.bodyLarge
251264
?.color,
@@ -254,43 +267,43 @@ class _LoginScreenState extends State<LoginScreen> {
254267
decoration: InputDecoration(
255268
prefixIcon: Icon(
256269
Icons.lock_outline,
257-
color: ThemeProvider.theme(2)
270+
color: ThemeProvider.theme(themeIndex)
258271
.textTheme
259272
.bodyLarge!
260273
.color!,
261274
),
262275
labelText: 'Password',
263276
labelStyle: TextStyle(
264277
fontWeight: FontWeight.bold,
265-
color: ThemeProvider.theme(2)
278+
color: ThemeProvider.theme(themeIndex)
266279
.textTheme
267280
.bodyLarge!
268281
.color!),
269282
focusedBorder: UnderlineInputBorder(
270283
borderSide: BorderSide(
271-
color:
272-
ThemeProvider.theme(2).primaryColorDark,
284+
color: ThemeProvider.theme(themeIndex)
285+
.primaryColorDark,
273286
),
274287
),
275288
border: UnderlineInputBorder(
276289
borderSide: BorderSide(
277-
color: ThemeProvider.theme(2)
290+
color: ThemeProvider.theme(themeIndex)
278291
.textTheme
279292
.bodyLarge!
280293
.color!,
281294
),
282295
),
283296
disabledBorder: UnderlineInputBorder(
284297
borderSide: BorderSide(
285-
color: ThemeProvider.theme(2)
298+
color: ThemeProvider.theme(themeIndex)
286299
.textTheme
287300
.bodyLarge!
288301
.color!,
289302
),
290303
),
291304
enabledBorder: UnderlineInputBorder(
292305
borderSide: BorderSide(
293-
color: ThemeProvider.theme(2)
306+
color: ThemeProvider.theme(themeIndex)
294307
.textTheme
295308
.bodyLarge!
296309
.color!,
@@ -316,7 +329,7 @@ class _LoginScreenState extends State<LoginScreen> {
316329
(showPass)
317330
? Icons.visibility
318331
: Icons.visibility_off,
319-
color: ThemeProvider.theme(2)
332+
color: ThemeProvider.theme(themeIndex)
320333
.textTheme
321334
.bodyLarge!
322335
.color!,
@@ -352,8 +365,10 @@ class _LoginScreenState extends State<LoginScreen> {
352365
Toasts.showSuccessToast(
353366
msg: 'Login Successful');
354367
Navigator.of(context).pushNamedAndRemoveUntil(
355-
Routes.homeScreenRoute,
356-
(Route<dynamic> route) => false);
368+
Routes.homeScreenRoute,
369+
(Route<dynamic> route) => false,
370+
arguments: themeIndex,
371+
);
357372
SharedPreferences prefs =
358373
await SharedPreferences.getInstance();
359374
bool batteryOptimizationInfoSeen =
@@ -407,8 +422,8 @@ class _LoginScreenState extends State<LoginScreen> {
407422
shape: RoundedRectangleBorder(
408423
borderRadius: BorderRadius.circular(14.0),
409424
),
410-
backgroundColor:
411-
ThemeProvider.theme(2).primaryColorDark,
425+
backgroundColor: ThemeProvider.theme(themeIndex)
426+
.primaryColorDark,
412427
),
413428
child: Center(
414429
child: Text(

0 commit comments

Comments
 (0)