Uma ferramenta de interface do usuário orientada por backend, crie sua interface dinâmica com JSON, e o formato JSON é muito semelhante ao código do widget do Flutter.
Orientação gerada a partir de informações públicas. Apenas para referência.
Dynamic Widget é uma ferramenta de interface do usuário orientada por backend que permite aos desenvolvedores criar interfaces dinâmicas usando JSON. A estrutura JSON se assemelha muito ao código de widget do Flutter, tornando intuitivo para desenvolvedores do Flutter projetarem e renderizarem interfaces programaticamente a partir de respostas do servidor. Ele suporta múltiplas plataformas, incluindo Android, iOS, Web, macOS, Windows e Linux, permitindo a renderização consistente da interface em diferentes ambientes. Este pacote simplifica a criação de interfaces flexíveis e baseadas em dados sem a necessidade de atualizações de aplicativo para mudanças na interface.
Casos de uso
Atualizações de UI impulsionadas por servidor
Prototipagem rápida com JSON
Layouts dinâmicos multiplataforma
Personalização de conteúdo no aplicativo
Configuração remota da interface do usuário
Reduzindo o tamanho do aplicativo ao deslocar a lógica da interface
Principais recursos
definição de widget baseada em JSON
Sintaxe semelhante ao Flutter em JSON
Suporte multiplataforma
registro de widget extensível
Renderização de widget em tempo de execução
Recarregamento rápido para alterações no JSON
Indicado para
Desenvolvedores construindo aplicativos orientados por servidor
Equipes que precisam de atualizações frequentes da interface
Aplicativos com conteúdo personalizado por usuário
Projetos que exigem iteração rápida da interface
Equipes de frontend trabalhando com designers de backend
Considerações
Requer gerenciamento cuidadoso do esquema JSON
Sobrecarga de desempenho potencial com widgets complexos
Riscos de segurança com fontes de JSON não confiáveis
Depuração limitada para JSON mal formado
Necessita de tratamento adequado de erros em tempo de execução
Depende de contrato consistente entre backend e frontend
README original
Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.
Flutter Dynamic Widget
A Backend-Driven UI toolkit, build your dynamic UI with json, and the json format is very similar with flutter widget code.
From 4.0.0-nullsafety.1 version, it supports null-safety.
From 3.0.0 version, it supports exporting your flutter code to json code. please check How to write the json code
From 1.0.4 version, it supports flutter web application.
I work for an e-commerce company. We need to build flexible pages. So we define a light UI protocol, and implement on Android and iOS. We can dynamic update App UIs by pushing a json file. With this ability, we can do some UI A/B testing without publishing App to app store. Flutter allows you to build beautiful native apps on iOS and Android from a single codebase, it can allow you to build web app later. Flutter's hot reload helps you quickly and easily experiment, build UIs, add features, and fix bugs faster. But it still build native app, the UIs can't be dynamic updated. If you want to modify the UIs, you need to publish the updated app to app store. With this project, you can build your UIs from a json string, which is the UI protocol. The json string is very similar with the Flutter widget dart code. All widget type and widget properties are the same.
Widget type will be a type property, and widget's properties will be the json properties too. All properties and their values will be almost the same. You can checkout the following document.
You should use DynamicWidgetBuilder().build method to covert a json string into flutter widget. It will be time-consuming. so you'd better using FutureBuilder to build the UI.
import'package:dynamic_widget/dynamic_widget.dart';
classPreviewPageextendsStatelessWidget{
finalString jsonString;
PreviewPage(this.jsonString);
@overrideWidgetbuild(BuildContext context) {
returnScaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by// the App.build method, and use it to set our appbar title.
title: Text("Preview"),
),
body: FutureBuilder<Widget?>(
future: _buildWidget(context),
builder: (BuildContext context, AsyncSnapshot<Widget?> snapshot) {
if (snapshot.hasError) {
print(snapshot.error);
}
return snapshot.hasData
? SizedBox.expand(
child: snapshot.data,
)
: Text("Loading...");
},
),
);
}
Future<Widget?> _buildWidget(BuildContext context) async {
returnDynamicWidgetBuilder.build(
jsonString, context, DefaultClickListener());
}
}
How to implement a WidgetParser
You need to implement the WidgetParser abstract class.
Add new created WidgetParser by DynamicWidgetBuilder.addParser(WidgetParser parser) method.
You don't need to write the json code by hand, you can export your flutter code to json code efficiently with DynamicWidgetJsonExportor widget. You just need to wrap your flutter code with DynamicWidgetJsonExportor widget, then invoke its exportJsonString() method, look at following example, click the "export" button, it will find the DynamicWidgetJsonExportor widget, and export its child to json code efficiently.
class_JSONExporterStateextendsState<JSONExporter> {
GlobalKey key = GlobalKey();
@overrideWidgetbuild(BuildContext context) {
returnScaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by// the App.build method, and use it to set our appbar title.
title: Text("export example"),
),
body: Builder(
builder: (context) => Column(
children: [
Expanded(
child: DynamicWidgetJsonExportor(
key: key,
child: Container(
child: GridViewWidget(
GridViewParams(
mainAxisSpacing: 2.0,
crossAxisSpacing: 2.0,
crossAxisCount: 2,
childAspectRatio: 1.6,
padding: EdgeInsets.all(10.0),
pageSize: 10,
children: [
ListTile(
leading: Text("Leading text"),
title: Text("title"),
subtitle: Text("subtitle"),
),
ListTile(
leading: Text("Leading text"),
title: Text("title"),
subtitle: Text("subtitle"),
)
]),
context),
),
),
),
RaisedButton(
child: Text("Export"),
onPressed: () {
var exportor = key.currentWidget asDynamicWidgetJsonExportor;
var exportJsonString = exportor.exportJsonString();
Scaffold.of(context).showSnackBar(SnackBar(
content: Text("json string was exported to editor page.")));
Future.delayed(Duration(seconds: 3), (){
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
CodeEditorPage(exportJsonString)));
});
},
)
],
),
),
);
}
}
You can use whatever your favorite IDE to build the UI, then use DynamicWidgetJsonExportor to export to json code. For detail, please check the Dynamic Widget Demo source code.
Logic Dynamicization
By using DynamicWidget, you can pass JavaScript code(string) as parameters to achieve dynamic UI and logic in the app.
In DynamicWidget, the App object describes the structure of the UI. Dynamically modifying components involves changing the properties of the App object. In the App, the text component and grid_app are assembled to form the complete calculator UI.
