Flutter如何集成Admob原生广告

我在Flutter项目中想集成Admob的原生广告，试了几个插件都没成功。请问具体该怎么实现？需要配置哪些参数才能让广告正常显示？有没有详细的步骤或代码示例可以参考？

2 回复

Flutter集成Admob原生广告步骤：

  1. 添加google_mobile_ads依赖
  2. 配置Android/iOS广告ID
  3. 初始化SDK
  4. 创建AdLoader加载原生广告
  5. 使用NativeAdWidget显示广告

需注意广告位ID配置和广告加载状态管理。

更多关于Flutter如何集成Admob原生广告的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中集成AdMob原生广告，推荐使用官方插件 google_mobile_ads。以下是详细步骤：

  1. 添加依赖 在 pubspec.yaml 中添加：
dependencies:
  google_mobile_ads: ^2.0.0
  1. 平台配置
  • Android：
    • 在 AndroidManifest.xml 中添加：
    <meta-data
  android:name="com.google.android.gms.ads.APPLICATION_ID"
  android:value="YOUR_ADMOB_APP_ID"/>
  • iOS：
    • 在 Info.plist 中添加：
    <key>GADApplicationIdentifier</key>
<string>YOUR_ADMOB_APP_ID</string>
  1. 初始化广告
import 'package:google_mobile_ads/google_mobile_ads.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  MobileAds.instance.initialize();
  runApp(MyApp());
}
  1. 创建原生广告
class NativeAdWidget extends StatefulWidget {
  @override
  _NativeAdWidgetState createState() => _NativeAdWidgetState();
}

class _NativeAdWidgetState extends State<NativeAdWidget> {
  NativeAd? _nativeAd;

  @override
  void initState() {
    super.initState();
    _loadAd();
  }

  void _loadAd() {
    _nativeAd = NativeAd(
      adUnitId: 'YOUR_NATIVE_AD_UNIT_ID',
      request: AdRequest(),
      listener: NativeAdListener(
        onAdLoaded: (Ad ad) => print('Ad loaded.'),
        onAdFailedToLoad: (Ad ad, LoadAdError error) {
          ad.dispose();
          print('Ad failed to load: $error');
        },
      ),
      nativeTemplateStyle: NativeTemplateStyle(
        templateType: TemplateType.medium,
      ),
    )..load();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      child: _nativeAd == null ? SizedBox() : AdWidget(ad: _nativeAd!),
    );
  }

  @override
  void dispose() {
    _nativeAd?.dispose();
    super.dispose();
  }
}
  1. 注意事项
  • 替换 YOUR_ADMOB_APP_ID 和 YOUR_NATIVE_AD_UNIT_ID 为实际ID
  • 测试时使用官方测试ID：ca-app-pub-3940256099942544/2247696110
  • 遵循AdMob政策，确保广告展示合规

通过以上步骤即可在Flutter应用中集成AdMob原生广告。记得处理广告加载状态和生命周期管理。

回到顶部