Flutter核心功能创建插件creator_core的使用

发布于 1周前 作者 yuanlaile 来自 Flutter

Flutter核心功能创建插件 creator_core 的使用

creator_core 是一个状态管理库,旨在实现简洁、流畅、可读和可测试的业务逻辑代码。本文将介绍如何在Flutter项目中使用 creator_core

一、简介

creator_core 提供了两个主要类型:CreatorEmitter。它们可以依赖其他 CreatorEmitter,并在其状态变化时更新自身状态。

主要特点

  • 支持同步和异步状态管理。
  • 简单易学的概念模型。
  • 没有复杂的“提供”机制。
  • 易于测试。

二、安装

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

dependencies:
  creator: ^最新版本号

然后运行以下命令来安装包:

dart pub get

三、基本用法

1. 创建 Creator

Creator 可以通过初始值或一个函数来创建。

import 'package:creator/creator.dart';

void main() {
  // 创建一个初始值为0的 Creator
  final counter = Creator.value(0);

  // 使用函数创建 Creator
  final doubleCounter = Creator((ref) => ref.watch(counter) * 2);
}

2. 更新状态

你可以使用 setupdate 方法来更新 Creator 的状态。

context.ref.set(counter, 5);  // 直接设置新值
context.ref.update<int>(counter, (currentValue) => currentValue + 1);  // 基于当前值更新

3. 观察状态变化

使用 Watcher 来监听状态变化,并根据状态变化重新构建UI组件。

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

class MyWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Watcher((context, ref, _) => 
        Text('${ref.watch(counter)}'));
  }
}

4. 使用 Emitter 处理异步数据

对于需要处理异步数据的情况,可以使用 Emitter

final futureData = Emitter<String>((ref, emit) async {
  final result = await fetchData();
  emit(result);
});

然后在UI中使用它:

return Watcher((context, ref, _) {
  final data = ref.watch(futureData.asyncData).data;
  return data != null ? Text(data) : CircularProgressIndicator();
});

四、示例 Demo

下面是一个完整的示例,展示了如何使用 creator_core 来实现一个简单的计数器应用。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return CreatorGraph(
      child: MaterialApp(
        home: CounterScreen(),
      ),
    );
  }
}

class CounterScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 创建一个初始值为0的 Creator
    final counter = Creator.value(0);

    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 使用 Watcher 监听 counter 的变化并更新显示
            Watcher((context, ref, _) => Text('${ref.watch(counter)}', style: TextStyle(fontSize: 50))),
            SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                ElevatedButton(
                  onPressed: () => context.ref.update<int>(counter, (count) => count - 1),
                  child: Text('-'),
                ),
                ElevatedButton(
                  onPressed: () => context.ref.update<int>(counter, (count) => count + 1),
                  child: Text('+'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter核心功能创建插件creator_core的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter核心功能创建插件creator_core的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中,创建和使用插件是扩展应用功能的重要手段。creator_core作为一个假设的Flutter核心功能插件,虽然实际中并不存在这样一个官方插件,但我们可以基于Flutter插件开发的一般流程来模拟一个类似的实现。以下是一个简化的例子,展示如何创建一个名为creator_core的Flutter插件,并在应用中使用它。

1. 创建Flutter插件

首先,我们需要创建一个Flutter插件项目。假设我们使用的是命令行工具。

flutter create --org com.example --template=plugin creator_core

这将创建一个名为creator_core的插件项目,包含Dart代码和原生平台(Android和iOS)代码的基础结构。

2. 实现插件功能

Dart 代码(lib/creator_core.dart)

在插件的Dart部分,我们定义一个简单的接口,例如一个方法返回一条欢迎信息。

import 'dart:async';

class CreatorCore {
  static const MethodChannel _channel = MethodChannel('com.example.creator_core');

  static Future<String?> get platformVersion async {
    final String? version = await _channel.invokeMethod('getPlatformVersion');
    return version;
  }
}

Android 代码(android/src/main/java/com/example/creator_core/CreatorCorePlugin.java)

在Android部分,我们实现与Dart代码通信的方法。

package com.example.creator_core;

import androidx.annotation.NonNull;
import io.flutter.embedding.engine.plugins.FlutterPlugin;
import io.flutter.embedding.engine.plugins.activity.ActivityAware;
import io.flutter.embedding.engine.plugins.activity.ActivityPluginBinding;
import io.flutter.plugin.common.MethodCall;
import io.flutter.plugin.common.MethodChannel;
import io.flutter.plugin.common.MethodChannel.MethodCallHandler;
import io.flutter.plugin.common.MethodChannel.Result;
import android.app.Activity;

public class CreatorCorePlugin implements FlutterPlugin, ActivityAware, MethodCallHandler {
  private MethodChannel channel;
  private Activity activity;

  @Override
  public void onAttachedToEngine(@NonNull FlutterPluginBinding flutterPluginBinding) {
    channel = new MethodChannel(flutterPluginBinding.getBinaryMessenger(), "com.example.creator_core");
    channel.setMethodCallHandler(this);
  }

  @Override
  public void onMethodCall(@NonNull MethodCall call, @NonNull Result result) {
    if (call.method.equals("getPlatformVersion")) {
      String version = android.os.Build.VERSION.RELEASE;
      result.success(version);
    } else {
      result.notImplemented();
    }
  }

  @Override
  public void onDetachedFromEngine(@NonNull FlutterPluginBinding binding) {
    channel.setMethodCallHandler(null);
  }

  @Override
  public void onAttachedToActivity(ActivityPluginBinding binding) {
    activity = binding.getActivity();
  }

  @Override
  public void onDetachedFromActivityForConfigChanges() {
    activity = null;
  }

  @Override
  public void onReattachedToActivityForConfigChanges(ActivityPluginBinding binding) {
    activity = binding.getActivity();
  }

  @Override
  public void onDetachedFromActivity() {
    activity = null;
  }
}

iOS 代码(ios/Classes/CreatorCorePlugin.swift)

在iOS部分,同样实现与Dart代码通信的方法。

import Flutter

public class CreatorCorePlugin: NSObject, FlutterPlugin {
  public static func register(with registrar: FlutterRegistrar) {
    let channel = FlutterMethodChannel(name: "com.example.creator_core", binaryMessenger: registrar.messenger())
    let instance = CreatorCorePlugin()
    registrar.addMethodCallDelegate(instance, channel: channel)
  }

  public func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) {
    if call.method == "getPlatformVersion" {
      let version = ProcessInfo.processInfo.operatingSystemVersion.string(by: .major) ?? "unknown"
      result(version)
    } else {
      result(FlutterMethodNotImplemented)
    }
  }
}

3. 在Flutter应用中使用插件

现在,我们回到Flutter应用项目,添加对creator_core插件的依赖,并使用它。

添加依赖

在应用的pubspec.yaml文件中添加依赖:

dependencies:
  flutter:
    sdk: flutter
  creator_core:
    path: ../path/to/creator_core  # 指向插件项目的本地路径

使用插件

在应用的主Dart文件中使用插件:

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String? _platformVersion = 'Unknown';

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

  Future<void> _getPlatformVersion() async {
    String? version = await CreatorCore.platformVersion;
    setState(() {
      _platformVersion = version;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: Text('Running on: $_platformVersion\n'),
        ),
      ),
    );
  }
}

以上代码展示了一个简单的Flutter插件creator_core的创建和使用过程。实际应用中,插件的功能可能会复杂得多,但这个例子提供了一个基本的框架,帮助你理解如何在Flutter中创建和使用插件。

回到顶部