Flutter促销信息展示插件promotion_overlay的使用

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

Flutter促销信息展示插件promotion_overlay的使用

Promotion Overlay插件

pub pub points package publisher

Promotion Overlay 是一个为iOS和macOS设计的Flutter插件(未来将支持Android)。它使用 SKOverlay 展示原生促销弹窗,允许用户在不离开当前应用的情况下直接安装推荐的应用。该插件包括了广告活动跟踪功能,并可以控制弹窗的位置和可见性。

Android iOS Linux macOS Web Windows
支持 - 14.0+ - 14.0+ - -

使用方法

要使用此插件,你需要在 pubspec.yaml 文件中添加 promotion_overlay 作为依赖项。

dependencies:
  promotion_overlay: ^1.0.5

实例化PromotionOverlay对象

你需要指定以下参数:

  • appIdentifier(必填,推荐应用的iTunes标识符(仅限iOS))
  • campaignToken(可选,用于表示广告活动并衡量其效果的令牌(仅限iOS))
  • providerToken(可选,表示应用推广活动提供商的令牌,并用于衡量活动的效果(仅限iOS))
  • dismissOnBackground(可选,默认为true,表示用户切换到其他应用时是否关闭弹窗(仅限iOS))
  • position(可选,默认为 .bottom,表示弹窗在屏幕上的位置)

如何使用

// 创建一个弹窗实例
final PromotionOverlay promotionOverlay = PromotionOverlay('identifier',
    campaignToken: 'campaignToken', providerToken: 'providerToken');

// 显示弹窗
final promotionOverlay = await promotionOverlay.show();

// 关闭弹窗
promotionOverlay.dismiss();

示例代码

以下是一个完整的示例代码,展示了如何使用 promotion_overlay 插件。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter promotion_overlay 示例',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
            seedColor: const Color.fromRGBO(255, 27, 61, 1)),
        useMaterial3: true,
      ),
      debugShowCheckedModeBanner: false,
      home: const MyHomePage(title: 'Flutter promotion_overlay 示例'),
    );
  }
}

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> {
  PromotionOverlay? promotionOverlay;

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

    // 初始化PromotionOverlay实例
    promotionOverlay = PromotionOverlay('1498057243');
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.primary,
        title: Text(widget.title, style: const TextStyle(color: Colors.white)),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () => promotionOverlay!.show(),
              child: const Text('打开弹窗'),
            ),
            const SizedBox(height: 24),
            ElevatedButton(
              onPressed: () => promotionOverlay!.dismiss(),
              child: const Text('关闭弹窗'),
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


当然,下面是一个关于如何在Flutter应用中使用promotion_overlay插件来展示促销信息的示例代码。promotion_overlay是一个假想的插件名称,实际中可能需要使用具体的第三方插件或自定义实现类似功能。不过,我会基于一个假设的API来编写示例代码,以展示如何集成和使用此类插件。

首先,确保你已经在pubspec.yaml文件中添加了promotion_overlay依赖(假设它存在于pub.dev上,或者如果你自己实现了这个插件,确保它已经正确集成到你的项目中)。

dependencies:
  flutter:
    sdk: flutter
  promotion_overlay: ^1.0.0  # 假设版本号

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

接下来,在你的Flutter应用中,你可以按照以下方式使用PromotionOverlay插件来展示促销信息。

import 'package:flutter/material.dart';
import 'package:promotion_overlay/promotion_overlay.dart';  // 假设的包路径

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PromotionScreen(),
    );
  }
}

class PromotionScreen extends StatefulWidget {
  @override
  _PromotionScreenState createState() => _PromotionScreenState();
}

class _PromotionScreenState extends State<PromotionScreen> {
  PromotionOverlayController _promotionController;

  @override
  void initState() {
    super.initState();
    // 初始化PromotionOverlayController
    _promotionController = PromotionOverlayController();

    // 设置促销信息
    _promotionController.showPromotion(
      Promotion(
        title: '大促销!',
        subTitle: '所有商品5折起',
        imageUrl: 'https://example.com/promotion_image.jpg',
        actionText: '查看详情',
        onActionPressed: () {
          // 用户点击了查看详情按钮后的处理逻辑
          Navigator.pushNamed(context, '/promotionDetails');
        },
      ),
    );
  }

  @override
  void dispose() {
    // 释放资源
    _promotionController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('促销信息展示'),
      ),
      body: Stack(
        children: [
          // 主内容
          Center(
            child: Text('这里是主内容区域'),
          ),
          // 促销信息覆盖层(假设PromotionOverlay.overlay是一个全局的覆盖层)
          if (_promotionController.isPromotionVisible)
            PromotionOverlay.overlay(
              controller: _promotionController,
            ),
        ],
      ),
    );
  }
}

// 假设的Promotion类
class Promotion {
  final String title;
  final String subTitle;
  final String imageUrl;
  final String actionText;
  final VoidCallback onActionPressed;

  Promotion({
    required this.title,
    required this.subTitle,
    required this.imageUrl,
    required this.actionText,
    required this.onActionPressed,
  });
}

// 假设的PromotionOverlayController类
class PromotionOverlayController {
  bool _isPromotionVisible = false;
  late Promotion _currentPromotion;

  bool get isPromotionVisible => _isPromotionVisible;

  void showPromotion(Promotion promotion) {
    _currentPromotion = promotion;
    _isPromotionVisible = true;
    // 这里可以添加逻辑来显示促销信息,比如使用OverlayEntry等
    // 示例中省略具体实现
  }

  void hidePromotion() {
    _isPromotionVisible = false;
    // 这里可以添加逻辑来隐藏促销信息
    // 示例中省略具体实现
  }

  void dispose() {
    // 清理资源
  }
}

// 注意:PromotionOverlay和PromotionOverlayController是假设的类,
// 实际使用中应参考具体插件的文档进行实现。

注意:上面的代码是一个简化的示例,用于说明如何在Flutter应用中集成和使用一个假设的promotion_overlay插件。在实际应用中,你需要参考具体插件的文档来了解如何正确初始化和使用它。如果promotion_overlay是一个真实存在的插件,那么它的API和用法可能会有所不同,请务必查阅其官方文档。

如果promotion_overlay不存在,你可以考虑使用OverlayOverlayEntry来自定义实现类似的功能。

回到顶部