Flutter广告集成插件flutter_outbrain_ads的使用

Flutter广告集成插件flutter_outbrain_ads的使用

A Flutter package to show outbrain ads for Android and iOS. 注意：此插件是非官方的。

平台支持

Android iOS
✔️ ✔️

使用

要使用此插件，在你的 pubspec.yaml 文件中添加 flutter_outbrain_ads 作为依赖项。

dependencies:
  flutter_outbrain_ads: ^版本号

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

设置

在你的 AndroidManifest.xml 文件中添加以下权限：

<uses-permission android:name="com.google.android.gms.permission.AD_ID"/>

示例

首先，导入包：

import 'package:flutter_outbrain_ads/flutter_outbrain_ads.dart';

然后在你的代码中使用它：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Outbrain Ads',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Outbrain Ads'),
    );
  }
}

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)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            Text(
              'You can show Ads easily like this:',
            ),
            SizedBox(height: 8),
            Padding(
              padding: EdgeInsets.all(8.0),
              child: OutbrainAd(
                permalink: 
                  'http://www.webx0.com/2010/07/some-posthype-thoughts-about-flipboard.html', // 替换为你的广告链接
                outbrainAndroidDataObInstallationKey: 
                  'DEMOP1MN24J3E1MGLQ92067LH', // 替换为你的Android安装密钥
                outbrainAndroidWidgetId: 'AR_1', // 替换为你的Android部件ID
                outbrainIosDataObInstallationKey: 
                  'DEMOP1MN24J3E1MGLQ92067LH', // 替换为你的iOS安装密钥
                outbrainIosWidgetId: 'AR_1', // 替换为你的iOS部件ID
                darkMode: true, // 是否启用暗模式
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


当然，以下是一个关于如何在Flutter项目中集成并使用flutter_outbrain_ads插件的示例代码。这个示例假定你已经有一个Flutter项目，并且已经添加了flutter_outbrain_ads依赖。

首先，你需要在你的pubspec.yaml文件中添加flutter_outbrain_ads依赖：

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

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

接下来，你需要按照Outbrain的要求获取你的广告位ID（Placement ID）和其他必要的配置信息。

以下是如何在你的Flutter应用中集成和使用flutter_outbrain_ads插件的示例代码：

  1. 初始化插件

在你的主文件（通常是main.dart）中，你可以初始化插件并设置必要的配置：

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

void main() {
  // 初始化Outbrain Ads插件
  FlutterOutbrainAds.instance.init(
    placementId: '你的广告位ID', // 替换为你的实际广告位ID
    // 其他可选配置，如测试模式等
    // testMode: true,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}
  1. 显示广告

在你的MyHomePage或其他页面中，你可以调用方法来请求并显示广告：

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

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Outbrain Ads Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 请求并显示广告
            FlutterOutbrainAds.instance.loadAndShowAd().then((result) {
              if (result) {
                print('广告成功显示');
              } else {
                print('广告显示失败');
              }
            }).catchError((error) {
              print('广告加载或显示时发生错误: $error');
            });
          },
          child: Text('显示广告'),
        ),
      ),
    );
  }
}

在这个示例中，当用户点击“显示广告”按钮时，应用会尝试加载并显示Outbrain广告。如果广告成功显示，控制台会打印“广告成功显示”；如果失败，则会打印“广告显示失败”。如果加载或显示广告时发生错误，则会捕获并打印错误信息。

请注意，这只是一个基本的示例，实际使用时你可能需要根据Outbrain的文档和你的应用需求进行更多的配置和处理。例如，处理广告加载完成或失败时的用户反馈、管理广告刷新频率等。

此外，确保你已经遵循Outbrain的集成指南，包括在Outbrain平台上为你的应用配置广告位等步骤。

回到顶部