Flutter广告集成插件dktech_ads的使用

Flutter广告集成插件dktech_ads的使用

在本教程中，我们将详细介绍如何在Flutter应用中使用dktech_ads插件来集成广告。该插件支持多种广告类型，包括Banner广告、原生广告、插屏广告（Interstitial）以及激励视频广告（Rewarded Interstitial）。我们将通过示例代码来演示每种广告类型的加载与展示。

初始化广告

首先，我们需要初始化广告服务。这一步骤通常在应用启动时完成。

AdmobUtils.initAdmob(isDebug: true, isShowAds: true);

• isDebug: 设置为true表示使用测试广告，设置为false表示使用真实广告。
• isShowAds: 控制是否显示广告。

Banner广告

Banner广告通常固定在屏幕底部或顶部。

1. 创建静态变量

static BannerHolder bannerHolder = BannerHolder(idAndroid: "your_admob_banner_id_android", idIOS: "your_admob_banner_id_ios");

2. 加载Banner广告

AdsManager.loadBanner(context, AdsManager.bannerHolder);

3. 展示Banner广告

AdmobUtils.bannerView(AdsManager.bannerHolder),

原生广告（Load后展示）

原生广告允许你自定义广告的外观。

1. 创建静态变量

static NativeHolder nativeHolder = NativeHolder(idAndroid: "your_admob_native_id_android", idIOS: "your_admob_native_id_ios");

2. 加载原生广告

AdsManager.loadNativeMediumWithLayout(context, AdsManager.nativeHolder);

3. 展示原生广告

AdmobUtils.bannerView(AdsManager.bannerHolder),

注意：在需要展示原生广告的页面中调用load方法以确保广告已加载完毕。

插屏广告（Interstitial）

插屏广告通常在用户执行特定操作后展示。

1. 创建静态变量

static InterHolder interHolder = InterHolder(idAndroid: "your_admob_inter_id_android", idIOS: "your_admob_inter_id_ios");

2. 加载并展示插屏广告

AdmobUtils.loadAndShowInter(interHolder, onAdClosed: () {
  // 广告关闭后的操作
}, onAdFail: () {
  // 广告加载失败后的操作
}, enableLoadingDialog: true);

• onAdClosed: 当广告关闭时触发。
• onAdFail: 当广告加载失败时触发。
• enableLoadingDialog: 是否启用加载对话框。

激励视频广告（Rewarded Interstitial）

激励视频广告通常用于奖励用户观看广告后获得一些奖励。

1. 创建静态变量

static RewardHolder rewardHolder = RewardHolder(idAndroid: "your_admob_reward_id_android", idIOS: "your_admob_reward_id_ios");

2. 加载并展示激励视频广告

AdmobUtils.loadAndShowRewardedInterstitial(rewardHolder,
onEarned: () {
  // 用户获得奖励后的操作
}, onAdClosed: () {
  // 广告关闭后的操作
}, onAdFail: () {
  // 广告加载失败后的操作
}, enableLoadingDialog: true);

• onEarned: 用户获得奖励后的操作。
• onAdClosed: 广告关闭后的操作。
• onAdFail: 广告加载失败后的操作。
• enableLoadingDialog: 是否启用加载对话框。

注意事项

• 原生广告支持单独定制每个平台（目前仅限Android）。
• Android平台的原生广告代码位于MainActivity文件中。
• 布局文件位于res/layout目录下。
• 原生广告的背景文件位于res/drawable目录下。

完整示例代码

import 'package:dktech_ads/ads_manager.dart';
import 'package:dktech_ads/ads_utils/admob_utils.dart';
import 'package:dktech_ads/screen2.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';

Future<void> main() async {
  AdmobUtils.initAdmob(isDebug: true, isShowAds: true);
  SystemChrome.setPreferredOrientations(
      [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
      builder: EasyLoading.init(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  void initState() {
    super.initState();
    AdsManager.loadNativeMediumWithLayout(context, AdsManager.nativeHolder);
    AdsManager.loadBanner(context, AdsManager.bannerHolder);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: Text(widget.title),
        ),
        body: Column(
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            AdmobUtils.bannerView(AdsManager.bannerHolder),
          ],
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            AdsManager.loadAndShowInter(context, AdsManager.interHolder, () {
              Navigator.push(context,
                  CupertinoPageRoute(builder: (context) => const Screen2()));
            });
          },
          tooltip: 'Increment',
          child: const Icon(Icons.add),
        ), // This trailing comma makes auto-formatting nicer for build methods.
      ),
    );
  }
}