Flutter广告横幅插件card_banner的使用

使用card_banner插件可以轻松地在任何小部件上添加广告横幅。以下是关于如何使用该插件的详细指南。

特性

• 高度可定制。
• 多平台支持。

开始使用

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

dependencies:
    card_banner: <最新版本>

你也可以使用以下命令来添加依赖：

flutter pub add card_banner

然后在你的 Dart 文件中导入该库：

import 'package:card_banner/card_banner.dart';

截图

使用示例

以下是一个简单的例子，展示如何在卡片小部件上覆盖广告横幅，并提供所需的文字。这就是你需要做的所有事情。

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color.fromARGB(255, 221, 222, 245),
      body: ListView.builder(
        padding: const EdgeInsets.symmetric(horizontal: 10),
        itemCount: 8,
        itemBuilder: (context, index) {
          return CardBanner(
            text: "50% Off",
            child: foodCard(),
          );
        },
      ),
    );
  }

  // 定义一个卡片小部件
  Card foodCard() {
    return Card(
      child: ListTile(
        contentPadding: EdgeInsets.zero,
        title: Image.network(
          "https://images.pexels.com/photos/461198/pexels-photo-461198.jpeg",
          fit: BoxFit.cover,
        ),
        subtitle: const Padding(
          padding: EdgeInsets.all(12.0),
          child: Text(
            "Nulla cillum qui elit adipisicing culpa ad laboris amet laboris velit. Pariatur sit tempor nostrud non duis commodo laboris. Consequat incididunt laborum qui dolore in velit consequat mollit amet. Proident eu et sint veniam sunt fugiat quis fugiat sunt pariatur do enim in.",
            overflow: TextOverflow.ellipsis,
            maxLines: 3,
          ),
        ),
      ),
    );
  }
}

完整示例代码

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Card Banner Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyBanner(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color.fromARGB(255, 221, 222, 245),
      body: ListView.builder(
        padding: const EdgeInsets.symmetric(horizontal: 10),
        itemCount: 8,
        itemBuilder: (context, index) {
          return CardBanner(
            text: "50% Off",
            child: foodCard(),
          );
        },
      ),
    );
  }

  // 定义一个卡片小部件
  Card foodCard() {
    return Card(
      child: ListTile(
        contentPadding: EdgeInsets.zero,
        title: Image.network(
          "https://images.pexels.com/photos/461198/pexels-photo-461198.jpeg",
          fit: BoxFit.cover,
        ),
        subtitle: const Padding(
          padding: EdgeInsets.all(12.0),
          child: Text(
            "Nulla cillum qui elit adipisicing culpa ad laboris amet laboris velit. Pariatur sit tempor nostrud non duis commodo laboris. Consequat incididunt laborum qui dolore in velit consequat mollit amet. Proident eu et sint veniam sunt fugiat quis fugiat sunt pariatur do enim in.",
            overflow: TextOverflow.ellipsis,
            maxLines: 3,
          ),
        ),
      ),
    );
  }
}