Merge pull request #129 from flutter-news-app-full-source-code/refactore/ui-enhancement

fulleni · web-flow · commit 6a0fd2b14a0f · 2025-09-28T12:19:01.000+01:00
Refactore/UI enhancement
diff --git a/lib/app/view/app.dart b/lib/app/view/app.dart
@@ -291,13 +291,13 @@ class _AppViewState extends State<_AppView> {
             return MaterialApp(
               debugShowCheckedModeBanner: false,
               theme: lightTheme(
-                scheme: FlexScheme.material,
+                scheme: state.flexScheme,
                 appTextScaleFactor: state.appTextScaleFactor,
                 appFontWeight: state.appFontWeight,
                 fontFamily: state.fontFamily,
               ),
               darkTheme: darkTheme(
-                scheme: FlexScheme.material,
+                scheme: state.flexScheme,
                 appTextScaleFactor: state.appTextScaleFactor,
                 appFontWeight: state.appFontWeight,
                 fontFamily: state.fontFamily,
@@ -358,13 +358,13 @@ class _AppViewState extends State<_AppView> {
             return MaterialApp(
               debugShowCheckedModeBanner: false,
               theme: lightTheme(
-                scheme: FlexScheme.material,
+                scheme: state.flexScheme,
                 appTextScaleFactor: state.appTextScaleFactor,
                 appFontWeight: state.appFontWeight,
                 fontFamily: state.fontFamily,
               ),
               darkTheme: darkTheme(
-                scheme: FlexScheme.material,
+                scheme: state.flexScheme,
                 appTextScaleFactor: state.appTextScaleFactor,
                 appFontWeight: state.appFontWeight,
                 fontFamily: state.fontFamily,
@@ -385,13 +385,13 @@ class _AppViewState extends State<_AppView> {
             return MaterialApp(
               debugShowCheckedModeBanner: false,
               theme: lightTheme(
-                scheme: FlexScheme.material,
+                scheme: state.flexScheme,
                 appTextScaleFactor: state.appTextScaleFactor,
                 appFontWeight: state.appFontWeight,
                 fontFamily: state.fontFamily,
               ),
               darkTheme: darkTheme(
-                scheme: FlexScheme.material,
+                scheme: state.flexScheme,
                 appTextScaleFactor: state.appTextScaleFactor,
                 appFontWeight: state.appFontWeight,
                 fontFamily: state.fontFamily,
@@ -417,13 +417,13 @@ class _AppViewState extends State<_AppView> {
             return MaterialApp(
               debugShowCheckedModeBanner: false,
               theme: lightTheme(
-                scheme: FlexScheme.material,
+                scheme: state.flexScheme,
                 appTextScaleFactor: state.appTextScaleFactor,
                 appFontWeight: state.appFontWeight,
                 fontFamily: state.fontFamily,
               ),
               darkTheme: darkTheme(
-                scheme: FlexScheme.material,
+                scheme: state.flexScheme,
                 appTextScaleFactor: state.appTextScaleFactor,
                 appFontWeight: state.appFontWeight,
                 fontFamily: state.fontFamily,
diff --git a/lib/entity_details/view/entity_details_page.dart b/lib/entity_details/view/entity_details_page.dart
@@ -156,15 +156,6 @@ class _EntityDetailsViewState extends State<EntityDetailsView> {
             appBarTitleText = l10n.detailsPageTitle;
           }
 
-          final description = state.entity is Topic
-              ? (state.entity! as Topic).description
-              : state.entity is Source
-              ? (state.entity! as Source).description
-              : state.entity is Country
-              ? (state.entity! as Country)
-                    .name // Using name as description for country
-              : null;
-
           final followButton = IconButton(
             icon: Icon(
               state.isFollowing ? Icons.check_circle : Icons.add_circle_outline,
@@ -191,28 +182,29 @@ class _EntityDetailsViewState extends State<EntityDetailsView> {
             children: [
               if (entityIconUrl != null)
                 Padding(
-                  padding: const EdgeInsets.only(right: AppSpacing.sm),
+                  padding: Directionality.of(context) == TextDirection.ltr
+                      ? const EdgeInsets.only(right: AppSpacing.md)
+                      : const EdgeInsets.only(left: AppSpacing.md),
                   child: ClipRRect(
                     borderRadius: BorderRadius.circular(AppSpacing.xs),
                     child: Image.network(
                       entityIconUrl,
-                      width: kToolbarHeight - AppSpacing.lg,
-                      height: kToolbarHeight - AppSpacing.lg,
+                      width: AppSpacing.xxl,
+                      height: AppSpacing.xxl,
                       fit: BoxFit.contain,
-                      errorBuilder: (context, error, stackTrace) => Icon(
-                        appBarIconData ?? Icons.info_outline,
-                        size: kToolbarHeight - AppSpacing.xl,
-                        color: colorScheme.onSurfaceVariant,
-                      ),
+                      errorBuilder: (context, error, stackTrace) =>
+                          const SizedBox(),
                     ),
                   ),
                 )
-              else if (appBarIconData != null)
+              else if (state.entity is Source && appBarIconData != null)
                 Padding(
-                  padding: const EdgeInsets.only(right: AppSpacing.sm),
+                  padding: Directionality.of(context) == TextDirection.ltr
+                      ? const EdgeInsets.only(right: AppSpacing.md)
+                      : const EdgeInsets.only(left: AppSpacing.md),
                   child: Icon(
                     appBarIconData,
-                    size: kToolbarHeight - AppSpacing.xl,
+                    size: AppSpacing.xxl,
                     color: colorScheme.onSurface,
                   ),
                 ),
@@ -251,33 +243,6 @@ class _EntityDetailsViewState extends State<EntityDetailsView> {
                   const SizedBox(width: AppSpacing.sm),
                 ],
               ),
-              SliverPadding(
-                padding: const EdgeInsets.all(AppSpacing.paddingMedium),
-                sliver: SliverList(
-                  delegate: SliverChildListDelegate([
-                    if (description != null && description.isNotEmpty) ...[
-                      Text(
-                        description,
-                        style: textTheme.bodyLarge?.copyWith(
-                          color: colorScheme.onSurfaceVariant,
-                          height: 1.5,
-                        ),
-                      ),
-                      const SizedBox(height: AppSpacing.lg),
-                    ],
-                    if (state.feedItems.isNotEmpty ||
-                        state.status == EntityDetailsStatus.loadingMore) ...[
-                      Text(
-                        l10n.headlinesSectionTitle,
-                        style: textTheme.titleLarge?.copyWith(
-                          fontWeight: FontWeight.bold,
-                        ),
-                      ),
-                      const Divider(height: AppSpacing.lg, thickness: 1),
-                    ],
-                  ]),
-                ),
-              ),
               if (state.feedItems.isEmpty &&
                   state.status != EntityDetailsStatus.initial &&
                   state.status != EntityDetailsStatus.loadingMore &&
@@ -299,8 +264,10 @@ class _EntityDetailsViewState extends State<EntityDetailsView> {
                 )
               else
                 SliverPadding(
-                  padding: const EdgeInsets.symmetric(
-                    horizontal: AppSpacing.paddingMedium,
+                  padding: const EdgeInsets.only(
+                    top: AppSpacing.paddingMedium,
+                    left: AppSpacing.paddingMedium,
+                    right: AppSpacing.paddingMedium,
                   ),
                   sliver: SliverList.separated(
                     itemCount:
diff --git a/lib/l10n/app_localizations.dart b/lib/l10n/app_localizations.dart
@@ -1693,6 +1693,18 @@ abstract class AppLocalizations {
   /// In en, this message translates to:
   /// **'Loading Filters'**
   String get headlinesFeedFilterLoadingHeadline;
+
+  /// Title for the suggested topics content collection.
+  ///
+  /// In en, this message translates to:
+  /// **'Suggested Topics'**
+  String get suggestedTopicsTitle;
+
+  /// Title for the suggested sources content collection.
+  ///
+  /// In en, this message translates to:
+  /// **'Suggested Sources'**
+  String get suggestedSourcesTitle;
 }
 
 class _AppLocalizationsDelegate
diff --git a/lib/l10n/app_localizations_ar.dart b/lib/l10n/app_localizations_ar.dart
@@ -883,4 +883,10 @@ class AppLocalizationsAr extends AppLocalizations {
 
   @override
   String get headlinesFeedFilterLoadingHeadline => 'جاري تحميل الفلاتر';
+
+  @override
+  String get suggestedTopicsTitle => 'مواضيع مقترحة';
+
+  @override
+  String get suggestedSourcesTitle => 'مصادر مقترحة';
 }
diff --git a/lib/l10n/app_localizations_en.dart b/lib/l10n/app_localizations_en.dart
@@ -885,4 +885,10 @@ class AppLocalizationsEn extends AppLocalizations {
 
   @override
   String get headlinesFeedFilterLoadingHeadline => 'Loading Filters';
+
+  @override
+  String get suggestedTopicsTitle => 'Suggested Topics';
+
+  @override
+  String get suggestedSourcesTitle => 'Suggested Sources';
 }
diff --git a/lib/l10n/arb/app_ar.arb b/lib/l10n/arb/app_ar.arb
@@ -1152,5 +1152,13 @@
     "headlinesFeedFilterLoadingHeadline": "جاري تحميل الفلاتر",
     "@headlinesFeedFilterLoadingHeadline": {
         "description": "Headline for the loading state when fetching filter options on the headlines filter page."
+    },
+    "suggestedTopicsTitle": "مواضيع مقترحة",
+    "@suggestedTopicsTitle": {
+        "description": "عنوان لمجموعة المواضيع المقترحة."
+    },
+    "suggestedSourcesTitle": "مصادر مقترحة",
+    "@suggestedSourcesTitle": {
+        "description": "عنوان لمجموعة المصادر المقترحة."
     }
 }
diff --git a/lib/l10n/arb/app_en.arb b/lib/l10n/arb/app_en.arb
@@ -1152,5 +1152,13 @@
     "headlinesFeedFilterLoadingHeadline": "Loading Filters",
     "@headlinesFeedFilterLoadingHeadline": {
         "description": "Headline for the loading state when fetching filter options on the headlines filter page."
+    },
+    "suggestedTopicsTitle": "Suggested Topics",
+    "@suggestedTopicsTitle": {
+        "description": "Title for the suggested topics content collection."
+    },
+    "suggestedSourcesTitle": "Suggested Sources",
+    "@suggestedSourcesTitle": {
+        "description": "Title for the suggested sources content collection."
     }
 }
diff --git a/lib/shared/widgets/feed_decorators/content_collection_decorator_widget.dart b/lib/shared/widgets/feed_decorators/content_collection_decorator_widget.dart
@@ -43,6 +43,22 @@ class ContentCollectionDecoratorWidget extends StatelessWidget {
     final l10n = AppLocalizationsX(context).l10n;
     final theme = Theme.of(context);
 
+    String getTitle() {
+      switch (item.decoratorType) {
+        case FeedDecoratorType.suggestedTopics:
+          return l10n.suggestedTopicsTitle;
+        case FeedDecoratorType.suggestedSources:
+          return l10n.suggestedSourcesTitle;
+        // The following cases are for call-to-action types and should not
+        // appear in a content collection, but we handle them gracefully.
+        case FeedDecoratorType.linkAccount:
+        case FeedDecoratorType.upgrade:
+        case FeedDecoratorType.rateApp:
+        case FeedDecoratorType.enableNotifications:
+          return item.title;
+      }
+    }
+
     return Card(
       margin: const EdgeInsets.symmetric(
         horizontal: AppSpacing.lg,
@@ -58,7 +74,7 @@ class ContentCollectionDecoratorWidget extends StatelessWidget {
               children: [
                 Expanded(
                   child: Text(
-                    item.title,
+                    getTitle(),
                     style: theme.textTheme.titleLarge,
                     maxLines: 1,
                     overflow: TextOverflow.ellipsis,
diff --git a/lib/shared/widgets/feed_decorators/suggestion_item_widget.dart b/lib/shared/widgets/feed_decorators/suggestion_item_widget.dart
@@ -51,6 +51,7 @@ class SuggestionItemWidget extends StatelessWidget {
     }
 
     return Card(
+      color: theme.colorScheme.surfaceVariant,
       margin: const EdgeInsets.symmetric(horizontal: AppSpacing.sm),
       child: SizedBox(
         width: 160,
@@ -64,7 +65,7 @@ class SuggestionItemWidget extends StatelessWidget {
                 width: 64,
                 height: 64,
                 decoration: BoxDecoration(
-                  color: theme.colorScheme.surfaceVariant,
+                  color: theme.colorScheme.surface,
                   borderRadius: BorderRadius.circular(AppSpacing.sm),
                 ),
                 child: imageUrl.isNotEmpty
@@ -75,14 +76,14 @@ class SuggestionItemWidget extends StatelessWidget {
                           fit: BoxFit.cover,
                           errorBuilder: (context, error, stackTrace) => Icon(
                             Icons.broken_image,
-                            color: theme.colorScheme.onSurfaceVariant,
+                            color: theme.colorScheme.onSurface,
                           ),
                         ),
                       )
                     : Icon(
                         // Use a more specific icon for sources as a fallback.
                         item is Source ? Icons.source : Icons.category,
-                        color: theme.colorScheme.onSurfaceVariant,
+                        color: theme.colorScheme.onSurface,
                       ),
               ),
               const SizedBox(height: AppSpacing.md),

Original file line number	Diff line number	Diff line change
`@@ -1152,5 +1152,13 @@`
`1152`	`1152`	`"headlinesFeedFilterLoadingHeadline": "جاري تحميل الفلاتر",`
`1153`	`1153`	`"@headlinesFeedFilterLoadingHeadline": {`
`1154`	`1154`	`"description": "Headline for the loading state when fetching filter options on the headlines filter page."`
	`1155`	`+ },`
	`1156`	`+ "suggestedTopicsTitle": "مواضيع مقترحة",`
	`1157`	`+ "@suggestedTopicsTitle": {`
	`1158`	`+ "description": "عنوان لمجموعة المواضيع المقترحة."`
	`1159`	`+ },`
	`1160`	`+ "suggestedSourcesTitle": "مصادر مقترحة",`
	`1161`	`+ "@suggestedSourcesTitle": {`
	`1162`	`+ "description": "عنوان لمجموعة المصادر المقترحة."`
`1155`	`1163`	`}`
`1156`	`1164`	`}`