Merge pull request #84 from flutter-news-app-full-source-code/Fix-the-Ad-Initialization-Crash

Fix the ad initialization crash

Author: fulleni

lib/ads/models/native_ad.dart

@@ -10,7 +10,12 @@ import 'package:flutter/foundation.dart';
 enum AdProviderType {
   /// Google AdMob provider.
   admob,
-  // Add other providers here in the future, e.g., meta, appLovin
+
+  /// A placeholder provider for platforms where native ads are not supported.
+  ///
+  /// This is primarily used for the web demo environment to maintain UI
+  /// consistency without relying on native SDKs.
+  placeholder,
 }
 
 /// {@template native_ad}

lib/ads/no_op_ad_provider.dart

@@ -0,0 +1,57 @@
+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_theme_style.dart';
+import 'package:flutter_news_app_mobile_client_full_source_code/ads/models/native_ad.dart';
+import 'package:logging/logging.dart';
+import 'package:uuid/uuid.dart';
+
+/// {@template no_op_ad_provider}
+/// A "no-operation" implementation of [AdProvider] for platforms where
+/// native ad SDKs are not supported (e.g., web).
+///
+/// This provider's `initialize` method does nothing, and its `loadNativeAd`
+/// method returns a [NativeAd] with [AdProviderType.placeholder]. This ensures
+/// that the application's UI can still render an "ad slot" for visual
+/// consistency in demo environments, without attempting to load actual native
+/// ads that would cause platform exceptions.
+/// {@endtemplate}
+class NoOpAdProvider implements AdProvider {
+  /// {@macro no_op_ad_provider}
+  NoOpAdProvider({Logger? logger})
+      : _logger = logger ?? Logger('NoOpAdProvider');
+
+  final Logger _logger;
+  final Uuid _uuid = const Uuid();
+
+  /// This method does nothing as there's no SDK to initialize.
+  ///
+  /// It logs a message to indicate its no-op nature.
+  @override
+  Future<void> initialize() async {
+    _logger.info('No-Op Ad Provider initialized (no actual SDK to init).');
+  }
+
+  /// Loads a placeholder native ad.
+  ///
+  /// This method does not interact with any external ad network. Instead, it
+  /// creates a [NativeAd] object with [AdProviderType.placeholder], which
+  /// signals to the UI that a generic placeholder should be rendered.
+  ///
+  /// The [imageStyle] and [adThemeStyle] parameters are accepted for API
+  /// compatibility but are not used to load a real ad.
+  @override
+  Future<NativeAd?> loadNativeAd({
+    required HeadlineImageStyle imageStyle,
+    required AdThemeStyle adThemeStyle,
+  }) async {
+    _logger.info('Loading placeholder native ad.');
+    // Return a dummy NativeAd object with a placeholder type.
+    // The `adObject` can be any non-null object, as it won't be used by
+    // the placeholder rendering widget.
+    return NativeAd(
+      id: _uuid.v4(),
+      provider: AdProviderType.placeholder,
+      adObject: Object(), // Dummy object
+    );
+  }
+}

lib/ads/widgets/ad_feed_item_widget.dart

@@ -1,5 +1,6 @@
 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/placeholder_ad_widget.dart';
 import 'package:flutter_news_app_mobile_client_full_source_code/ads/widgets/widgets.dart';
 import 'package:ui_kit/ui_kit.dart';
 
@@ -57,6 +58,10 @@ class _AdDispatcher extends StatelessWidget {
       case AdProviderType.admob:
         // If the provider is AdMob, render the AdmobNativeAdWidget.
         return AdmobNativeAdWidget(nativeAd: nativeAd);
+      case AdProviderType.placeholder:
+        // If the provider is a placeholder, render the PlaceholderAdWidget.
+        // This is used for web or other unsupported platforms to maintain UI.
+        return const PlaceholderAdWidget();
     }
   }
 }

lib/ads/widgets/placeholder_ad_widget.dart

@@ -0,0 +1,53 @@
+import 'package:flutter/material.dart';
+import 'package:ui_kit/ui_kit.dart';
+
+/// {@template placeholder_ad_widget}
+/// A widget that displays a generic placeholder for an advertisement.
+///
+/// This is used on platforms (like web) where actual native ad SDKs are not
+/// supported, but a visual representation of an ad slot is desired for UI
+/// consistency or demo purposes.
+/// {@endtemplate}
+class PlaceholderAdWidget extends StatelessWidget {
+  /// {@macro placeholder_ad_widget}
+  const PlaceholderAdWidget({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    return Container(
+      padding: const EdgeInsets.all(AppSpacing.lg),
+      decoration: BoxDecoration(
+        color: theme.colorScheme.surfaceVariant,
+        borderRadius: BorderRadius.circular(AppSpacing.md),
+        border: Border.all(color: theme.colorScheme.outlineVariant),
+      ),
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Icon(
+            Icons.ad_units,
+            size: 48,
+            color: theme.colorScheme.onSurfaceVariant,
+          ),
+          const SizedBox(height: AppSpacing.md),
+          Text(
+            'Ad Placeholder',
+            style: theme.textTheme.titleMedium?.copyWith(
+              color: theme.colorScheme.onSurfaceVariant,
+            ),
+            textAlign: TextAlign.center,
+          ),
+          const SizedBox(height: AppSpacing.xs),
+          Text(
+            'Native ads are not supported on this platform.',
+            style: theme.textTheme.bodySmall?.copyWith(
+              color: theme.colorScheme.onSurfaceVariant.withOpacity(0.7),
+            ),
+            textAlign: TextAlign.center,
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/bootstrap.dart

@@ -11,7 +11,9 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.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/ad_service.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter_news_app_mobile_client_full_source_code/ads/admob_ad_provider.dart';
+import 'package:flutter_news_app_mobile_client_full_source_code/ads/no_op_ad_provider.dart';
 import 'package:flutter_news_app_mobile_client_full_source_code/app/app.dart';
 import 'package:flutter_news_app_mobile_client_full_source_code/app/config/config.dart'
     as app_config;
@@ -42,9 +44,15 @@ Future<Widget> bootstrap(
   HttpClient? httpClient;
 
   // Initialize AdProvider and AdService
-  final AdProvider adProvider = AdMobAdProvider(logger: logger);
+  // Initialize AdProvider based on platform.
+  // On web, use a No-Op provider to prevent MissingPluginException,
+  // as Google Mobile Ads SDK does not support native ads on web.
+  final AdProvider adProvider = kIsWeb
+      ? NoOpAdProvider(logger: logger)
+      : AdMobAdProvider(logger: logger);
+
   final adService = AdService(adProvider: adProvider, logger: logger);
-  await adService.initialize(); // Initialize AdMob SDK early
+  await adService.initialize(); // Initialize the selected AdProvider early
 
   if (appConfig.environment == app_config.AppEnvironment.demo) {
     authClient = AuthInmemory();