Flutter新功能预览插件flutter_canary的使用方法详解

Flutter新功能预览插件flutter_canary的使用方法详解

flutter_canary接入指南

flutter_canary 是一个用于测试或预览新功能的插件。它可以帮助开发者在开发过程中快速集成和调试新功能。以下是接入指南：

编译隔离设置

在项目中启用 CANARY_ENABLE 宏，用于编译时隔离新功能代码。

#if CANARY_ENABLE
import flutter_canary
#endif

func config() {
    #if CANARY_ENABLE
        // 设置Web端部署的域名
        flutter_canary.shared.baseURL = "http://frontend.xinc818.com"
        // 设置应用授权码
        flutter_canary.shared.appSecret = "c8269eb66def959332fb0ddb1b5d4dc2"
        // 设置设备标识
        flutter_canary.shared.deviceId = "7da5c360-a3fa-11eb-bcbc-0242ac130002"
        // 添加自定义日志处理
        DDLog.add(CanaryTTYLogger.shared)
        // 启动日志监听
        flutter_canary.shared.startLogger(domain: nil) { () -> [String : Any] in
            var mdict: [String : Any] = [:]
            mdict["APNSToken"] = CloudPushSDK.getApnsDeviceToken()
            mdict["阿里云推送DeviceId"] = CloudPushSDK.getDeviceId()
            mdict["登录数据"] = UserDefaults.standard.dictionary(forKey: "VIP8.com_UserInfoDic")
            mdict["游客数据"] = UserDefaults.standard.dictionary(forKey: "VIP8.com_VisitorInfoDic")
            return mdict
        }
    #endif
}

日志记录器实现

实现自定义的日志记录器，用于存储和处理日志信息。

class CanaryTTYLogger: DDAbstractLogger {
    static let shared = CanaryTTYLogger()
    
    override func log(message logMessage: DDLogMessage) {
        #if CANARY_ENABLE
        flutter_canary.shared.storeLogMessage(dict: logMessage.dictionaryWithValues(forKeys: StoreLogKeys), timestamp: logMessage.timestamp.timeIntervalSince1970)
        #endif
    }
}

启动配置页面

通过调用 show() 方法打开配置页面。

CanarySwift.shared.show()

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 项目中使用 flutter_canary 插件。

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

import 'package:flutter/services.dart';
import 'package:flutter_canary/flutter_canary.dart';

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

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

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

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHome(),
    );
  }
}

class MyHome extends StatefulWidget {
  const MyHome({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyHome> createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  String _platformVersion = 'Unknown';
  bool connect = false;
  String? _testValue;

  static const MethodChannel _testChannel =
      MethodChannel('canary_example_channel');

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

  void initCanary() {
    FlutterCanary.instance.configure('82e439d7968b7c366e24a41d7f53f47d',
        service: 'http://127.0.0.1:9001/api', deviceid: 'canary-device-id');
    _testValue = FlutterCanary.instance.configValue('TestParam1');
  }

  // 初始化平台状态
  Future<void> initPlatformState() async {
    String platformVersion;
    try {
      platformVersion = await FlutterCanary.platformVersion ?? 'Unknown platform version';
    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
    }
    if (!mounted) return;

    setState(() {
      _platformVersion = platformVersion;
    });
  }

  // 测试连接
  void _testCanary() {
    if (connect) {
      FlutterCanary.instance.stop();
    } else {
      FlutterCanary.instance.start();
    }
    setState(() {
      connect = !connect;
    });
  }

  // 记录日志
  void log(String msg, {StackTrace? trace, bool network = false}) async {
    await _testChannel
        .invokeMethod(network ? 'logger-request' : 'logger', true)
        .then((value) => null);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    Widget current = Scaffold(
      appBar: AppBar(
        title: const Text('Plugin example app'),
      ),
      body: Center(
        child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
          Text('Running on: $_platformVersion\n'),
          TextButton(
              onPressed: _testCanary,
              child: Text(connect ? '关闭连接' : '连接测试')),
          TextButton(onPressed: () => log('日志测试'), child: const Text('测试日志')),
          TextButton(
              onPressed: () => log('日志测试', network: true),
              child: const Text('测试日志-网络')),
          TextButton(
              onPressed: () =>
                  setState(() {
                    _testValue = FlutterCanary.instance.configValue('TestParam1');
                  }),
              child: Text('TestParam1 = $_testValue'))
        ]),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _testCanary();
          FlutterCanary.instance.showOptions(context);
        },
        child: const Icon(Icons.play_arrow),
      ),
    );
    return current;
  }
}