Flutter中的AdMob：集成广告功能

Flutter中的AdMob：集成广告功能

5 回复

集成AdMob需添加依赖，配置Android和iOS平台，加载并展示广告。

更多关于Flutter中的AdMob：集成广告功能的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中集成AdMob广告功能，首先需要添加firebase_admob依赖，然后在Firebase控制台配置应用，最后在代码中初始化并展示广告。

在Flutter中集成AdMob广告功能，首先需要安装google_mobile_ads插件。然后在pubspec.yaml中添加依赖项。接着，在AndroidManifest.xml和Info.plist中配置AdMob的App ID。初始化广告SDK后，可以创建横幅广告、插页式广告或激励广告，并将其嵌入到UI中。最后，确保遵守AdMob的政策和指南。

在Flutter中集成AdMob，使用firebase_admob插件，配置并显示广告。

在Flutter中集成AdMob广告功能，你可以使用google_mobile_ads插件。以下是一个简单的步骤指南，帮助你实现这一功能：

1. 添加依赖

首先，在pubspec.yaml文件中添加google_mobile_ads依赖：

dependencies:
  flutter:
    sdk: flutter
  google_mobile_ads: ^1.0.0

然后运行flutter pub get来安装依赖。

2. 配置Android和iOS项目

Android

在android/app/src/main/AndroidManifest.xml文件中，添加以下权限和元数据：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.your_app_name">
    <application>
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>
    </application>
</manifest>

将ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy替换为你的AdMob应用ID。

iOS

在ios/Runner/Info.plist文件中，添加以下内容：

<key>GADApplicationIdentifier</key>
<string>ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy</string>

同样，将ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy替换为你的AdMob应用ID。

3. 初始化AdMob

在你的Flutter应用的main.dart文件中，初始化AdMob：

import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  MobileAds.instance.initialize();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('AdMob Example')),
        body: AdBanner(),
      ),
    );
  }
}

4. 显示横幅广告

创建一个AdBanner小部件来显示横幅广告：

class AdBanner extends StatefulWidget {
  @override
  _AdBannerState createState() => _AdBannerState();
}

class _AdBannerState extends State<AdBanner> {
  BannerAd? _bannerAd;

  @override
  void initState() {
    super.initState();
    _bannerAd = BannerAd(
      adUnitId: 'ca-app-pub-3940256099942544/6300978111', // 测试广告单元ID
      size: AdSize.banner,
      request: AdRequest(),
      listener: BannerAdListener(
        onAdLoaded: (Ad ad) => print('Ad loaded.'),
        onAdFailedToLoad: (Ad ad, LoadAdError error) {
          ad.dispose();
          print('Ad failed to load: $error');
        },
        onAdOpened: (Ad ad) => print('Ad opened.'),
        onAdClosed: (Ad ad) => print('Ad closed.'),
      ),
    )..load();
  }

  @override
  void dispose() {
    _bannerAd?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: _bannerAd != null
          ? AdWidget(ad: _bannerAd!)
          : Container(),
    );
  }
}

5. 运行应用

现在你可以运行你的Flutter应用，并看到横幅广告显示在屏幕上。

注意事项

  • 使用测试广告单元ID进行开发，避免在发布应用时使用真实广告单元ID。
  • 确保遵循AdMob的政策和指南，以避免账户被封禁。

通过以上步骤，你可以在Flutter应用中成功集成AdMob广告功能。

回到顶部