Flutter芯片组件插件my_chips_flutter_sdk的使用

Flutter芯片组件插件my_chips_flutter_sdk的使用

描述

MyChips Flutter SDK插件用于在Flutter应用中集成奖励墙等功能。

使用

初始化SDK

在使用SDK之前,必须使用您的API密钥进行初始化。

await MCOfferwallSdk.instance.init(yourApiKey);

设置用户ID

您可以选择性地设置用户ID。如果您不提供用户ID,SDK将自动生成一个。一旦设置了用户ID(无论是手动还是自动),它将一直使用直到提供新的用户ID为止。要手动提供用户ID:

await MCOfferwallSdk.instance.setUserId(userId); 

检查奖励

要检查是否有奖励,请使用checkReward函数。该函数需要您的广告单元ID、奖励回调(如果有奖励会调用)以及错误回调:

MCOfferwallSdk.instance.checkReward(
    adUnitId: yourAdUnitId,
    onReward: (reward) {
        // 做一些与奖励相关的操作,这里我们只是打印出来
        print("Reward: $reward");
    },
    onError: (e, st) {
        // 在发生错误时做一些操作,这里我们只是打印出来
        print("Error: $e");
        print("Stacktrace: $st");
    });

显示奖励墙

为了显示奖励墙,我们提供了一个名为OfferwallPage的Widget。您应该将其作为页面展示,并使用您喜欢的导航包或方法。例如,使用默认的Flutter导航器:

Navigator.of(context).push(
    MaterialPageRoute(
        builder: (context) => OfferwallPage(
        adunitId: yourAdUnitId,
        ),
    ),
);

示例代码

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

import 'dart:developer';

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

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: MainAppBody(),
      ),
    );
  }
}

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

  @override
  State<MainAppBody> createState() => _MainAppBodyState();
}

class _MainAppBodyState extends State<MainAppBody> {
  late final AppLifecycleListener _appLifecycleListener;

  final adunitId = "5612fe1f-8cdb-4bb7-bc89-850fa59d2c9c";
  final apiKey = "3kQCjW1GfVOESHFd";
  final userId = "flutterTestUserId2";

  Future<void> initialize() async {
    // 初始化SDK并设置用户ID
    await MCOfferwallSdk.instance.init(apiKey);
    await MCOfferwallSdk.instance.setUserId(userId);

    // 在示例中,让我们在应用恢复时检查奖励
    _appLifecycleListener = AppLifecycleListener(
      onResume: () {
        log("Checking for reward");

        MCOfferwallSdk.instance.checkReward(
          adUnitId: adunitId,
          onReward: (reward) {
            // 显示SnackBar
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text("Reward: ${reward.virtualCurrencyReward}"),
              ),
            );
            log("Reward: ${reward.virtualCurrencyReward}");
          },
          onError: (e, st) {
            // 显示带有错误信息的SnackBar
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text("Error: $e"),
              ),
            );

            log("Error: $e");
          },
        );
      },
    );
  }

  @override
  void initState() {
    super.initState();
    initialize();
  }

  @override
  void dispose() {
    _appLifecycleListener.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
          child: const Text('显示奖励墙!'),
          onPressed: () async {
            // 导航到奖励墙页面
            Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context) => OfferwallPage(
                  adunitId: adunitId,
                ),
              ),
            );
          }),
    );
  }
}

更多关于Flutter芯片组件插件my_chips_flutter_sdk的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter芯片组件插件my_chips_flutter_sdk的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中集成和使用my_chips_flutter_sdk插件的一个示例代码案例。假设你已经创建了一个Flutter项目,并且已经在pubspec.yaml文件中添加了my_chips_flutter_sdk依赖。

1. 添加依赖

首先,在你的pubspec.yaml文件中添加my_chips_flutter_sdk依赖:

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

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

2. 导入插件

在你的Dart文件中导入my_chips_flutter_sdk

import 'package:my_chips_flutter_sdk/my_chips_flutter_sdk.dart';

3. 使用Chip组件

下面是一个简单的示例,展示如何在你的Flutter应用中使用my_chips_flutter_sdk提供的Chip组件。

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

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

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

class ChipExampleScreen extends StatefulWidget {
  @override
  _ChipExampleScreenState createState() => _ChipExampleScreenState();
}

class _ChipExampleScreenState extends State<ChipExampleScreen> {
  final List<String> chips = ['Chip 1', 'Chip 2', 'Chip 3'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chip Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              'Single Chip:',
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 8),
            MyChip(
              label: Text('Single Chip'),
              onDeleted: () {
                print('Single Chip deleted');
              },
            ),
            SizedBox(height: 24),
            Text(
              'Multiple Chips:',
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 8),
            Wrap(
              spacing: 4,
              runSpacing: 4,
              children: chips.map((chip) {
                return MyChip(
                  label: Text(chip),
                  onDeleted: () {
                    setState(() {
                      chips.remove(chip);
                    });
                  },
                );
              }).toList(),
            ),
          ],
        ),
      ),
    );
  }
}

注意

  1. MyChip组件可能是my_chips_flutter_sdk插件提供的一个自定义Chip组件。由于my_chips_flutter_sdk的具体实现细节和API可能有所不同,你需要参考该插件的官方文档来确认实际的组件名称和使用方法。
  2. 如果my_chips_flutter_sdk插件没有提供MyChip组件,你可能需要使用插件提供的其他Chip组件,或者参考插件的示例代码进行调整。
  3. 确保你已经正确安装并导入了my_chips_flutter_sdk插件,并且在运行应用之前已经解决了所有依赖问题。

这个示例代码展示了如何在Flutter应用中使用Chip组件,包括单个Chip和多个Chip的列表。你可以根据实际需求进一步定制和扩展这些组件。

回到顶部