Flutter未定义功能插件 flutter_duit 的使用

flutter_duit 是一个用于Flutter的后端UI框架，主要用于创建小部件和服务器端状态管理。本文将介绍如何使用这个插件，并提供一个完整的示例demo。

核心特性

• 初始连接到服务器并接收布局
• 支持不同的网络协议（如HTTP、WebSocket）
• 精确的小部件状态更新（仅更新服务器返回更新的小部件）
• 动作API，允许服务器为与小部件关联的动作指定依赖关系
• 能够添加自定义小部件

使用步骤

1. 创建 DuitDriver 实例

DuitDriver 负责显示UI，更新小部件的状态，并调用与小部件相关联的动作。

final driver = DuitDriver(
  "/layout",
  transportOptions: HttpTransportOptions(
    defaultHeaders: {"Content-Type": "application/json"},
    baseUrl: "http://localhost:8999",
  ),
);

2. 在应用程序中嵌入 DuitViewHost 小部件

在 build 方法中嵌入 DuitViewHost 小部件。

DuitViewHost(
  driver: driver,
  placeholder: const CircularProgressIndicator(),
)

完整示例代码

以下是一个完整的示例，展示了如何设置和运行一个基本的Flutter应用，该应用使用了 flutter_duit 插件。

import 'dart:convert';
import 'dart:typed_data';

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

// 自定义解码器
class CustomDecoder extends Converter<Uint8List, Map<String, dynamic>> {
  [@override](/user/override)
  Map<String, dynamic> convert(Uint8List input) {
    return jsonDecode(utf8.decode(input));
  }
}

// 运输选项类
class HttpTransportOptions extends TransportOptions {
  final String baseUrl;
  final Map<String, String> defaultHeaders;

  HttpTransportOptions({required this.baseUrl, required this.defaultHeaders});
}

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 注册自定义小部件（如果有的话）
  // DuitRegistry.register(...);

  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Duit Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late final DuitDriver driver;

  [@override](/user/override)
  void initState() {
    driver = DuitDriver(
      "/example_screen",
      transportOptions: HttpTransportOptions(
        defaultHeaders: {
          "Content-Type": "application/json",
        },
        baseUrl: "http://localhost:8999",
      ),
    );
    super.initState();
  }

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: DuitViewHost(
            driver: driver,
            errorWidgetBuilder: (context, error) => Text(error.toString()),
            placeholder: const CircularProgressIndicator(),
          ),
        ),
      ),
    );
  }
}