Flutter媒体模板插件mediatemplate的功能使用

Media Template

展示移动设备上的模板。

它支持以下模板：

• POP_UP
• FLOATING_BAR
• FULL_SCREEN
• INLINE
• SLIDE_IN
• GAMIFIED

Media Template

Getting Started

对于如何开始使用Flutter，可以查看在线文档(https://flutter.dev/)。

iOS

为了让插件正常工作，你需要在ios/Runner/Info.plist文件中添加一个新的键值对：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
    <key>NSAllowsArbitraryLoadsInWebContent</key>
    <true/>
</dict>

NSAllowsArbitraryLoadsInWebContent适用于iOS 10及以上版本，而NSAllowsArbitraryLoads适用于iOS 9。

Install

通过以下命令安装插件：

flutter pub add mediatemplate

Example

以下是一个完整的示例代码，展示了如何使用mediatemplate插件：

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:mediatemplate/mediatemplate.dart';
import 'package:flutter/scheduler.dart';
import 'package:device_info_plus/device_info_plus.dart';
import 'package:flutter/services.dart';
import 'package:android_id/android_id.dart';
import 'dart:io' show Platform;

class FloatingBar extends StatefulWidget {
  final String deviceId;

  const FloatingBar({required this.deviceId});

  [@override](/user/override)
  State<FloatingBar> createState() => _FloatingBarState();
}

class _FloatingBarState extends State<FloatingBar> {
  late AdInfo _ad;
  bool loaded = false;
  String? deviceId;
  static final DeviceInfoPlugin deviceInfo = DeviceInfoPlugin();

  [@override](/user/override)
  void initState() {
    _initState();
  }

  Future<void> _initState() async {
    if (Platform.isAndroid) {
      const androidId = AndroidId();
      deviceId = await androidId.getId();
    } else if (Platform.isIOS) {
      final iosInfo = await deviceInfo.iosInfo;
      deviceId = iosInfo.identifierForVendor;
    } else if (Platform.isLinux) {
      final linuxInfo = await deviceInfo.linuxInfo;
      deviceId = linuxInfo.machineId;
    } else if (Platform.isWindows) {
      final windowsInfo = await deviceInfo.windowsInfo;
      deviceId = windowsInfo.deviceId;
    } else if (Platform.isMacOS) {
      final macOsInfo = await deviceInfo.macOsInfo;
      deviceId = macOsInfo.systemGUID;
    }

    Ads.load(
        portalId: 561236459,
        propsId: 564990801,
        ec: 'product',
        ea: 'view',
        templateType: 'floating_bar',
        zoneCode: 'div_asm_inline',
        userId: deviceId,
        onAdFailedToLoad: (String error) {
          print(error);
        },
        onAdLoaded: (AdInfo ad) {
          setState(() {
            _ad = ad;
            loaded = true;
          });
        });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    final scaffoldKey = GlobalKey<ScaffoldState>();

    if (loaded) {
      WidgetsBinding.instance.addPostFrameCallback((_) {
        Ads.show(_ad, context, scaffoldKey);
      });
    }

    return Scaffold(
        key: scaffoldKey,
        appBar: AppBar(
          title: const Text('FloatingBar'),
        ),
        body: Center(
          child: ElevatedButton(
            child: const Text('Home'),
            onPressed: () {
              // 导航到主页。
              Navigator.pop(context);
            },
          ),
        ));
  }
}

Usage

• 打开示例代码以获取更多信息。

示例代码完整展示

以下是完整的示例代码，包括所有模板的实现：

import 'package:example/floatingbar.dart';
import 'package:flutter/material.dart';
import 'package:mediatemplate/mediatemplate.dart';
import 'package:flutter/scheduler.dart';

import './floatingbar.dart';
import './fullscreen.dart';
import './popup.dart';
import './slidein.dart';
import './inline.dart';
import './gamified.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

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

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  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: [
            ElevatedButton(
              child: const Text('Floating Bar'),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const FloatingBar(deviceId: '22312')),
                );
              },
            ),
            ElevatedButton(
              child: const Text('Full Screen'),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const FullScreen()),
                );
              },
            ),
            ElevatedButton(
              child: const Text('Popup'),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const Popup()),
                );
              },
            ),
            ElevatedButton(
              child: const Text('Slide in'),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const SlideIn()),
                );
              },
            ),
            ElevatedButton(
              child: const Text('Inline'),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const Inline()),
                );
              },
            ),
            ElevatedButton(
              child: const Text('Gamified'),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const Gamified()),
                );
              },
            )
          ],
        ),
      ),
    );
  }
}