Flutter广告网格视图插件ad_gridview的使用

发布于 1周前 作者 wuwangju 来自 Flutter

Flutter广告网格视图插件ad_gridview的使用

ad_gridview 是一个 Flutter 插件,用于在 GridView 中轻松显示原生广告或其他任何小部件。

特性

  • 无缝集成原生广告:只需几步即可将原生广告无缝集成到你的 GridView 中。
  • 轻松添加任意小部件:可以轻松地将你选择的任何小部件添加到 GridView 中。
  • 灵活添加小部件:无论是单个实例还是多个实例,都可以通过简单的步骤轻松添加到 GridView 布局中。

开始使用

添加依赖

在你的 pubspec.yaml 文件中添加 ad_gridview 作为依赖:

dependencies:
  ...
  ad_gridview: <latest_version>

导入库

在你的 Dart 文件中导入 ad_gridview 库:

import 'package:ad_gridview/ad_gridview.dart';

使用方法

AdGridView(
  crossAxisCount: crossAxisCount,
  itemCount: itemCount,
  adIndex: adIndex,
  adWidget: adWidget,
  itemWidget: itemWidget,
)

参数说明

  • crossAxisCount:每行显示的小部件数量。
  • itemCount:总的小部件数量。
  • adIndex:广告小部件的位置索引。
  • adWidget:广告小部件。
  • itemWidget:普通小部件。

示例类型

类型 描述
Once 单次显示广告
Repeated 多次重复显示广告
Custom 自定义显示广告

示例图片

Once Repeated Custom
Once Repeated Custom

完整示例代码

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const Homepage(),
    );
  }
}

class Homepage extends StatefulWidget {
  const Homepage({super.key});

  @override
  State<Homepage> createState() => _HomepageState();
}

class _HomepageState extends State<Homepage> {
  List list = [
    1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("AdGridView Homepage")),
      body: AdGridView(
        crossAxisCount: 4,
        itemCount: list.length,
        adIndex: 2,
        itemMainAspectRatio: 1 / 1,
        adWidget: Container(
          height: 150,
          margin: const EdgeInsets.symmetric(horizontal: 5),
          color: Colors.blue,
          child: const Center(
            child: Text(
              "Native Ad",
              style: TextStyle(fontSize: 60),
            ),
          ),
        ),
        itemWidget: (context, index) {
          return Container(
            height: 150,
            width: 160,
            margin: const EdgeInsets.all(5),
            color: Colors.grey,
            child: Center(
              child: Text(
                "${list[index]}",
                style: const TextStyle(fontSize: 30),
              ),
            ),
          );
        },
      ),
    );
  }
}

以上代码展示了如何在 GridView 中插入广告小部件。你可以根据需要调整 adIndex 和其他参数来实现不同的布局效果。希望这个示例对你有所帮助!


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

1 回复

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


当然,下面是一个关于如何在Flutter项目中使用ad_gridview插件来创建广告网格视图的示例代码。这个插件可以帮助你以网格形式展示广告或其他内容。

首先,确保你已经在pubspec.yaml文件中添加了ad_gridview依赖:

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

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

接下来,在你的Dart文件中,你可以按照以下方式使用AdGridView

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Ad GridView Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AdGridViewExample(),
    );
  }
}

class AdGridViewExample extends StatelessWidget {
  final List<String> imageUrls = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg',
    // 添加更多图片URL
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Ad GridView Example'),
      ),
      body: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2, // 每行显示多少个广告项
          crossAxisSpacing: 4.0,
          mainAxisSpacing: 4.0,
        ),
        itemCount: imageUrls.length,
        itemBuilder: (BuildContext context, int index) {
          return AdGridViewItem(
            imageUrl: imageUrls[index],
            onAdClick: () {
              // 广告点击事件处理
              print('Ad clicked at index: $index');
              // 可以导航到另一个页面或执行其他操作
            },
            // 其他可选参数,如广告标题、描述等
            adTitle: 'Ad Title $index',
            adDescription: 'Ad Description $index',
          );
        },
      ),
    );
  }
}

// 假设AdGridViewItem是一个自定义的Widget,用于展示单个广告项
// 实际上,你需要根据ad_gridview插件的文档或其提供的组件来创建这个Widget
// 如果ad_gridview插件提供了直接的AdGridViewItem组件,则直接使用它
// 这里只是一个示例,展示如何组织数据并传递给一个假设的Widget
class AdGridViewItem extends StatelessWidget {
  final String imageUrl;
  final VoidCallback onAdClick;
  final String adTitle;
  final String adDescription;

  AdGridViewItem({
    required this.imageUrl,
    required this.onAdClick,
    required this.adTitle,
    required this.adDescription,
  });

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onAdClick,
      child: Card(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Image.network(
              imageUrl,
              fit: BoxFit.cover,
            ),
            SizedBox(height: 8.0),
            Text(
              adTitle,
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 4.0),
            Text(
              adDescription,
              style: TextStyle(fontSize: 14, color: Colors.grey),
            ),
          ],
        ),
      ),
    );
  }
}

注意

  1. 上面的代码假设ad_gridview插件没有直接提供一个名为AdGridViewItem的组件。实际上,你可能需要根据插件的文档直接使用它提供的组件。
  2. imageUrls列表包含了广告的图片URL,你需要替换为实际的广告图片URL。
  3. onAdClick回调用于处理广告点击事件。
  4. AdGridViewItem是一个自定义的Widget,用于展示单个广告项。如果ad_gridview插件提供了类似的组件,请直接使用它。

务必查阅ad_gridview插件的官方文档以获取最新的使用指南和组件信息。

回到顶部