Flutter广告服务管理插件flutter_adserver的使用

Flutter广告服务管理插件flutter_adserver的使用

特性

TODO: 列出您的包可以做什么。也许可以包括图片、GIF或视频。

开始使用

TODO: 列出先决条件并提供或指向如何开始使用该包的信息。

使用

TODO: 包含对用户有用的简短示例。将较长示例添加到/example文件夹中。

const like = 'sample';

示例代码

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_adserver/ads.dart'; // 引入广告服务的核心库
import 'package:flutter_adserver/adview.dart'; // 引入广告视图组件
import 'package:flutter_adserver/model/config.dart'; // 引入配置模型

void main() {
  runApp(const MyApp()); // 启动应用程序
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // 这个小部件是您的应用的根。它是一个无状态小部件。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 广告服务示例', // 应用程序的标题
      theme: ThemeData(
        // 设置应用程序的主题颜色
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter 广告服务示例'), // 设置主页
    );
  }
}

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

  // 这个小部件是您应用的主页。它是有状态的,意味着它有一个状态对象(定义在下面)来影响其外观。
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState(); // 初始化状态
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化广告服务
    Ads().init(Config(
      apiConfig: APIConfig("", "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjZiNzY1YmFlYTFlNDg1ZjJlMjMyN2E4NDM0NWNlNzdmNTM3MjQzYjYwMjc4NDFjMzczY2ExNGRiOTk4YmQ4YWM4MmEzNjU5ODg2ZjEzMjhjIn0.eyJhdWQiOiI4IiwianRpIjoiNmI3NjViYWVhMWU0ODVmMmUyMzI3YTg0MzQ1Y2U3N2Y1MzcyNDNiNjAyNzg0MWMzNzNjYTE0ZGI5OThiZDhhYzgyYTM2NTk4ODZmMTMyOGMiLCJpYXQiOjE2NDY4MjAxNTUsIm5iZiI6MTY0NjgyMDE1NSwiZXhwIjoxNjQ2OTkyOTU1LCJzdWIiOiIxNzM1MTIiLCJzY29wZXMiOlsic3Vic2NyaWJlciJdLCJwYXJhbXMiOnsiaWQiOjE3MzUxMiwicmVzZWxsZXJfaWQiOjUsInVzZXJuYW1lIjoibmlyb2ptYWhhcmphbjIwNTAiLCJzZXJpYWwiOiIwMDIyNkQ4QTdCQTMiLCJzZXNzaW9uIjoiIiwicmVzZWxsZXIiOiJ3b3JsZGxpbmsiLCJleHBpcnlfZGF0ZSI6IjIwMjUtMDEtMTEgMDA6MDA6MDAiLCJjb250ZW50X2V4cGlyeSI6IjAiLCJhdXRoX21vZGUiOiJzZXJpYWwiLCJyZXF1ZXN0ZWRfdXNlciI6bnVsbCwic2Vzc2lvbl9pZCI6bnVsbCwiZGV0YWlscyI6IjE3MzUxMi03MjU1NzEyIn19.H3AauBn5b99RAmzfurqza0encRp4iz0KzojCCrUaumE8QAswnATOeY8StNCMmUfbAC2ULpV77Z2lKnNohgT0m6Mn5XW6zdgTawRaeUSAhzl0W0NeDMA6IRzdorg99wfYpzmAMOtah6lcNNgXMdplsfVAwcIBqIYd-DQrADJtQj_GJ85U13pXXTwz-Pr_V9-9_-XrsN-irYeVcMTCsZeU89U-Z0NIAtxQI_48jv0tOyujja3YMvt6XJxSOZP6j-S-wFVU-qj7Oh-ih2jwkN0JkKs7KMkQ3kxzGKzEi5gDqGh_P-fkoc32IQczfglw-6kKKnMbtY5N__HrkloiB-FfKYtijTbFK02a9_b2Sdpy9fqmexhLfNE_E9DKWSu69RMoIQv5wu9iA6JyBaDHEGTvZkZFIbVzooPgDFS3yHJGTvFNn_4g8A_55U-l1sGHvbbvs8mGLHaO40lkjTOdrryDc54FKCt8bGdwiaOft4Crl7TlYdH1aT8QRC3LwhhtSbUsVHxzyZgMIOVEij3xcKLD4-jcGSyCal7tspT_6kydLVpnnKtFIibCulfJWxrqzGz9GUYOkTOGGoqjRrBoSOfYWECnEiSDJH-Rl69oGgk4pvP-D8D3fyZ0nj4P0a2Z2stmFoRpXH1XNfo2dAA5LDuiGezDHXTlMYnjxRAjoWR64jc"),
      deviceConfig: DeviceConfig("flutter", null), // 配置设备信息
      userConfig: UserConfig("5", "00226D8A7BA3", "173512"), // 配置用户信息
    ));
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    print("called main multiple time"); // 打印日志
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title), // 设置应用栏标题
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center, // 垂直居中排列子组件
          children: [
            Container(
              height: 100,
              width: 100,
              child: AdView( // 显示广告视图
                adSlot: "app-10001-0005", // 广告位ID
                boxFit: null, // 设置广告视图的填充方式
              ),
            ),
            Text(
              '$_counter', // 显示计数器
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


flutter_adserver 是一个用于在 Flutter 应用中管理和展示广告的插件。它可以帮助开发者轻松集成和管理广告服务,包括横幅广告、插页式广告、原生广告等。以下是如何使用 flutter_adserver 插件的基本步骤:

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  flutter_adserver: ^1.0.0  # 请使用最新版本

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

2. 初始化广告服务

在你的 Flutter 应用中,首先需要初始化广告服务。通常,你可以在 main.dart 文件中进行初始化:

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化广告服务
  await FlutterAdserver.initialize(
    appId: 'YOUR_APP_ID',  // 替换为你的应用ID
    adUnitId: 'YOUR_AD_UNIT_ID',  // 替换为你的广告单元ID
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter AdServer Demo',
      home: HomeScreen(),
    );
  }
}

3. 展示横幅广告

要在应用中展示横幅广告,你可以使用 BannerAdWidget

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

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter AdServer Demo'),
      ),
      body: Column(
        children: [
          Expanded(
            child: Center(
              child: Text('Your app content here'),
            ),
          ),
          // 展示横幅广告
          BannerAdWidget(
            adUnitId: 'YOUR_BANNER_AD_UNIT_ID',  // 替换为你的横幅广告单元ID
            size: AdSize.banner,
          ),
        ],
      ),
    );
  }
}

4. 展示插页式广告

要展示插页式广告,你可以使用 InterstitialAd

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

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter AdServer Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            // 加载插页式广告
            await FlutterAdserver.loadInterstitialAd(
              adUnitId: 'YOUR_INTERSTITIAL_AD_UNIT_ID',  // 替换为你的插页式广告单元ID
            );
            // 展示插页式广告
            await FlutterAdserver.showInterstitialAd();
          },
          child: Text('Show Interstitial Ad'),
        ),
      ),
    );
  }
}

5. 展示原生广告

要展示原生广告,你可以使用 NativeAdWidget

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

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter AdServer Demo'),
      ),
      body: Column(
        children: [
          Expanded(
            child: Center(
              child: Text('Your app content here'),
            ),
          ),
          // 展示原生广告
          NativeAdWidget(
            adUnitId: 'YOUR_NATIVE_AD_UNIT_ID',  // 替换为你的原生广告单元ID
          ),
        ],
      ),
    );
  }
}

6. 处理广告事件

你可以监听广告事件,例如广告加载成功、广告加载失败等:

FlutterAdserver.setAdListener(
  onAdLoaded: (ad) {
    print('Ad loaded: $ad');
  },
  onAdFailedToLoad: (error) {
    print('Ad failed to load: $error');
  },
  onAdOpened: () {
    print('Ad opened');
  },
  onAdClosed: () {
    print('Ad closed');
  },
);

7. 测试广告

在开发过程中,你可以使用测试广告单元 ID 来测试广告展示:

BannerAdWidget(
  adUnitId: FlutterAdserver.testBannerAdUnitId,  // 使用测试横幅广告单元ID
  size: AdSize.banner,
);
回到顶部