Flutter服务器端驱动UI插件server_driven_ui的使用

Flutter服务器端驱动UI #

🚀 用于Flutter的服务器端驱动UI包。通过后端更改，可以同时在所有平台上部署新功能，而无需发布原生应用的新版本。

🚀 快速开始 #

下载该插件：

flutter pub add server_driven_ui

获取JSON并将其解析为小部件：

void main() {
  String json = """
  {
    "widgetName": "Scaffold"
  }
  """;

  runApp(MyApp(json: json));
}

class MyApp extends StatelessWidget {
  late String json;

  MyApp({required this.json});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: RouteWidget(
        provider: StaticContentProvider(content: json),
      ),
    );
  }
}

也可以创建并使用自定义小部件：

class CustomWidget extends BaseWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Text("Hello, World!");
  }
}

void main() {
  // 参数 = 小部件名称, 小部件工厂
  WidgetRegistry.register('CustomWidget', () => CustomWidget()); // 将自定义小部件注册到服务器驱动UI小部件工厂存储。

  String json = """
  {
    "widgetName": "Scaffold",
    "child": {
      "widgetName": "CustomWidget"
    }
  }
  """;

  runApp(MyApp(json: json));
}

🖼️ 架构（核心逻辑） #

📄 文档 #

前往flutter-server-driven-ui GitHub Wiki。

📄 许可证 #

flutter-server-driven-ui 使用的是BSD-3-Clause许可。

示例代码

example/main.dart

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

class ScaffoldWidget extends BaseWidget {
  late BaseWidget title;
  
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        body: getChildWidget(context),
        appBar: AppBar(title: title.build(context)));
  }

  [@override](/user/override)
  void setProperties(JSON json) {
    title = JSONParser.toWidget(json["title"]);
  }
}

class ColumnWidget extends BaseWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(children: getChildrenWidget(context));
  }
}

class TextWidget extends BaseWidget {
  late String message;
  late WidgetAction onClick;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Text(message),
      onTap: () => onClick.execute(context),
    );
  }

  [@override](/user/override)
  void setProperties(JSON json) {
    message = json["message"] ?? "";
    onClick = JSONParser.toAction(json["onClick"]);
  }
}

AnimatedWidget verticalTransition(
    BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
    Widget child) {
  var begin = Offset(0.0, 1.0);
  var end = Offset.zero;
  var curve = Curves.ease;
  var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
  return SlideTransition(
    position: animation.drive(tween),
    child: child,
  );
}

void main() {
  WidgetRegistry.register('Scaffold', () => ScaffoldWidget());
  WidgetRegistry.register('Column', () => ColumnWidget());
  WidgetRegistry.register('Text', () => TextWidget());
  PageTransitionRegistry.register('vertical', verticalTransition);
  runApp(const MyApp());
}

String json = """
{
  "widgetName": "Scaffold",
  "properties": {
    "title": {
      "widgetName": "Text",
      "properties": {
        "message": "Title"
      }
    }
  },
  "child": {
    "widgetName": "Text",
    "properties": {
      "message": "Click me",
      "onClick": {
        "actionType": "Route",
        "url": "http://localhost:4001/sub_page",
        "animationType": "vertical",
        "animationTime": 1000
      }
    }
  }
}
""";

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
        home: RouteWidget(provider: StaticContentProvider(content: json)));
  }
}