Skip to content

Commit a9a1c04

Browse files
fullenifulleni
authored
Merge pull request #144 from flutter-news-app-full-source-code/refactor/app-config-ui-enhancement
Refactor/app config UI enhancement
2 parents 3b30eb9 + 7773304 commit a9a1c04

21 files changed

+1255
-318
lines changed

‎lib/app_configuration/view/tabs/features_configuration_tab.dart‎

Lines changed: 102 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,27 @@ class _FeaturesConfigurationTabState extends State<FeaturesConfigurationTab> {
4949
super.dispose();
5050
}
5151

52+
String _getDecoratorDescription(
53+
BuildContext context,
54+
FeedDecoratorType type,
55+
) {
56+
final l10n = AppLocalizationsX(context).l10n;
57+
switch (type) {
58+
case FeedDecoratorType.linkAccount:
59+
return l10n.feedDecoratorLinkAccountDescription;
60+
case FeedDecoratorType.upgrade:
61+
return l10n.feedDecoratorUpgradeDescription;
62+
case FeedDecoratorType.rateApp:
63+
return l10n.feedDecoratorRateAppDescription;
64+
case FeedDecoratorType.enableNotifications:
65+
return l10n.feedDecoratorEnableNotificationsDescription;
66+
case FeedDecoratorType.suggestedTopics:
67+
return l10n.feedDecoratorSuggestedTopicsDescription;
68+
case FeedDecoratorType.suggestedSources:
69+
return l10n.feedDecoratorSuggestedSourcesDescription;
70+
}
71+
}
72+
5273
@override
5374
Widget build(BuildContext context) {
5475
final l10n = AppLocalizationsX(context).l10n;
@@ -62,14 +83,28 @@ class _FeaturesConfigurationTabState extends State<FeaturesConfigurationTab> {
6283
builder: (context, expandedIndex, child) {
6384
const tileIndex = 0;
6485
return ExpansionTile(
86+
leading: Icon(
87+
Icons.paid_outlined,
88+
color: Theme.of(context).colorScheme.onSurface.withOpacity(
89+
0.7,
90+
),
91+
),
6592
key: ValueKey('advertisementsTile_$expandedIndex'),
6693
title: Text(l10n.advertisementsTab),
67-
onExpansionChanged: (isExpanded) {
94+
subtitle: Text(
95+
l10n.advertisementsDescription,
96+
style: Theme.of(context).textTheme.bodySmall?.copyWith(
97+
color: Theme.of(
98+
context,
99+
).colorScheme.onSurface.withOpacity(0.7),
100+
),
101+
),
102+
onExpansionChanged: (bool isExpanded) {
68103
_expandedTileIndex.value = isExpanded ? tileIndex : null;
69104
},
70105
initiallyExpanded: expandedIndex == tileIndex,
71106
childrenPadding: const EdgeInsetsDirectional.only(
72-
start: AppSpacing.lg,
107+
start: AppSpacing.xxl,
73108
top: AppSpacing.md,
74109
bottom: AppSpacing.md,
75110
),
@@ -106,14 +141,28 @@ class _FeaturesConfigurationTabState extends State<FeaturesConfigurationTab> {
106141
builder: (context, expandedIndex, child) {
107142
const tileIndex = 1;
108143
return ExpansionTile(
144+
leading: Icon(
145+
Icons.notifications_active_outlined,
146+
color: Theme.of(context).colorScheme.onSurface.withOpacity(
147+
0.7,
148+
),
149+
),
109150
key: ValueKey('pushNotificationsTile_$expandedIndex'),
110151
title: Text(l10n.notificationsTab),
111-
onExpansionChanged: (isExpanded) {
152+
subtitle: Text(
153+
l10n.notificationsDescription,
154+
style: Theme.of(context).textTheme.bodySmall?.copyWith(
155+
color: Theme.of(
156+
context,
157+
).colorScheme.onSurface.withOpacity(0.7),
158+
),
159+
),
160+
onExpansionChanged: (bool isExpanded) {
112161
_expandedTileIndex.value = isExpanded ? tileIndex : null;
113162
},
114163
initiallyExpanded: expandedIndex == tileIndex,
115164
childrenPadding: const EdgeInsetsDirectional.only(
116-
start: AppSpacing.lg,
165+
start: AppSpacing.xxl,
117166
top: AppSpacing.md,
118167
bottom: AppSpacing.md,
119168
),
@@ -135,37 +184,50 @@ class _FeaturesConfigurationTabState extends State<FeaturesConfigurationTab> {
135184
builder: (context, expandedIndex, child) {
136185
const tileIndex = 2;
137186
return ExpansionTile(
187+
leading: Icon(
188+
Icons.dynamic_feed_outlined,
189+
color: Theme.of(context).colorScheme.onSurface.withOpacity(
190+
0.7,
191+
),
192+
),
138193
key: ValueKey('feedTile_$expandedIndex'),
139194
title: Text(l10n.feedTab),
140-
onExpansionChanged: (isExpanded) {
195+
subtitle: Text(
196+
l10n.feedDescription,
197+
style: Theme.of(context).textTheme.bodySmall?.copyWith(
198+
color: Theme.of(
199+
context,
200+
).colorScheme.onSurface.withOpacity(0.7),
201+
),
202+
),
203+
onExpansionChanged: (bool isExpanded) {
141204
_expandedTileIndex.value = isExpanded ? tileIndex : null;
142205
},
143206
initiallyExpanded: expandedIndex == tileIndex,
144207
childrenPadding: const EdgeInsetsDirectional.only(
145-
start: AppSpacing.lg,
208+
start: AppSpacing.xxl,
146209
top: AppSpacing.md,
147210
bottom: AppSpacing.md,
148211
),
149212
expandedCrossAxisAlignment: CrossAxisAlignment.start,
150213
children: [
151214
ExpansionTile(
152215
title: Text(l10n.feedItemClickBehaviorTitle),
216+
subtitle: Text(
217+
l10n.feedItemClickBehaviorDescription,
218+
style: Theme.of(context).textTheme.bodySmall?.copyWith(
219+
color: Theme.of(
220+
context,
221+
).colorScheme.onSurface.withOpacity(0.7),
222+
),
223+
),
153224
childrenPadding: const EdgeInsetsDirectional.only(
154225
start: AppSpacing.lg,
155226
top: AppSpacing.md,
156227
bottom: AppSpacing.md,
157228
),
158229
expandedCrossAxisAlignment: CrossAxisAlignment.start,
159230
children: [
160-
Text(
161-
l10n.feedItemClickBehaviorDescription,
162-
style: Theme.of(context).textTheme.bodySmall?.copyWith(
163-
color: Theme.of(
164-
context,
165-
).colorScheme.onSurface.withOpacity(0.7),
166-
),
167-
),
168-
const SizedBox(height: AppSpacing.lg),
169231
Align(
170232
alignment: AlignmentDirectional.centerStart,
171233
child: SegmentedButton<FeedItemClickBehavior>(
@@ -203,27 +265,35 @@ class _FeaturesConfigurationTabState extends State<FeaturesConfigurationTab> {
203265
const SizedBox(height: AppSpacing.lg),
204266
ExpansionTile(
205267
title: Text(l10n.feedDecoratorsTitle),
268+
subtitle: Text(
269+
l10n.feedDecoratorsDescription,
270+
style: Theme.of(context).textTheme.bodySmall?.copyWith(
271+
color: Theme.of(
272+
context,
273+
).colorScheme.onSurface.withOpacity(0.7),
274+
),
275+
),
206276
childrenPadding: const EdgeInsetsDirectional.only(
207277
start: AppSpacing.lg,
208278
top: AppSpacing.md,
209279
bottom: AppSpacing.md,
210280
),
211281
expandedCrossAxisAlignment: CrossAxisAlignment.start,
212282
children: [
213-
Text(
214-
l10n.feedDecoratorsDescription,
215-
style: Theme.of(context).textTheme.bodySmall?.copyWith(
216-
color: Theme.of(
217-
context,
218-
).colorScheme.onSurface.withOpacity(0.7),
219-
),
220-
),
221-
const SizedBox(height: AppSpacing.lg),
222283
for (final decoratorType in FeedDecoratorType.values)
223284
Padding(
224285
padding: const EdgeInsets.only(bottom: AppSpacing.md),
225286
child: ExpansionTile(
226287
title: Text(decoratorType.l10n(context)),
288+
subtitle: Text(
289+
_getDecoratorDescription(context, decoratorType),
290+
style: Theme.of(context).textTheme.bodySmall
291+
?.copyWith(
292+
color: Theme.of(
293+
context,
294+
).colorScheme.onSurface.withOpacity(0.7),
295+
),
296+
),
227297
childrenPadding: const EdgeInsetsDirectional.only(
228298
start: AppSpacing.xl,
229299
top: AppSpacing.md,
@@ -253,6 +323,12 @@ class _FeaturesConfigurationTabState extends State<FeaturesConfigurationTab> {
253323
builder: (context, expandedIndex, child) {
254324
const tileIndex = 3;
255325
return ExpansionTile(
326+
leading: Icon(
327+
Icons.groups_outlined,
328+
color: Theme.of(context).colorScheme.onSurface.withOpacity(
329+
0.7,
330+
),
331+
),
256332
key: ValueKey('communityTile_$expandedIndex'),
257333
title: Text(l10n.communityAndEngagementTitle),
258334
subtitle: Text(
@@ -263,12 +339,12 @@ class _FeaturesConfigurationTabState extends State<FeaturesConfigurationTab> {
263339
).colorScheme.onSurface.withOpacity(0.7),
264340
),
265341
),
266-
onExpansionChanged: (isExpanded) {
342+
onExpansionChanged: (bool isExpanded) {
267343
_expandedTileIndex.value = isExpanded ? tileIndex : null;
268344
},
269345
initiallyExpanded: expandedIndex == tileIndex,
270346
childrenPadding: const EdgeInsetsDirectional.only(
271-
start: AppSpacing.lg,
347+
start: AppSpacing.xxl,
272348
top: AppSpacing.md,
273349
bottom: AppSpacing.md,
274350
),

‎lib/app_configuration/view/tabs/system_configuration_tab.dart‎

Lines changed: 46 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,21 +53,43 @@ class _SystemConfigurationTabState extends State<SystemConfigurationTab> {
5353
builder: (context, expandedIndex, child) {
5454
const tileIndex = 0;
5555
return ExpansionTile(
56+
leading: Icon(
57+
Icons.system_update_alt_outlined,
58+
color: Theme.of(context).colorScheme.onSurface.withOpacity(
59+
0.7,
60+
),
61+
),
5662
key: ValueKey('appStatusAndUpdatesTile_$expandedIndex'),
5763
title: Text(l10n.appStatusAndUpdatesTitle),
64+
subtitle: Text(
65+
l10n.appStatusAndUpdatesDescription,
66+
style: Theme.of(context).textTheme.bodySmall?.copyWith(
67+
color: Theme.of(
68+
context,
69+
).colorScheme.onSurface.withOpacity(0.7),
70+
),
71+
),
5872
onExpansionChanged: (isExpanded) {
5973
_expandedTileIndex.value = isExpanded ? tileIndex : null;
6074
},
6175
initiallyExpanded: expandedIndex == tileIndex,
6276
childrenPadding: const EdgeInsetsDirectional.only(
63-
start: AppSpacing.lg,
77+
start: AppSpacing.xxl,
6478
top: AppSpacing.md,
6579
bottom: AppSpacing.md,
6680
),
6781
expandedCrossAxisAlignment: CrossAxisAlignment.start,
6882
children: [
6983
ExpansionTile(
7084
title: Text(l10n.maintenanceModeTitle),
85+
subtitle: Text(
86+
l10n.maintenanceModeDescription,
87+
style: Theme.of(context).textTheme.bodySmall?.copyWith(
88+
color: Theme.of(
89+
context,
90+
).colorScheme.onSurface.withOpacity(0.7),
91+
),
92+
),
7193
childrenPadding: const EdgeInsetsDirectional.only(
7294
start: AppSpacing.lg,
7395
top: AppSpacing.md,
@@ -99,6 +121,14 @@ class _SystemConfigurationTabState extends State<SystemConfigurationTab> {
99121
const SizedBox(height: AppSpacing.lg),
100122
ExpansionTile(
101123
title: Text(l10n.appUpdateManagementTitle),
124+
subtitle: Text(
125+
l10n.updateConfigDescription,
126+
style: Theme.of(context).textTheme.bodySmall?.copyWith(
127+
color: Theme.of(
128+
context,
129+
).colorScheme.onSurface.withOpacity(0.7),
130+
),
131+
),
102132
childrenPadding: const EdgeInsetsDirectional.only(
103133
start: AppSpacing.lg,
104134
top: AppSpacing.md,
@@ -122,14 +152,28 @@ class _SystemConfigurationTabState extends State<SystemConfigurationTab> {
122152
builder: (context, expandedIndex, child) {
123153
const tileIndex = 1;
124154
return ExpansionTile(
155+
leading: Icon(
156+
Icons.link_outlined,
157+
color: Theme.of(context).colorScheme.onSurface.withOpacity(
158+
0.7,
159+
),
160+
),
125161
key: ValueKey('appUrlsTile_$expandedIndex'),
126162
title: Text(l10n.appUrlsTitle),
163+
subtitle: Text(
164+
l10n.appUrlsDescription,
165+
style: Theme.of(context).textTheme.bodySmall?.copyWith(
166+
color: Theme.of(
167+
context,
168+
).colorScheme.onSurface.withOpacity(0.7),
169+
),
170+
),
127171
onExpansionChanged: (isExpanded) {
128172
_expandedTileIndex.value = isExpanded ? tileIndex : null;
129173
},
130174
initiallyExpanded: expandedIndex == tileIndex,
131175
childrenPadding: const EdgeInsetsDirectional.only(
132-
start: AppSpacing.lg,
176+
start: AppSpacing.xxl,
133177
top: AppSpacing.md,
134178
bottom: AppSpacing.md,
135179
),

‎lib/app_configuration/view/tabs/user_configuration_tab.dart‎

Lines changed: 34 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import 'package:core/core.dart';
22
import 'package:flutter/material.dart';
3-
import 'package:flutter_news_app_web_dashboard_full_source_code/app_configuration/widgets/saved_filter_limits_section.dart';
3+
import 'package:flutter_news_app_web_dashboard_full_source_code/app_configuration/widgets/saved_filter_limits_form.dart';
44
import 'package:flutter_news_app_web_dashboard_full_source_code/app_configuration/widgets/user_limits_config_form.dart';
55
import 'package:flutter_news_app_web_dashboard_full_source_code/l10n/l10n.dart';
66
import 'package:ui_kit/ui_kit.dart';
@@ -52,21 +52,43 @@ class _UserConfigurationTabState extends State<UserConfigurationTab> {
5252
builder: (context, expandedIndex, child) {
5353
const tileIndex = 0;
5454
return ExpansionTile(
55+
leading: Icon(
56+
Icons.manage_accounts_outlined,
57+
color: Theme.of(context).colorScheme.onSurface.withOpacity(
58+
0.7,
59+
),
60+
),
5561
key: ValueKey('userLimitsTile_$expandedIndex'),
5662
title: Text(l10n.userLimitsTitle),
63+
subtitle: Text(
64+
l10n.userLimitsDescription,
65+
style: Theme.of(context).textTheme.bodySmall?.copyWith(
66+
color: Theme.of(
67+
context,
68+
).colorScheme.onSurface.withOpacity(0.7),
69+
),
70+
),
5771
onExpansionChanged: (isExpanded) {
5872
_expandedTileIndex.value = isExpanded ? tileIndex : null;
5973
},
6074
initiallyExpanded: expandedIndex == tileIndex,
6175
childrenPadding: const EdgeInsetsDirectional.only(
62-
start: AppSpacing.lg,
76+
start: AppSpacing.xxl,
6377
top: AppSpacing.md,
6478
bottom: AppSpacing.md,
6579
),
6680
expandedCrossAxisAlignment: CrossAxisAlignment.start,
6781
children: [
6882
ExpansionTile(
6983
title: Text(l10n.userContentLimitsTitle),
84+
subtitle: Text(
85+
l10n.userContentLimitsDescription,
86+
style: Theme.of(context).textTheme.bodySmall?.copyWith(
87+
color: Theme.of(
88+
context,
89+
).colorScheme.onSurface.withOpacity(0.7),
90+
),
91+
),
7092
childrenPadding: const EdgeInsetsDirectional.only(
7193
start: AppSpacing.lg,
7294
top: AppSpacing.md,
@@ -81,20 +103,16 @@ class _UserConfigurationTabState extends State<UserConfigurationTab> {
81103
],
82104
),
83105
const SizedBox(height: AppSpacing.lg),
84-
ExpansionTile(
85-
title: Text(l10n.savedFeedFilterLimitsTitle),
86-
childrenPadding: const EdgeInsetsDirectional.only(
87-
start: AppSpacing.lg,
88-
top: AppSpacing.md,
89-
bottom: AppSpacing.md,
90-
),
91-
expandedCrossAxisAlignment: CrossAxisAlignment.start,
92-
children: [
93-
SavedFilterLimitsSection(
94-
remoteConfig: widget.remoteConfig,
95-
onConfigChanged: widget.onConfigChanged,
96-
),
97-
],
106+
SavedFilterLimitsForm(
107+
remoteConfig: widget.remoteConfig,
108+
onConfigChanged: widget.onConfigChanged,
109+
filterType: SavedFilterType.headline,
110+
),
111+
const SizedBox(height: AppSpacing.lg),
112+
SavedFilterLimitsForm(
113+
remoteConfig: widget.remoteConfig,
114+
onConfigChanged: widget.onConfigChanged,
115+
filterType: SavedFilterType.source,
98116
),
99117
],
100118
);

0 commit comments

Comments
 (0)