Skip to content

Commit 9290a23

Browse files
jamalihassan0307jamalihassan0307
committed
Add color theme images and update theme settings screen
- Added 8 new color-themed background images in assets/themeImages - Expanded ThemeSettingsScreen with additional color theme presets - Integrated new color theme images into theme selection options - Enhanced theme customization with more color and background variety - Updated theme settings to support more diverse visual styles
1 parent 70e9433 commit 9290a23

21 files changed

+775
-402
lines changed

‎assets/themeImages/color1.jpg

1.44 MB
Loading

‎assets/themeImages/color2.jpg

2.84 MB
Loading

‎assets/themeImages/color3.jpg

3.13 MB
Loading

‎assets/themeImages/color4.jpg

1.76 MB
Loading

‎assets/themeImages/color5.jpg

1.63 MB
Loading

‎assets/themeImages/color6.jpg

1.33 MB
Loading

‎assets/themeImages/color7.jpg

1.87 MB
Loading

‎assets/themeImages/color8.jpg

906 KB
Loading

‎lib/configs/components/loading_widget.dart

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
import 'package:flutter/material.dart';
2+
import 'package:flutter_chatgpt_text_and_image_processing/data/providers/theme_settings_provider.dart';
3+
import 'package:flutter_riverpod/flutter_riverpod.dart';
24

35
class LoadingWidget extends StatelessWidget {
4-
const LoadingWidget({super.key});
6+
final WidgetRef ref;
7+
8+
const LoadingWidget({super.key, required this.ref});
59

610
@override
711
Widget build(BuildContext context) {
8-
return Center(
9-
child: Image.asset(
10-
'assets/loading.gif',
11-
height: 200,
12-
width: 200,
13-
),
12+
final themeSettings = ref.watch(themeSettingsProvider);
13+
return CircularProgressIndicator(
14+
valueColor: AlwaysStoppedAnimation<Color>(themeSettings.primaryColor),
1415
);
1516
}
1617
}

‎lib/data/models/theme_settings.dart

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,17 @@ class ThemeSettings {
66
final Color secondaryColor;
77
final Color systemBubbleColor;
88
final Color userBubbleColor;
9+
final Color textColor;
10+
final Color textColorSecondary;
911

1012
const ThemeSettings({
1113
required this.backgroundImage,
1214
required this.primaryColor,
1315
required this.secondaryColor,
1416
required this.systemBubbleColor,
1517
required this.userBubbleColor,
18+
required this.textColor,
19+
required this.textColorSecondary,
1620
});
1721

1822
ThemeSettings copyWith({
@@ -21,13 +25,17 @@ class ThemeSettings {
2125
Color? secondaryColor,
2226
Color? systemBubbleColor,
2327
Color? userBubbleColor,
28+
Color? textColor,
29+
Color? textColorSecondary,
2430
}) {
2531
return ThemeSettings(
2632
backgroundImage: backgroundImage ?? this.backgroundImage,
2733
primaryColor: primaryColor ?? this.primaryColor,
2834
secondaryColor: secondaryColor ?? this.secondaryColor,
2935
systemBubbleColor: systemBubbleColor ?? this.systemBubbleColor,
3036
userBubbleColor: userBubbleColor ?? this.userBubbleColor,
37+
textColor: textColor ?? this.textColor,
38+
textColorSecondary: textColorSecondary ?? this.textColorSecondary,
3139
);
3240
}
3341

@@ -38,6 +46,8 @@ class ThemeSettings {
3846
secondaryColor: Color(json['secondaryColor'] as int),
3947
systemBubbleColor: Color(json['systemBubbleColor'] as int),
4048
userBubbleColor: Color(json['userBubbleColor'] as int),
49+
textColor: Color(json['textColor'] as int),
50+
textColorSecondary: Color(json['textColorSecondary'] as int),
4151
);
4252
}
4353

@@ -47,5 +57,7 @@ class ThemeSettings {
4757
'secondaryColor': secondaryColor.value,
4858
'systemBubbleColor': systemBubbleColor.value,
4959
'userBubbleColor': userBubbleColor.value,
60+
'textColor': textColor.value,
61+
'textColorSecondary': textColorSecondary.value,
5062
};
5163
}

‎lib/data/providers/theme_settings_provider.dart

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ class ThemeSettingsNotifier extends StateNotifier<ThemeSettings> {
2424
secondaryColor: Colors.teal,
2525
systemBubbleColor: Color(0xFF444654),
2626
userBubbleColor: Color(0xFF343541),
27+
textColor: Colors.white,
28+
textColorSecondary: Colors.white70,
2729
);
2830

2931
Future<void> _initializeSettings() async {
@@ -61,12 +63,16 @@ class ThemeSettingsNotifier extends StateNotifier<ThemeSettings> {
6163
Color? secondaryColor,
6264
Color? systemBubbleColor,
6365
Color? userBubbleColor,
66+
Color? textColor,
67+
Color? textColorSecondary,
6468
}) async {
6569
final newSettings = state.copyWith(
6670
primaryColor: primaryColor,
6771
secondaryColor: secondaryColor,
6872
systemBubbleColor: systemBubbleColor,
6973
userBubbleColor: userBubbleColor,
74+
textColor: textColor,
75+
textColorSecondary: textColorSecondary,
7076
);
7177
await updateSettings(newSettings);
7278
}

‎lib/data/view/auth/login_screen.dart

Lines changed: 38 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import '../../../configs/theme/app_theme.dart';
88
import '../../../data/view/auth/widgets/saved_users_bottom_sheet.dart';
99
import '../../../data/view/auth/widgets/save_user_bottom_sheet.dart';
1010
import '../../../data/services/shared_prefs_service.dart';
11+
import '../../providers/theme_settings_provider.dart';
1112

1213
class LoginScreen extends ConsumerStatefulWidget {
1314
const LoginScreen({super.key});
@@ -32,17 +33,26 @@ class _LoginScreenState extends ConsumerState<LoginScreen> {
3233

3334
@override
3435
Widget build(BuildContext context) {
36+
final themeSettings = ref.watch(themeSettingsProvider);
37+
3538
return Scaffold(
3639
body: Stack(
3740
children: [
3841
// Background Image
3942
Positioned.fill(
40-
child: CachedNetworkImage(
41-
imageUrl: '${AppImages.aiBackground}?auto=format&fit=crop&w=800&q=80',
42-
fit: BoxFit.cover,
43-
color: Colors.black.withOpacity(0.7),
44-
colorBlendMode: BlendMode.darken,
45-
),
43+
child: themeSettings.backgroundImage != null
44+
? Image.asset(
45+
themeSettings.backgroundImage!,
46+
fit: BoxFit.cover,
47+
// color: Colors.black.withOpacity(0.7),
48+
// colorBlendMode: BlendMode.darken,
49+
)
50+
: CachedNetworkImage(
51+
imageUrl: '${AppImages.aiBackground}?auto=format&fit=crop&w=800&q=80',
52+
fit: BoxFit.cover,
53+
color: Colors.black.withOpacity(0.7),
54+
colorBlendMode: BlendMode.darken,
55+
),
4656
),
4757
// Content
4858
SafeArea(
@@ -61,15 +71,15 @@ class _LoginScreenState extends ConsumerState<LoginScreen> {
6171
Text(
6272
'Welcome Back',
6373
style: Theme.of(context).textTheme.headlineMedium?.copyWith(
64-
color: Colors.white,
74+
color: themeSettings.textColor,
6575
fontWeight: FontWeight.bold,
6676
),
6777
),
6878
const SizedBox(height: 8),
6979
Text(
7080
'Login to continue your AI journey',
7181
style: Theme.of(context).textTheme.titleMedium?.copyWith(
72-
color: Colors.white70,
82+
color: themeSettings.textColorSecondary,
7383
),
7484
),
7585
const SizedBox(height: 48),
@@ -85,21 +95,21 @@ class _LoginScreenState extends ConsumerState<LoginScreen> {
8595
// Email Field
8696
TextFormField(
8797
controller: _emailController,
88-
style: const TextStyle(color: Colors.white),
98+
style: TextStyle(color: themeSettings.textColor),
8999
decoration: InputDecoration(
90100
labelText: 'Email',
91-
labelStyle: const TextStyle(color: Colors.white70),
92-
prefixIcon: const Icon(Icons.email, color: Colors.white70),
101+
labelStyle: TextStyle(color: themeSettings.textColorSecondary),
102+
prefixIcon: Icon(Icons.email, color: themeSettings.textColorSecondary),
93103
border: OutlineInputBorder(
94104
borderRadius: BorderRadius.circular(12),
95105
),
96106
enabledBorder: OutlineInputBorder(
97107
borderRadius: BorderRadius.circular(12),
98-
borderSide: const BorderSide(color: Colors.white30),
108+
borderSide: BorderSide(color: themeSettings.textColorSecondary.withOpacity(0.3)),
99109
),
100110
focusedBorder: OutlineInputBorder(
101111
borderRadius: BorderRadius.circular(12),
102-
borderSide: BorderSide(color: AppTheme.primaryColor),
112+
borderSide: BorderSide(color: themeSettings.primaryColor),
103113
),
104114
),
105115
keyboardType: TextInputType.emailAddress,
@@ -129,32 +139,28 @@ class _LoginScreenState extends ConsumerState<LoginScreen> {
129139
// Password Field
130140
TextFormField(
131141
controller: _passwordController,
132-
style: const TextStyle(color: Colors.white),
142+
style: TextStyle(color: themeSettings.textColor),
133143
decoration: InputDecoration(
134144
labelText: 'Password',
135-
labelStyle: const TextStyle(color: Colors.white70),
136-
prefixIcon: const Icon(Icons.lock, color: Colors.white70),
145+
labelStyle: TextStyle(color: themeSettings.textColorSecondary),
146+
prefixIcon: Icon(Icons.lock, color: themeSettings.textColorSecondary),
137147
border: OutlineInputBorder(
138148
borderRadius: BorderRadius.circular(12),
139149
),
140150
enabledBorder: OutlineInputBorder(
141151
borderRadius: BorderRadius.circular(12),
142-
borderSide: const BorderSide(color: Colors.white30),
152+
borderSide: BorderSide(color: themeSettings.textColorSecondary.withOpacity(0.3)),
143153
),
144154
focusedBorder: OutlineInputBorder(
145155
borderRadius: BorderRadius.circular(12),
146-
borderSide: BorderSide(color: AppTheme.primaryColor),
156+
borderSide: BorderSide(color: themeSettings.primaryColor),
147157
),
148158
suffixIcon: IconButton(
149159
icon: Icon(
150160
_isPasswordVisible ? Icons.visibility : Icons.visibility_off,
151-
color: Colors.white70,
161+
color: themeSettings.textColorSecondary,
152162
),
153-
onPressed: () {
154-
setState(() {
155-
_isPasswordVisible = !_isPasswordVisible;
156-
});
157-
},
163+
onPressed: () => setState(() => _isPasswordVisible = !_isPasswordVisible),
158164
),
159165
),
160166
obscureText: !_isPasswordVisible,
@@ -174,26 +180,28 @@ class _LoginScreenState extends ConsumerState<LoginScreen> {
174180
ElevatedButton(
175181
onPressed: _isLoading ? null : _handleLogin,
176182
style: ElevatedButton.styleFrom(
177-
backgroundColor: AppTheme.primaryColor,
183+
backgroundColor: themeSettings.primaryColor,
184+
foregroundColor: themeSettings.textColor,
178185
padding: const EdgeInsets.symmetric(vertical: 16),
179186
shape: RoundedRectangleBorder(
180187
borderRadius: BorderRadius.circular(12),
181188
),
182189
),
183190
child: _isLoading
184-
? const SizedBox(
191+
? SizedBox(
185192
height: 20,
186193
width: 20,
187194
child: CircularProgressIndicator(
188195
strokeWidth: 2,
189-
valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
196+
valueColor: AlwaysStoppedAnimation<Color>(themeSettings.textColor),
190197
),
191198
)
192-
: const Text(
199+
: Text(
193200
'Login',
194201
style: TextStyle(
195202
fontSize: 18,
196203
fontWeight: FontWeight.bold,
204+
color: themeSettings.textColor,
197205
),
198206
),
199207
),
@@ -204,9 +212,9 @@ class _LoginScreenState extends ConsumerState<LoginScreen> {
204212
onPressed: () {
205213
Navigator.pushNamedAndRemoveUntil(context, RoutesName.signup, (route) => false);
206214
},
207-
child: const Text(
215+
child: Text(
208216
"Don't have an account? Sign up",
209-
style: TextStyle(color: Colors.white70),
217+
style: TextStyle(color: themeSettings.textColorSecondary),
210218
),
211219
),
212220
],

0 commit comments

Comments
 (0)