Flutter广告展示插件ndmob的使用

Flutter广告展示插件Ndmob的使用

本README描述了插件的使用方法。如果您将此插件发布到pub.dev,此README的内容将出现在您的插件首页。

提示

我非常无聊,所以我创建了一个简单的Admob横幅广告仅供我个人使用。请不要在生产环境中使用这段糟糕的代码。

功能

TODO: 需要添加更多功能如RewardedBanner、RewardedInterstitialBanner等…

开始使用

要使用此插件,请运行以下命令:

flutter pub add google_mobile_ads

使用方法

main.dart文件中添加以下代码:

void main() {
    WidgetsFlutterBinding.ensureInitialized(); // 确保WidgetsFlutterBinding已经初始化
    MobileAds.instance.initialize(); // 初始化MobileAds实例
    Ndmob.init(AdmobManager(
      adUnitId: "ca-app-pub-3940256099942544~3347511713", // 广告单元ID
      bannerAdUnitIdAndroid: "ca-app-pub-3940256099942544/6300978111", // Android平台的横幅广告单元ID
      bannerAdUnitIdIOS: "ca-app-pub-3940256099942544/2934735716", // iOS平台的横幅广告单元ID
      nativeAdUnitIdAndroid: "ca-app-pub-3940256099942544/1033173712", // Android平台的原生广告单元ID
      nativeAdUnitIdIOS: "ca-app-pub-3940256099942544/4411468910", // iOS平台的原生广告单元ID
      interstitialAdUnitIdAndroid: "ca-app-pub-3940256099942544/2247696110", // Android平台的插屏广告单元ID
      interstitialAdUnitIdIOS: "ca-app-pub-3940256099942544/3986624511", // iOS平台的插屏广告单元ID
    ));

    runApp(const MaterialApp(
      home: const MyWidget(), // 主页面
    ));
}

如何使用Ndmob横幅广告

在您的MyWidget类中添加以下代码:

import 'package:ndmob/ndmob.dart'; // 导入Ndmob包

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            Ndmob.adBanner(adFailedWidget: const Text("Empty Ads")), // 显示横幅广告
            const SizedBox(height: 32), // 添加间距
            Ndmob.adNative(), // 显示原生广告
            const SizedBox(height: 32), // 添加间距
            ElevatedButton(
              onPressed: () {
                Ndmob.showAdInterstitial(); // 显示插屏广告
              },
              child: const Icon(Icons.fullscreen), // 按钮图标
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter广告展示插件ndmob的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter广告展示插件ndmob的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是一个关于如何在Flutter项目中集成和使用ndmob广告展示插件的示例代码案例。ndmob是一个用于在Flutter应用中展示广告的插件,支持多种广告格式。

1. 添加依赖

首先,你需要在pubspec.yaml文件中添加ndmob的依赖:

dependencies:
  flutter:
    sdk: flutter
  ndmob: ^最新版本号  # 请替换为实际最新版本号

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

2. 配置Android

android/app/src/main/AndroidManifest.xml文件中添加必要的权限和广告配置。例如:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.yourapp">

    <!-- 其他配置 -->

    <!-- 添加必要的权限 -->
    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

    <!-- ndmob广告配置 -->
    <meta-data
        android:name="com.ndmob.SDK_KEY"
        android:value="你的NDMob SDK Key"/>

    <!-- 其他配置 -->

</manifest>

3. 配置iOS

如果你还打算在iOS上展示广告,你需要在ios/Runner/Info.plist文件中添加一些配置。不过,ndmob的具体iOS配置可能因版本而异,请参考官方文档进行配置。

4. 初始化并展示广告

在你的Flutter应用中,你需要初始化ndmob并展示广告。以下是一个简单的示例:

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool isAdLoaded = false;

  @override
  void initState() {
    super.initState();
    // 初始化NDMob广告
    NDMob.initialize(
      sdkKey: "你的NDMob SDK Key",
      listener: (NDMobEvent event) {
        if (event is NDMobAdLoadedEvent) {
          setState(() {
            isAdLoaded = true;
          });
        } else if (event is NDMobAdFailedToLoadEvent) {
          print("广告加载失败: ${event.error}");
        } else if (event is NDMobAdClickedEvent) {
          print("广告被点击");
        } else if (event is NDMobAdClosedEvent) {
          print("广告被关闭");
        }
      },
    );

    // 加载广告
    NDMob.loadBannerAd(
      unitId: "你的Banner广告单元ID",
      adSize: NDMobAdSize.banner, // 或者其他尺寸
      anchor: AnchorType.bottom, // 广告的锚点位置
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '你正在使用NDMob广告插件',
            ),
            SizedBox(height: 20),
            if (isAdLoaded)
              Container(
                height: 50, // 根据你的广告尺寸调整
                width: AdSize.banner.width.toDouble(), // 或者使用NDMobAdSize中定义的尺寸
                child: AdWidget(
                  adUnitId: "你的Banner广告单元ID",
                  adType: AdType.banner,
                ),
              )
            else
              CircularProgressIndicator(),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 展示全屏广告(如果已加载)
          NDMob.showInterstitialAd(unitId: "你的全屏广告单元ID");
        },
        tooltip: '展示全屏广告',
        child: Icon(Icons.monetization_on),
      ),
    );
  }
}

注意事项

  1. SDK Key和广告单元ID:你需要替换代码中的你的NDMob SDK Key你的广告单元ID为实际的值。
  2. 广告尺寸:根据你的需求调整广告尺寸和位置。
  3. 事件监听:你可以根据需要添加更多的事件监听,例如广告展示完成、用户点击广告后的行为等。

希望这个示例代码能够帮助你在Flutter项目中成功集成并使用ndmob广告展示插件。

回到顶部