Flutter学习辅助插件yc_plugin_learn的使用

yc_plugin_learn

yc_plugin_learn 是一个用于帮助开发者学习 Flutter 的插件，它提供了多种功能来演示如何在 Flutter 项目中嵌入原生代码、原生 View，以及实现双方的事件交互。此外，还展示了如何在插件中使用第三方库（如 Glide）加载图片。

插件功能概述

• Flutter 与原生互相传递事件信息
• 在原生项目中使用第三方包（如 Glide）加载图片
• Flutter 页面上嵌入原生 View，并实现独立的事件互传
• 如何在插件代码中获取当前 Context
• 插件开发中 Android 代码报红的解决

支持平台

Getting Started

以下是使用 yc_plugin_learn 插件的步骤及示例代码。

示例效果

示例代码

以下代码展示了如何在 Flutter 项目中集成并使用 yc_plugin_learn 插件。

import 'dart:io';
import 'dart:typed_data';

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

import 'package:flutter/services.dart';
import 'package:yc_plugin_learn/base/abstract/IFFScaffold.dart';
import 'package:yc_plugin_learn/base/demos/Start.dart';
import 'package:yc_plugin_learn/yc_plugin_learn.dart';
import 'package:yc_plugin_learn_example/TestView.dart';

import 'package:pull_to_refresh/pull_to_refresh.dart';

/**
 * 本插件项目主要演示以下几个方面，主要用于教学使用
 * 1. flutter与原生互相传递事件信息
 * 2. 在原生项目中使用第三方包glide加载图片，主要用于演示如何在插件中使用第三方包
 * 3. flutter页面上嵌入原生view，并实现独立的事件互传
 * 4. 如何在插件代码里获取当前Context
 * 5. 插件开发中Android代码报红的解决
 */

/******************** 注意，下面的代码用来演示插件的用法 */
/******************** 注意，下面的代码用来演示插件的用法 */
/******************** 注意，下面的代码用来演示插件的用法 */
/******************** 注意，下面的代码用来演示插件的用法 */
/******************** 注意，下面的代码用来演示插件的用法 */
/******************** 注意，下面的代码用来演示插件的用法 */
/******************** 注意，下面的代码用来演示插件的用法 */
/******************** 注意，下面的代码用来演示插件的用法 */

void main() {
  // 初始化 Flutter 引擎
  WidgetsFlutterBinding.ensureInitialized();
  // 设置透明状态栏
  SystemChrome.setSystemUIOverlayStyle(
    const SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
    ),
  );
  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 MaterialApp(
      title: '演示项目',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Start(), // 启动页面
    );
  }
}

初始化插件

在 Flutter 项目中初始化 yc_plugin_learn 插件：

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

  // 初始化插件
  YcPluginLearn.init(appId: "your_app_id").then((value) {
    print("flutter init ${value}");

    // 测试功能，打开后可以看到来自原生的回调
    // YcPluginLearn.test();
  });

  // 设置回调
  YcPluginLearn.ycPluginCallBack = this;
}

加载图片数据

通过插件加载网络图片并显示：

Future<void> initData() async {
  // 使用插件加载图片
  Uint8List? data = await YcPluginLearn.getImage(
    "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F052420110515%2F200524110515-2-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653472637&t=0a02c0594866f17f15d29a4753161f6e",
  );

  setState(() {
    _data = data;
  });
}

嵌入原生 View

通过插件嵌入原生 View 并实现事件交互：

GestureDetector(
  onTap: () {
    print("点我了");
    width += 5;
    setState(() {});
  },
  child: Container(
    height: 40,
    child: Text("点我刷新页面宽度"),
    color: Colors.blue,
  ),
),

/// 用来加载原生 view
TestView(
  width: width,
),

回调方法

实现插件回调接口以处理原生发送的事件：

[@override](/user/override)
void minuteCallBack(String minute) {
  print("minuteCallBack minute = ${minute}");
}

[@override](/user/override)
void secondCallBack(String second) {
  print("secondCallBack second = ${second}");
}

[@override](/user/override)
void appListCallBack(list) {
  // 处理原生发送的列表数据
}