Flutter华为广告集成插件huawei_ads的使用

Flutter华为广告集成插件huawei_ads的使用

华为广告套件Flutter插件

华为广告套件Flutter插件

pub.dev版本


本插件用于实现华为广告SDK与Flutter平台之间的通信。华为广告套件Flutter插件提供了以下两种服务:

  • 发布者服务:华为广告发布者服务利用华为庞大的用户基础和广泛的数据能力,向用户推送有针对性的高质量广告内容。通过此服务,您的应用能够在带来相关内容的同时创造收益。

  • 标识符服务:华为广告套件提供开放广告标识符(OAID),供广告主用于推送个性化广告并追踪转化。

了解更多

安装

请参阅 pub.devAppGallery Connect 配置

文档

问题或反馈

如果您在使用HMS样本时遇到问题,请尝试以下选项:

  • Stack Overflow 是任何编程问题的最佳选择。请务必用 huawei-mobile-services 标签标记您的问题。
  • GitHub 是这些插件的官方仓库,您可以在此提交问题或提出建议。
  • 华为开发者论坛 HMS Core模块非常适合一般问题、寻求推荐和意见。
  • 华为开发者文档 是所有HMS核心套件的官方文档所在,您可以在此找到详细的文档。

如果您在我们的样本中发现了一个错误,请提交到 GitHub仓库

许可证

华为广告套件Flutter插件遵循 Apache 2.0许可证

示例代码

/*
    Copyright 2020-2024. Huawei Technologies Co., Ltd. All rights reserved.

    Licensed under the Apache License, Version 2.0 (the "License")
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

        https://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
*/

import 'package:flutter/material.dart';
import 'package:huawei_ads/huawei_ads.dart'; // 导入华为广告包
import 'package:huawei_ads_example/pages/ads_menu_page.dart'; // 导入广告菜单页面

void main() async {
  WidgetsFlutterBinding.ensureInitialized(); // 确保初始化Flutter绑定
  
  try {
    await HwAds.init(); // 初始化华为广告
    await VastSdkFactory.init( // 初始化VAST SDK配置
      VastSdkConfiguration(isTest: true), // 设置为测试模式
    );
    await VastSdkFactory.userAcceptAdLicense(true); // 用户接受广告许可
  } catch (e) {
    debugPrint('异常 | $e'); // 打印异常信息
  }

  runApp(const HmsAdsDemo()); // 运行应用
}

class HmsAdsDemo extends StatelessWidget { // 定义应用类
  const HmsAdsDemo({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: AdsMenuPage(), // 设置主页
    );
  }
}

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

1 回复

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


当然,以下是一个关于如何在Flutter项目中集成和使用华为广告插件huawei_ads的代码案例。这包括基本的广告位创建、加载和展示广告的过程。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  huawei_ads: ^版本号  # 请替换为当前最新版本号

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

2. 配置Android项目

2.1 在android/app/build.gradle中添加以下内容:

android {
    ...
    defaultConfig {
        ...
        manifestPlaceholders = [
                'app_id': '你的华为应用ID', // 替换为你的华为应用ID
                'cp_id': '你的渠道ID'       // 如果需要的话,替换为你的渠道ID
        ]
    }
}

dependencies {
    implementation 'com.huawei.hms:ads-identifier:3.4.35.302'
    implementation 'com.huawei.hms:ads-lite:13.4.35.302' // 根据需要选择ads或ads-lite
}

2.2 在android/app/src/main/AndroidManifest.xml中添加必要的权限和meta-data:

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

    <application
        ... >
        
        <!-- 添加meta-data -->
        <meta-data
            android:name="com.huawei.hms.client.appid"
            android:value="${app_id}" />

        <!-- 如果使用ads而非ads-lite,则可能还需要其他配置 -->
    </application>

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

3. 初始化华为广告服务

在你的Flutter项目的入口文件(通常是main.dart)中初始化华为广告服务:

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

void main() {
  runApp(MyApp());
  // 初始化华为广告服务
  HuaweiAds.instance.init();
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('华为广告集成示例'),
        ),
        body: MyHomePage(),
      ),
    );
  }
}

4. 加载和展示广告

在你的主页面(MyHomePage.dart)中加载和展示广告:

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

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

class _MyHomePageState extends State<MyHomePage> {
  BannerAd? _bannerAd;
  InterstitialAd? _interstitialAd;

  @override
  void initState() {
    super.initState();
    _loadBannerAd();
    _loadInterstitialAd();
  }

  void _loadBannerAd() {
    final BannerAdSize size = BannerAdSize.BANNER_320_50;
    final AdSlot adSlot = AdSlot(
      adId: '你的Banner广告位ID', // 替换为你的广告位ID
      width: size.width.toDouble(),
      height: size.height.toDouble(),
    );

    _bannerAd = BannerAd(
      adSlot: adSlot,
      listener: BannerAdListener(
        onAdLoaded: () {
          print('Banner广告加载成功');
        },
        onAdFailedToLoad: (AdError error) {
          print('Banner广告加载失败: ${error.message}');
        },
        onAdClicked: () {
          print('Banner广告被点击');
        },
      ),
    )..load();
  }

  void _loadInterstitialAd() {
    final AdSlot adSlot = AdSlot(
      adId: '你的插屏广告位ID', // 替换为你的广告位ID
    );

    _interstitialAd = InterstitialAd(
      adSlot: adSlot,
      listener: InterstitialAdListener(
        onAdLoaded: () {
          print('插屏广告加载成功');
          // 可以在这里选择展示广告
          _interstitialAd!.show();
        },
        onAdFailedToLoad: (AdError error) {
          print('插屏广告加载失败: ${error.message}');
        },
        onAdShown: () {
          print('插屏广告已展示');
        },
        onAdClosed: () {
          print('插屏广告已关闭');
          // 广告关闭后,可以重新加载广告
          _loadInterstitialAd();
        },
      ),
    )..load();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Container(
          height: 50,
          child: _bannerAd!.widget, // 展示Banner广告
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {
            // 请求展示插屏广告(如果已加载)
            _interstitialAd?.show();
          },
          child: Text('展示插屏广告'),
        ),
      ],
    );
  }

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

注意事项

  1. 广告位ID:确保你已经在华为广告平台创建了相应的广告位,并使用了正确的广告位ID。
  2. 测试广告:在开发阶段,建议使用华为提供的测试广告位ID和测试设备来测试广告集成。
  3. 权限管理:确保你的应用已经请求并获得了必要的权限。
  4. 错误处理:在生产环境中,应添加更完善的错误处理逻辑,以应对广告加载失败等情况。

通过上述步骤,你应该能够在Flutter应用中成功集成并展示华为广告。

回到顶部