Flutter可移动墨迹插件movable_ink_plugin的使用

movable_ink_plugin 是一个用于在 Flutter 应用程序中集成 Movable Ink SDK 的插件。通过这个插件，开发者可以轻松地追踪用户的操作并发送事件到 Movable Ink 平台。

使用示例

下面是一个完整的示例，展示了如何在 Flutter 应用程序中使用 movable_ink_plugin 插件。

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:movable_ink_plugin/movable_ink_plugin.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _resolvedURL = '';
  final _movableInkPlugin = MovableInkPlugin();
  StreamSubscription<String>? streamSubscription;

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

    initMovableInkListener();
  }

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

    streamSubscription?.cancel();
  }

  void initMovableInkListener() async {
    // 开始监听 Movable Ink SDK 的事件
    streamSubscription = _movableInkPlugin.start().listen((String data) {
      debugPrint('Resolved Deeplink: $data');

      // 更新界面状态
      setState(() {
        _resolvedURL = data;
      });
    }, onError: (error) {
      debugPrint('start error: ${error.toString()}');
    });

    // 设置 Movable Ink SDK 的唯一标识符
    _movableInkPlugin.setMIU("00000000-0000-0000-0000-000000000000");
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Movable SDK 测试'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Padding(
                padding: const EdgeInsets.all(12.0),
                child: ElevatedButton(
                  style: ElevatedButton.styleFrom(minimumSize: const Size.fromHeight(60)),
                  onPressed: () {
                    _resolveUrl();
                  },
                  child: const Text('解析 URL'),
                ),
              ),
              Text('解析后的 URL: $_resolvedURL',
                  style: const TextStyle(
                    fontSize: 12.0,
                    fontWeight: FontWeight.bold,
                  )),
              Padding(
                  padding: const EdgeInsets.all(12.0),
                  child: ElevatedButton(
                    style: ElevatedButton.styleFrom(minimumSize: const Size.fromHeight(60)),
                    onPressed: () {
                      _orderCompleted();
                    },
                    child: const Text('订单完成'),
                  )),
              Padding(
                  padding: const EdgeInsets.all(12.0),
                  child: ElevatedButton(
                    style: ElevatedButton.styleFrom(minimumSize: const Size.fromHeight(60)),
                    onPressed: () {
                      _productViewed();
                    },
                    child: const Text('产品查看'),
                  )),
              Padding(
                  padding: const EdgeInsets.all(12.0),
                  child: ElevatedButton(
                    style: ElevatedButton.styleFrom(minimumSize: const Size.fromHeight(60)),
                    onPressed: () {
                      _categoryViewed();
                    },
                    child: const Text('分类查看'),
                  )),
              Padding(
                  padding: const EdgeInsets.all(12.0),
                  child: ElevatedButton(
                    style: ElevatedButton.styleFrom(minimumSize: const Size.fromHeight(60)),
                    onPressed: () {
                      _productSearched();
                    },
                    child: const Text('产品搜索'),
                  )),
              Padding(
                  padding: const EdgeInsets.all(12.0),
                  child: ElevatedButton(
                    style: ElevatedButton.styleFrom(minimumSize: const Size.fromHeight(60)),
                    onPressed: () {
                      _productAdded();
                    },
                    child: const Text('产品添加'),
                  )),
              Padding(
                  padding: const EdgeInsets.all(12.0),
                  child: ElevatedButton(
                    style: ElevatedButton.styleFrom(minimumSize: const Size.fromHeight(60)),
                    onPressed: () {
                      _productRemoved();
                    },
                    child: const Text('产品移除'),
                  )),
              Padding(
                  padding: const EdgeInsets.all(12.0),
                  child: ElevatedButton(
                    style: ElevatedButton.styleFrom(minimumSize: const Size.fromHeight(60)),
                    onPressed: () {
                      _surfaceMessage();
                    },
                    child: const Text('显示应用内消息'),
                  )),
            ],
          ),
        ),
      ),
    );
  }

  // 解析 URL 并更新状态
  void _resolveUrl() {
    String urlString =
        "https://www.movable-ink-7158.com/p/cpm/f9e1dde60c339938/c?mi_u=999999&url=https%3A%2F%2Fwww.movable-ink-7158.com%2Fp%2Frpm%2F4ff5ef609123c272%2Furl&url_sig=U4ZfyQRrrBylUa";

    _movableInkPlugin.resolveUrl(urlString).then((value) {
      setState(() {
        _resolvedURL = value ?? '';
      });
    });
  }

  // 显示应用内消息
  void _surfaceMessage() {
    _movableInkPlugin
        .showInAppMessage("https://www.movable-ink-7158.com/p/rp/bc49c08945403625.html");
  }

  // 记录用户查看分类
  void _categoryViewed() {
    final Map<String, dynamic> properties = {
      "id": "sci-fi",
      "title": "科幻",
      "url": "https://inkrediblebooks.com/hyperion-dan-simmons"
    };
    _movableInkPlugin.categoryViewed(properties);
  }

  // 记录用户添加产品
  void _productAdded() {
    final Map<String, dynamic> properties = {
      "id": "1",
      "title": "Hyperion",
      "price": "15.99",
      "url": "https://inkrediblebooks.com/hyperion-dan-simmons",
      "categories": [
        {"id": "Sci-Fi", "url": "https://inkrediblebooks.com/categories/scifi"},
        {"id": "Fiction", "url": "https://inkrediblebooks.com/categories/fiction"}
      ],
      "meta": {"pages": 496}
    };
    _movableInkPlugin.productAdded(properties);
  }

  // 记录用户移除产品
  void _productRemoved() {
    final Map<String, dynamic> properties = {
      "id": "1",
      "title": "Hyperion",
      "price": "15.99",
      "url": "https://inkrediblebooks.com/hyperion-dan-simmons",
      "categories": [
        {"id": "Sci-Fi", "url": "https://inkrediblebooks.com/categories/scifi"},
        {"id": "Fiction", "url": "https://inkrediblebooks.com/categories/fiction"}
      ],
      "meta": {"pages": 496}
    };
    _movableInkPlugin.productRemoved(properties);
  }

  // 记录用户查看产品
  void _productViewed() {
    final Map<String, dynamic> properties = {
      "id": "1",
      "title": "Hyperion",
      "price": "15.99",
      "url": "https://inkrediblebooks.com/hyperion-dan-simmons",
      "categories": [
        {"id": "Sci-Fi", "url": "https://inkrediblebooks.com/categories/scifi"},
        {"id": "Fiction", "url": "https://inkrediblebooks.com/categories/fiction"}
      ],
      "meta": {"pages": 496}
    };
    _movableInkPlugin.productViewed(properties);
  }

  // 记录用户完成订单
  void _orderCompleted() {
    final Map<String, dynamic> properties = {
      "id": "123",
      "revenue": "300.00",
      "products": [
        {"id": "111-6666", "price": "150.00", "quantity": 2}
      ]
    };
    _movableInkPlugin.orderCompleted(properties);
  }

  // 记录用户搜索产品
  void _productSearched() {
    final Map<String, dynamic> properties = {"query": "search_term"};
    _movableInkPlugin.productSearched(properties);
  }
}

更多关于Flutter可移动墨迹插件movable_ink_plugin的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

caililin 1楼

更多关于Flutter可移动墨迹插件movable_ink_plugin的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter项目中使用movable_ink_plugin插件的一个基本示例。这个插件允许你在Flutter应用中创建可移动的墨迹效果。请注意，你需要先确保你的Flutter环境已经设置好，并且已经在pubspec.yaml文件中添加了movable_ink_plugin依赖。

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

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

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

接下来，是一个简单的示例代码，展示如何在Flutter中使用movable_ink_plugin：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Movable Ink Plugin Example'),
        ),
        body: MovableInkExample(),
      ),
    );
  }
}

class MovableInkExample extends StatefulWidget {
  @override
  _MovableInkExampleState createState() => _MovableInkExampleState();
}

class _MovableInkExampleState extends State<MovableInkExample> {
  final MovableInkController _controller = MovableInkController();

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          MovableInk(
            controller: _controller,
            inkStyle: MovableInkStyle(
              color: Colors.blue,
              strokeWidth: 5.0,
            ),
            onInkCreated: (path) {
              print('Ink created with path: $path');
            },
            onInkMoved: (path) {
              print('Ink moved with path: $path');
            },
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              // 清空墨迹
              _controller.clearInk();
            },
            child: Text('Clear Ink'),
          ),
        ],
      ),
    );
  }
}

在这个示例中：

我们首先创建了一个MovableInkController实例，它将用于控制墨迹的行为。
MovableInk小部件被添加到UI中，它允许用户在其上绘制墨迹。
inkStyle属性定义了墨迹的样式，比如颜色和线条宽度。
onInkCreated和onInkMoved回调函数分别在墨迹创建和移动时被调用，可以用于调试或执行其他逻辑。
一个按钮被添加到UI中，当用户点击该按钮时，会调用_controller.clearInk()方法来清空所有墨迹。

请确保你已经按照插件的文档正确设置了权限和其他必要的配置，以便在真实设备上使用。

这个示例提供了一个基本的框架，你可以根据自己的需求进一步扩展和定制。