将字符串解析为Flutter中的小部件

Question

我想将以下字符串解析为其等效的Flutter小部件：

String fetchedFromServer = '''
Container(
   child: Text("Hello")
)
''';

我想从Web服务器接收布局并将其解析为实际的小部件。

如何在Dart / Flutter中执行此操作。

Answer 1

您可能必须自己创建解析和渲染机制，因为我不认为Flutter对服务器端渲染有任何支持（除了Flutter Web之外，尽管我没有听到任何消息） ）。

此外，您可能希望以JSON或其他数据格式返回布局数据。对于初学者来说，解析和处理会容易得多。但是，除此之外，如果您想基于原始Dart呈现UI，则必须有效地设置您的应用程序，以便能够从字符串中运行任意Dart代码，这不仅在Dart / Flutter中管理起来非常困难，而且可以解决无数潜在的安全问题。

返回主题，假设您具有以下UI数据：

{
  "class": "Container",
  "child": {
    "class": "Text",
    "value": "Hello"
  }
}

在您的应用中，您可以这样解析：

Widget fetchUI(url) {
  // TODO: Make network call to get response
  final data = json.decode(response.body);
  return parseWidget(data);
}

Widget parseWidget(data) {
  switch(data['class']) {
    case 'Container':
      return Container(
        child: parseWidget(data['child']),
      );
    case 'Text':
      return Text(data['value']);
  }
  return null;
}

Answer 2

一种选择是使用此软件包

https://pub.dev/packages/flutter_widget_from_html

并将所需的布局存储为HTML。请记住，它只能支持基本的小部件和布局，但您不必自己编写解析器。