Skip to content

Commit e1976ef

Browse files
afgprogrammerafgprogrammer
committed
Implement change theme
1 parent 120f04c commit e1976ef

File tree

4 files changed

+100
-20
lines changed

4 files changed

+100
-20
lines changed

‎lib/controllers/theme/ThemesController.dart

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,13 @@ class ThemesController extends GetxController {
1616

1717
getThemeState() {
1818
if (storage.read('theme') != null) {
19-
return changeTheme(storage.read('theme'));
19+
return setTheme(storage.read('theme'));
2020
}
2121

22-
changeTheme('light');
22+
setTheme('light');
2323
}
2424

25-
void changeTheme(String value) {
25+
void setTheme(String value) {
2626
theme = value;
2727
storage.write('theme', value);
2828

‎lib/shared/helpers/extensions/StringExtension.dart

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
extension StringCasingExtension on String {
2+
String toCapitalized() => length > 0 ?'${this[0].toUpperCase()}${substring(1).toLowerCase()}':'';
3+
String toTitleCase() => replaceAll(RegExp(' +'), ' ').split(' ').map((str) => str.toCapitalized()).join(' ');
4+
}

‎lib/themes/Themes.dart

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@ class Themes {
1212
border: OutlineInputBorder(
1313
borderSide: BorderSide.none,
1414
borderRadius: BorderRadius.circular(10)
15+
),
16+
hintStyle: TextStyle(
17+
fontSize: 14,
1518
)
1619
),
1720
textTheme: TextTheme(
@@ -77,12 +80,12 @@ class Themes {
7780
),
7881
caption: TextStyle(
7982
color: Colors.grey.shade800,
80-
fontSize: 14,
83+
fontSize: 12,
8184
fontWeight: FontWeight.w400
8285
),
8386
overline: TextStyle(
8487
color: Colors.grey.shade700,
85-
fontSize: 12,
88+
fontSize: 10,
8689
fontWeight: FontWeight.w400,
8790
letterSpacing: -0.5
8891
)
@@ -92,6 +95,21 @@ class Themes {
9295
static ThemeData darkTheme = ThemeData(
9396
primarySwatch: Colors.blue,
9497
brightness: Brightness.dark,
98+
scaffoldBackgroundColor: Colors.grey.shade900,
99+
appBarTheme: AppBarTheme(
100+
backgroundColor: Colors.grey.shade900,
101+
elevation: 0
102+
),
103+
bottomAppBarColor: Colors.grey.shade900,
104+
inputDecorationTheme: InputDecorationTheme(
105+
border: OutlineInputBorder(
106+
borderSide: BorderSide.none,
107+
borderRadius: BorderRadius.circular(10)
108+
),
109+
hintStyle: TextStyle(
110+
fontSize: 14,
111+
)
112+
),
95113
textTheme: TextTheme(
96114
headline1: TextStyle(
97115
letterSpacing: -1.5,
@@ -124,19 +142,18 @@ class Themes {
124142
fontWeight: FontWeight.w500
125143
),
126144
headline6: TextStyle(
127-
letterSpacing: -1.0,
128145
color: Colors.grey.shade50,
129-
fontSize: 20,
146+
fontSize: 18,
130147
fontWeight: FontWeight.w500
131148
),
132149
subtitle1: TextStyle(
133150
color: Colors.grey.shade50,
134-
fontSize: 18,
151+
fontSize: 16,
135152
fontWeight: FontWeight.w500
136153
),
137154
subtitle2: TextStyle(
138155
color: Colors.grey.shade50,
139-
fontSize: 16,
156+
fontSize: 14,
140157
fontWeight: FontWeight.w500
141158
),
142159
bodyText1: TextStyle(

‎lib/views/home/tabs/UserTab.dart

Lines changed: 70 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
1+
import 'package:day59/controllers/theme/ThemesController.dart';
12
import 'package:flutter/material.dart';
3+
import 'package:get/get.dart';
4+
import 'package:day59/shared/helpers/extensions/StringExtension.dart';
25

36
class UserTab extends StatelessWidget {
4-
const UserTab({ Key? key }) : super(key: key);
7+
UserTab({ Key? key }) : super(key: key);
8+
final ThemesController _themesController = Get.find();
59

610
@override
711
Widget build(BuildContext context) {
@@ -42,7 +46,7 @@ class UserTab extends StatelessWidget {
4246
padding: EdgeInsets.all(16),
4347
decoration: BoxDecoration(
4448
borderRadius: BorderRadius.circular(8),
45-
color: Colors.grey.shade200
49+
color: Get.isDarkMode ? Colors.grey.shade800.withAlpha(100) : Colors.grey.shade200
4650
),
4751
child: Row(
4852
children: [
@@ -51,7 +55,7 @@ class UserTab extends StatelessWidget {
5155
height: 52,
5256
decoration: BoxDecoration(
5357
shape: BoxShape.circle,
54-
color: Colors.grey.shade300
58+
color: Get.isDarkMode ? Colors.grey.shade700 : Colors.grey.shade300
5559
),
5660
child: Center(
5761
child: Icon(Icons.person, size: 32, color: Colors.grey.shade500),
@@ -65,15 +69,18 @@ class UserTab extends StatelessWidget {
6569
SizedBox(height: 32),
6670
Text("Settings", style: theme.textTheme.headline6?.copyWith(fontWeight: FontWeight.w400)),
6771
SizedBox(height: 16),
68-
_buildListTile('Appearance', Icons.dark_mode, 'Light', Colors.purple, theme),
72+
GetBuilder<ThemesController>(builder: (_) {
73+
return _buildListTile('Appearance', Icons.dark_mode, _.theme.toCapitalized(), Colors.purple, theme, onTab: () => _showAppearanceModal(theme, _.theme));
74+
// return Text(_.theme);
75+
}),
6976
SizedBox(height: 8),
70-
_buildListTile('Language', Icons.language, 'English', Colors.orange, theme),
77+
_buildListTile('Language', Icons.language, 'English', Colors.orange, theme, onTab: () {}),
7178
SizedBox(height: 8),
72-
_buildListTile('Notifications', Icons.notifications_outlined, '', Colors.blue, theme),
79+
_buildListTile('Notifications', Icons.notifications_outlined, '', Colors.blue, theme, onTab: () {}),
7380
SizedBox(height: 8),
74-
_buildListTile('Help', Icons.help, '', Colors.green, theme),
81+
_buildListTile('Help', Icons.help, '', Colors.green, theme, onTab: () {}),
7582
SizedBox(height: 8),
76-
_buildListTile('Logout', Icons.exit_to_app, '', Colors.red, theme),
83+
_buildListTile('Logout', Icons.exit_to_app, '', Colors.red, theme, onTab: () {}),
7784

7885
],
7986
),
@@ -85,7 +92,7 @@ class UserTab extends StatelessWidget {
8592
);
8693
}
8794

88-
Widget _buildListTile(String title, IconData icon, String trailing, Color color, theme) {
95+
Widget _buildListTile(String title, IconData icon, String trailing, Color color, theme, {onTab}) {
8996
return ListTile(
9097
contentPadding: EdgeInsets.all(0),
9198
leading: Container(
@@ -110,8 +117,60 @@ class UserTab extends StatelessWidget {
110117
],
111118
),
112119
),
113-
onTap: () {
114-
},
120+
onTap: onTab
115121
);
116122
}
123+
124+
_showAppearanceModal(ThemeData theme, String current) {
125+
Get.bottomSheet(
126+
Container(
127+
padding: EdgeInsets.all(16),
128+
height: 320,
129+
decoration: BoxDecoration(
130+
color: Get.isDarkMode ? Colors.grey.shade900 : Colors.grey.shade200,
131+
borderRadius: BorderRadius.only(
132+
topLeft: Radius.circular(16),
133+
topRight: Radius.circular(16),
134+
)
135+
),
136+
child: Column(
137+
mainAxisSize: MainAxisSize.min,
138+
crossAxisAlignment: CrossAxisAlignment.start,
139+
children: [
140+
Text("Select a Theme", style: theme.textTheme.subtitle1,),
141+
SizedBox(height: 32),
142+
ListTile(
143+
leading: Icon(Icons.brightness_5, color: Colors.blue,),
144+
title: Text("Light", style: theme.textTheme.bodyText1),
145+
onTap: () {
146+
_themesController.setTheme('light');
147+
Get.back();
148+
},
149+
trailing: Icon(Icons.check, color: current == 'light' ? Colors.blue : Colors.transparent,),
150+
),
151+
SizedBox(height: 16),
152+
ListTile(
153+
leading: Icon(Icons.brightness_2, color: Colors.orange,),
154+
title: Text("Dark", style: theme.textTheme.bodyText1),
155+
onTap: () {
156+
_themesController.setTheme('dark');
157+
Get.back();
158+
},
159+
trailing: Icon(Icons.check, color: current == 'dark' ? Colors.orange : Colors.transparent,),
160+
),
161+
SizedBox(height: 16),
162+
ListTile(
163+
leading: Icon(Icons.brightness_3, color: Colors.purple,),
164+
title: Text("System", style: theme.textTheme.bodyText1),
165+
onTap: () {
166+
_themesController.setTheme('system');
167+
Get.back();
168+
},
169+
trailing: Icon(Icons.check, color: current == 'system' ? Colors.purple : Colors.transparent,),
170+
),
171+
],
172+
),
173+
)
174+
);
175+
}
117176
}

0 commit comments

Comments
 (0)