Merge pull request #87 from flutter-news-app-full-source-code/Fix-Native-Ad-Rendering

Fix native ad rendering

Author: fulleni

lib/ads/admob_ad_provider.dart

@@ -156,6 +156,10 @@ class AdMobAdProvider implements AdProvider {
       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
+      templateType: switch (templateType) {
+        admob.TemplateType.small => app_native_ad.NativeAdTemplateType.small,
+        admob.TemplateType.medium => app_native_ad.NativeAdTemplateType.medium,
+      },
     );
   }
 

lib/ads/models/native_ad.dart

@@ -1,6 +1,20 @@
 import 'package:equatable/equatable.dart';
 import 'package:flutter/foundation.dart';
 
+/// {@template native_ad_template_type}
+/// Defines the visual template type for a native ad.
+///
+/// This is used to determine the expected size and layout of the native ad
+/// when rendering it in the UI.
+/// {@endtemplate}
+enum NativeAdTemplateType {
+  /// A small native ad template, typically used for compact layouts.
+  small,
+
+  /// A medium native ad template, typically used for more prominent layouts.
+  medium,
+}
+
 /// {@template ad_provider_type}
 /// Defines the supported ad network providers.
 ///
@@ -11,7 +25,7 @@ enum AdProviderType {
   /// Google AdMob provider.
   admob,
 
-  /// A placeholder provider for platforms where native ads are not supported.
+  /// A placeholder provider for platforms where native ad SDKs are not supported.
   ///
   /// This is primarily used for the web demo environment to maintain UI
   /// consistency without relying on native SDKs.
@@ -33,6 +47,7 @@ class NativeAd extends Equatable {
     required this.id,
     required this.provider,
     required this.adObject,
+    required this.templateType,
   });
 
   /// A unique identifier for this specific native ad instance.
@@ -50,6 +65,9 @@ class NativeAd extends Equatable {
   /// only within the dedicated ad rendering widget for that provider.
   final Object adObject;
 
+  /// The template type of the native ad, indicating its expected size and layout.
+  final NativeAdTemplateType templateType;
+
   @override
-  List<Object?> get props => [id, provider, adObject];
+  List<Object?> get props => [id, provider, adObject, templateType];
 }

lib/ads/no_op_ad_provider.dart

@@ -52,6 +52,10 @@ class NoOpAdProvider implements AdProvider {
       id: _uuid.v4(),
       provider: AdProviderType.placeholder,
       adObject: Object(), // Dummy object
+      templateType: switch (imageStyle) {
+        HeadlineImageStyle.largeThumbnail => NativeAdTemplateType.medium,
+        _ => NativeAdTemplateType.small,
+      },
     );
   }
 }

lib/ads/widgets/admob_native_ad_widget.dart

@@ -36,6 +36,17 @@ class AdmobNativeAdWidget extends StatelessWidget {
 
     // The AdWidget from the google_mobile_ads package handles the rendering
     // of the pre-loaded native ad.
-    return admob.AdWidget(ad: adObject);
+    // We wrap it in a SizedBox to provide explicit height constraints,
+    // which is crucial for platform views (like native ads) within scrollable
+    // lists to prevent "unbounded height" errors.
+    final adHeight = switch (nativeAd.templateType) {
+      app_ad_models.NativeAdTemplateType.small => 120, // Example height for small template
+      app_ad_models.NativeAdTemplateType.medium => 340, // Example height for medium template
+    };
+
+    return SizedBox(
+      height: adHeight.toDouble(),
+      child: admob.AdWidget(ad: adObject),
+    );
   }
 }