Merge pull request #83 from flutter-news-app-full-source-code/refactor-the-ad-system-to-render-the-native-ad-UI-entirely-within-Flutter

Refactor the ad system to render the native ad UI entirely within flutter

Author: fulleni

lib/account/view/saved_headlines_page.dart

@@ -6,7 +6,7 @@ import 'package:flutter_news_app_mobile_client_full_source_code/app/bloc/app_blo
 // HeadlineItemWidget import removed
 import 'package:flutter_news_app_mobile_client_full_source_code/l10n/l10n.dart';
 import 'package:flutter_news_app_mobile_client_full_source_code/router/routes.dart';
-import 'package:flutter_news_app_mobile_client_full_source_code/shared/shared.dart';
+import 'package:flutter_news_app_mobile_client_full_source_code/shared/widgets/feed_core/feed_core.dart';
 import 'package:go_router/go_router.dart';
 import 'package:ui_kit/ui_kit.dart';
 

lib/ads/ad_provider.dart

@@ -1,3 +1,5 @@
+import 'package:core/core.dart';
+import 'package:flutter_news_app_mobile_client_full_source_code/ads/models/ad_theme_style.dart';
 import 'package:flutter_news_app_mobile_client_full_source_code/ads/models/native_ad.dart'
     as app_native_ad;
 
@@ -18,11 +20,18 @@ abstract class AdProvider {
   /// It handles any necessary setup for the specific ad network.
   Future<void> initialize();
 
-  /// Loads a native ad.
+  /// Loads a native ad, optionally tailoring it to a specific style.
   ///
   /// Returns a [app_native_ad.NativeAd] object if an ad is successfully loaded,
   /// otherwise returns `null`.
-  Future<app_native_ad.NativeAd?> loadNativeAd();
+  ///
+  /// The [imageStyle] is used to select an appropriate native ad template
+  /// that best matches the visual density of the surrounding content.
+  /// The [adThemeStyle] provides UI-agnostic theme properties for ad styling.
+  Future<app_native_ad.NativeAd?> loadNativeAd({
+    required HeadlineImageStyle imageStyle,
+    required AdThemeStyle adThemeStyle,
+  });
 
   // Future methods for other ad types (e.g., interstitial, banner)
   // can be added here as needed in the future.

lib/ads/ad_service.dart

@@ -1,5 +1,7 @@
+import 'package:core/core.dart';
 import 'package:flutter_news_app_mobile_client_full_source_code/ads/ad_provider.dart';
 import 'package:flutter_news_app_mobile_client_full_source_code/ads/models/ad_feed_item.dart';
+import 'package:flutter_news_app_mobile_client_full_source_code/ads/models/ad_theme_style.dart';
 import 'package:logging/logging.dart';
 import 'package:uuid/uuid.dart';
 
@@ -35,15 +37,22 @@ class AdService {
 
   /// Retrieves a loaded native ad wrapped as an [AdFeedItem].
   ///
-  /// This method delegates the ad loading to the injected [AdProvider].
+  /// This method delegates the ad loading to the injected [AdProvider],
+  /// passing along the desired [imageStyle] to select the correct template.
   /// If an ad is successfully loaded, it's wrapped in an [AdFeedItem]
   /// with a unique ID.
   ///
   /// Returns an [AdFeedItem] if an ad is available, otherwise `null`.
-  Future<AdFeedItem?> getAd() async {
+  Future<AdFeedItem?> getAd({
+    required HeadlineImageStyle imageStyle,
+    required AdThemeStyle adThemeStyle,
+  }) async {
     _logger.info('Requesting native ad from AdProvider...');
     try {
-      final nativeAd = await _adProvider.loadNativeAd();
+      final nativeAd = await _adProvider.loadNativeAd(
+        imageStyle: imageStyle,
+        adThemeStyle: adThemeStyle,
+      );
       if (nativeAd != null) {
         _logger.info('Native ad successfully loaded and wrapped.');
         return AdFeedItem(id: _uuid.v4(), nativeAd: nativeAd);

lib/ads/admob_ad_provider.dart

@@ -1,7 +1,9 @@
 import 'dart:async';
 
+import 'package:core/core.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter_news_app_mobile_client_full_source_code/ads/ad_provider.dart';
+import 'package:flutter_news_app_mobile_client_full_source_code/ads/models/ad_theme_style.dart';
 import 'package:flutter_news_app_mobile_client_full_source_code/ads/models/native_ad.dart'
     as app_native_ad;
 import 'package:google_mobile_ads/google_mobile_ads.dart' as admob;
@@ -73,20 +75,32 @@ class AdMobAdProvider implements AdProvider {
   }
 
   @override
-  Future<app_native_ad.NativeAd?> loadNativeAd() async {
+  @override
+  Future<app_native_ad.NativeAd?> loadNativeAd({
+    required HeadlineImageStyle imageStyle,
+    required AdThemeStyle adThemeStyle,
+  }) async {
     if (_nativeAdUnitId.isEmpty) {
       _logger.warning('No native ad unit ID configured for this platform.');
       return null;
     }
 
     _logger.info('Attempting to load native ad from unit ID: $_nativeAdUnitId');
 
+    final templateType = switch (imageStyle) {
+      HeadlineImageStyle.largeThumbnail => admob.TemplateType.medium,
+      _ => admob.TemplateType.small,
+    };
+
     final completer = Completer<admob.NativeAd?>();
 
     final ad = admob.NativeAd(
       adUnitId: _nativeAdUnitId,
-      factoryId: 'listTile', // This ID must match a factory in your native code
       request: const admob.AdRequest(),
+      nativeTemplateStyle: _createNativeTemplateStyle(
+        templateType: templateType,
+        adThemeStyle: adThemeStyle,
+      ),
       listener: admob.NativeAdListener(
         onAdLoaded: (ad) {
           _logger.info('Native Ad loaded successfully.');
@@ -138,10 +152,49 @@ class AdMobAdProvider implements AdProvider {
     }
 
     // Map the Google Mobile Ads NativeAd to our generic NativeAd model.
-    // Only the ID and the raw adObject are stored, as per the simplified model.
     return app_native_ad.NativeAd(
       id: _uuid.v4(), // Generate a unique ID for our internal model
+      provider: app_native_ad.AdProviderType.admob, // Set the provider
       adObject: googleNativeAd, // Store the original AdMob object
     );
   }
+
+  /// Creates a [NativeTemplateStyle] based on the app's current theme.
+  ///
+  /// This method maps the application's theme properties (colors, text styles)
+  /// to the AdMob native ad styling options, ensuring a consistent look and feel.
+  admob.NativeTemplateStyle _createNativeTemplateStyle({
+    required admob.TemplateType templateType,
+    required AdThemeStyle adThemeStyle,
+  }) {
+    return admob.NativeTemplateStyle(
+      templateType: templateType,
+      mainBackgroundColor: adThemeStyle.mainBackgroundColor,
+      cornerRadius: adThemeStyle.cornerRadius,
+      callToActionTextStyle: admob.NativeTemplateTextStyle(
+        textColor: adThemeStyle.callToActionTextColor,
+        backgroundColor: adThemeStyle.callToActionBackgroundColor,
+        style: admob.NativeTemplateFontStyle.normal,
+        size: adThemeStyle.callToActionTextSize,
+      ),
+      primaryTextStyle: admob.NativeTemplateTextStyle(
+        textColor: adThemeStyle.primaryTextColor,
+        backgroundColor: adThemeStyle.primaryBackgroundColor,
+        style: admob.NativeTemplateFontStyle.bold,
+        size: adThemeStyle.primaryTextSize,
+      ),
+      secondaryTextStyle: admob.NativeTemplateTextStyle(
+        textColor: adThemeStyle.secondaryTextColor,
+        backgroundColor: adThemeStyle.secondaryBackgroundColor,
+        style: admob.NativeTemplateFontStyle.normal,
+        size: adThemeStyle.secondaryTextSize,
+      ),
+      tertiaryTextStyle: admob.NativeTemplateTextStyle(
+        textColor: adThemeStyle.tertiaryTextColor,
+        backgroundColor: adThemeStyle.tertiaryBackgroundColor,
+        style: admob.NativeTemplateFontStyle.normal,
+        size: adThemeStyle.tertiaryTextSize,
+      ),
+    );
+  }
 }

lib/ads/models/ad_theme_style.dart

@@ -0,0 +1,117 @@
+import 'package:equatable/equatable.dart';
+import 'package:flutter/material.dart';
+import 'package:ui_kit/ui_kit.dart';
+
+/// {@template ad_theme_style}
+/// A UI-agnostic data model representing the theme properties required for
+/// styling native advertisements.
+///
+/// This class decouples ad styling logic from Flutter's [ThemeData],
+/// allowing theme-related values to be passed to service layers without
+/// direct UI context dependencies.
+/// {@endtemplate}
+class AdThemeStyle extends Equatable {
+  /// {@macro ad_theme_style}
+  const AdThemeStyle({
+    required this.mainBackgroundColor,
+    required this.cornerRadius,
+    required this.callToActionTextColor,
+    required this.callToActionBackgroundColor,
+    required this.callToActionTextSize,
+    required this.primaryTextColor,
+    required this.primaryBackgroundColor,
+    required this.primaryTextSize,
+    required this.secondaryTextColor,
+    required this.secondaryBackgroundColor,
+    required this.secondaryTextSize,
+    required this.tertiaryTextColor,
+    required this.tertiaryBackgroundColor,
+    required this.tertiaryTextSize,
+  });
+
+  /// Factory constructor to create an [AdThemeStyle] from a Flutter [ThemeData].
+  ///
+  /// This method acts as an adapter, extracting the relevant styling properties
+  /// from the UI's theme and mapping them to the UI-agnostic [AdThemeStyle] model.
+  factory AdThemeStyle.fromTheme(ThemeData theme) {
+    final colorScheme = theme.colorScheme;
+    final textTheme = theme.textTheme;
+
+    return AdThemeStyle(
+      mainBackgroundColor: colorScheme.surface,
+      cornerRadius: AppSpacing.sm,
+      callToActionTextColor: colorScheme.onPrimary,
+      callToActionBackgroundColor: colorScheme.primary,
+      callToActionTextSize: textTheme.labelLarge?.fontSize,
+      primaryTextColor: colorScheme.onSurface,
+      primaryBackgroundColor: colorScheme.surface,
+      primaryTextSize: textTheme.titleMedium?.fontSize,
+      secondaryTextColor: colorScheme.onSurfaceVariant,
+      secondaryBackgroundColor: colorScheme.surface,
+      secondaryTextSize: textTheme.bodyMedium?.fontSize,
+      tertiaryTextColor: colorScheme.onSurfaceVariant,
+      tertiaryBackgroundColor: colorScheme.surface,
+      tertiaryTextSize: textTheme.labelSmall?.fontSize,
+    );
+  }
+
+  /// The background color for the main ad container.
+  final Color mainBackgroundColor;
+
+  /// The corner radius for the ad container.
+  final double cornerRadius;
+
+  /// The text color for the call-to-action button.
+  final Color callToActionTextColor;
+
+  /// The background color for the call-to-action button.
+  final Color callToActionBackgroundColor;
+
+  /// The font size for the call-to-action text.
+  final double? callToActionTextSize;
+
+  /// The text color for the primary text (e.g., ad headline).
+  final Color primaryTextColor;
+
+  /// The background color for the primary text.
+  final Color primaryBackgroundColor;
+
+  /// The font size for the primary text.
+  final double? primaryTextSize;
+
+  /// The text color for the secondary text (e.g., ad body).
+  final Color secondaryTextColor;
+
+  /// The background color for the secondary text.
+  final Color secondaryBackgroundColor;
+
+  /// The font size for the secondary text.
+  final double? secondaryTextSize;
+
+  /// The text color for the tertiary text (e.g., ad attribution).
+  final Color tertiaryTextColor;
+
+  /// The background color for the tertiary text.
+  final Color tertiaryBackgroundColor;
+
+  /// The font size for the tertiary text.
+  final double? tertiaryTextSize;
+
+  @override
+  List<Object?> get props => [
+    mainBackgroundColor,
+    cornerRadius,
+    callToActionTextColor,
+    callToActionBackgroundColor,
+    callToActionTextSize,
+    primaryTextColor,
+    primaryBackgroundColor,
+    primaryTextSize,
+    secondaryTextColor,
+    secondaryBackgroundColor,
+    secondaryTextSize,
+    tertiaryTextColor,
+    tertiaryBackgroundColor,
+    tertiaryTextSize,
+  ];
+}

lib/ads/models/native_ad.dart

@@ -1,21 +1,43 @@
 import 'package:equatable/equatable.dart';
 import 'package:flutter/foundation.dart';
 
+/// {@template ad_provider_type}
+/// Defines the supported ad network providers.
+///
+/// This enum is used to identify the source of a [NativeAd] object,
+/// allowing the UI to select the correct rendering widget at runtime.
+/// {@endtemplate}
+enum AdProviderType {
+  /// Google AdMob provider.
+  admob,
+  // Add other providers here in the future, e.g., meta, appLovin
+}
+
 /// {@template native_ad}
 /// A generic, provider-agnostic model representing a native advertisement.
 ///
 /// This model decouples the application's core logic from specific ad network
 /// SDKs (e.g., Google Mobile Ads). It holds a reference to the original,
-/// SDK-specific ad object for rendering purposes.
+/// SDK-specific ad object for rendering purposes and a [provider] type
+/// to identify its origin.
 /// {@endtemplate}
 @immutable
 class NativeAd extends Equatable {
   /// {@macro native_ad}
-  const NativeAd({required this.id, required this.adObject});
+  const NativeAd({
+    required this.id,
+    required this.provider,
+    required this.adObject,
+  });
 
   /// A unique identifier for this specific native ad instance.
   final String id;
 
+  /// The ad provider that this ad belongs to.
+  ///
+  /// This is used by the UI to determine which rendering widget to use.
+  final AdProviderType provider;
+
   /// The original, SDK-specific ad object.
   ///
   /// This object is passed directly to the ad network's UI widget for rendering.
@@ -24,5 +46,5 @@ class NativeAd extends Equatable {
   final Object adObject;
 
   @override
-  List<Object?> get props => [id, adObject];
+  List<Object?> get props => [id, provider, adObject];
 }

lib/ads/widgets/ad_feed_item_widget.dart

@@ -0,0 +1,62 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_news_app_mobile_client_full_source_code/ads/models/models.dart';
+import 'package:flutter_news_app_mobile_client_full_source_code/ads/widgets/widgets.dart';
+import 'package:ui_kit/ui_kit.dart';
+
+/// {@template ad_feed_item_widget}
+/// A widget that acts as a dispatcher for rendering native ads from different
+/// providers.
+///
+/// This widget inspects the [AdFeedItem]'s underlying [NativeAd] to determine
+/// its [AdProviderType]. It then delegates the rendering to the appropriate
+/// provider-specific widget (e.g., [AdmobNativeAdWidget]).
+///
+/// This approach ensures that the ad rendering logic is decoupled from the
+/// main feed UI, making the system extensible to support multiple ad networks.
+/// {@endtemplate}
+class AdFeedItemWidget extends StatelessWidget {
+  /// {@macro ad_feed_item_widget}
+  const AdFeedItemWidget({required this.adFeedItem, super.key});
+
+  /// The ad feed item containing the loaded native ad to be displayed.
+  final AdFeedItem adFeedItem;
+
+  @override
+  Widget build(BuildContext context) {
+    // The main container for the ad, styled to look like other feed items.
+    return Card(
+      margin: const EdgeInsets.symmetric(
+        horizontal: AppSpacing.paddingMedium,
+        vertical: AppSpacing.xs,
+      ),
+      child: ConstrainedBox(
+        constraints: const BoxConstraints(
+          minWidth: 320, // Minimum recommended width for ads
+          minHeight: 90, // Minimum height for a small template ad
+        ),
+        // The _AdDispatcher is responsible for selecting the correct
+        // provider-specific widget.
+        child: _AdDispatcher(nativeAd: adFeedItem.nativeAd),
+      ),
+    );
+  }
+}
+
+/// A private helper widget that selects the correct ad rendering widget
+/// based on the [NativeAd.provider].
+class _AdDispatcher extends StatelessWidget {
+  const _AdDispatcher({required this.nativeAd});
+
+  final NativeAd nativeAd;
+
+  @override
+  Widget build(BuildContext context) {
+    // Use a switch statement on the provider to determine which widget to build.
+    // This is the core of the platform-agnostic rendering logic.
+    switch (nativeAd.provider) {
+      case AdProviderType.admob:
+        // If the provider is AdMob, render the AdmobNativeAdWidget.
+        return AdmobNativeAdWidget(nativeAd: nativeAd);
+    }
+  }
+}