Flutter广告展示插件ads_flutter的使用

Flutter广告展示插件ads_flutter的使用

本文将详细介绍如何在Flutter项目中使用ads_flutter插件来展示广告。通过本教程,您将能够快速集成广告功能到您的Flutter应用中。


准备工作

在开始之前,请确保您已经安装了以下工具:

  • Flutter SDK
  • Android Studio 或 Visual Studio Code
  • 配置好Android或iOS开发环境

添加依赖

pubspec.yaml文件中添加ads_flutter依赖:

dependencies:
  ads_flutter: ^0.1.0 # 请根据实际版本号进行替换

然后运行以下命令以安装依赖:

flutter pub get

初始化广告

main.dart文件中初始化广告插件,并配置广告ID。

import 'package:flutter/material.dart';
import 'package:ads_flutter/ads_flutter.dart'; // 导入广告插件

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  late BannerAd bannerAd; // 声明Banner广告对象

  [@override](/user/override)
  void initState() {
    super.initState();

    // 初始化Banner广告
    bannerAd = BannerAd(
      adUnitId: 'ca-app-pub-3940256099942544/6300978111', // 替换为您的广告单元ID
      size: AdSize.BANNER,
      listener: BannerAdListener(
        onAdLoaded: (ad) {
          print("广告加载成功");
        },
        onAdFailedToLoad: (ad, error) {
          print("广告加载失败: $error");
          ad.dispose(); // 销毁广告实例
        },
      ),
    );

    // 加载广告
    bannerAd.load();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter广告展示'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '欢迎使用ads_flutter展示广告',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            // 显示Banner广告
            Container(
              width: bannerAd.size.width.toDouble(),
              height: bannerAd.size.height.toDouble(),
              child: AdWidget(ad: bannerAd),
            ),
          ],
        ),
      ),
    );
  }

  [@override](/user/override)
  void dispose() {
    bannerAd.dispose(); // 销毁广告实例以释放资源
    super.dispose();
  }
}

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

1 回复

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


ads_flutter 是一个用于在 Flutter 应用中展示广告的插件。它支持多种广告格式,如横幅广告、插页式广告、原生广告和激励视频广告。以下是使用 ads_flutter 插件的基本步骤:

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  ads_flutter: ^latest_version

然后运行 flutter pub get 来获取依赖。

2. 初始化广告 SDK

在应用启动时,你需要初始化广告 SDK。通常情况下,你可以在 main.dart 文件中进行初始化:

import 'package:ads_flutter/ads_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await AdsFlutter.initialize(
    androidAppId: 'your_android_app_id',
    iosAppId: 'your_ios_app_id',
  );
  runApp(MyApp());
}

3. 展示横幅广告

横幅广告通常显示在屏幕的顶部或底部。你可以使用 BannerAd 组件来展示横幅广告:

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Banner Ad Example'),
      ),
      body: Column(
        children: [
          Expanded(
            child: Center(
              child: Text('Your app content here'),
            ),
          ),
          BannerAd(
            adUnitId: 'your_banner_ad_unit_id',
            size: AdSize.banner,
            listener: (AdEvent event) {
              print('Banner Ad event: $event');
            },
          ),
        ],
      ),
    );
  }
}

4. 展示插页式广告

插页式广告通常在全屏模式下展示。你可以在用户执行某些操作(如点击按钮)时展示插页式广告:

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

class MyHomePage extends StatelessWidget {
  final InterstitialAd interstitialAd = InterstitialAd(
    adUnitId: 'your_interstitial_ad_unit_id',
    listener: (AdEvent event) {
      print('Interstitial Ad event: $event');
    },
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Interstitial Ad Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            interstitialAd.load();
            interstitialAd.show();
          },
          child: Text('Show Interstitial Ad'),
        ),
      ),
    );
  }
}

5. 展示激励视频广告

激励视频广告通常用于奖励用户观看视频。你可以在用户完成观看后给予奖励:

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

class MyHomePage extends StatelessWidget {
  final RewardedAd rewardedAd = RewardedAd(
    adUnitId: 'your_rewarded_ad_unit_id',
    listener: (AdEvent event, {RewardItem? reward}) {
      print('Rewarded Ad event: $event');
      if (event == AdEvent.rewarded) {
        // Grant the reward to the user
        print('Reward: ${reward?.amount} ${reward?.type}');
      }
    },
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Rewarded Ad Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            rewardedAd.load();
            rewardedAd.show();
          },
          child: Text('Show Rewarded Ad'),
        ),
      ),
    );
  }
}

6. 展示原生广告

原生广告是一种自定义广告格式,可以与应用的内容无缝集成:

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

class MyHomePage extends StatelessWidget {
  final NativeAd nativeAd = NativeAd(
    adUnitId: 'your_native_ad_unit_id',
    factoryId: 'your_native_ad_factory_id',
    listener: (AdEvent event) {
      print('Native Ad event: $event');
    },
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Native Ad Example'),
      ),
      body: Center(
        child: Column(
          children: [
            Expanded(
              child: Center(
                child: Text('Your app content here'),
              ),
            ),
            NativeAdWidget(nativeAd: nativeAd),
          ],
        ),
      ),
    );
  }
}

7. 处理广告生命周期

确保在适当的时机加载和释放广告资源,以避免内存泄漏。例如,在页面销毁时释放广告资源:

@override
void dispose() {
  interstitialAd.dispose();
  rewardedAd.dispose();
  nativeAd.dispose();
  super.dispose();
}

8. 测试广告

在开发过程中,你可以使用测试广告单元 ID 和测试设备 ID 来确保广告正常工作。

await AdsFlutter.initialize(
  androidAppId: 'ca-app-pub-3940256099942544~3347511713',
  iosAppId: 'ca-app-pub-3940256099942544~1458002511',
  testDeviceIds: ['your_test_device_id'],
);
回到顶部