Dynamic Widget는 백엔드 기반의 UI 툴킷으로, 개발자가 JSON을 사용하여 동적 사용자 인터페이스를 구축할 수 있게 해줍니다. JSON 구조는 Flutter 위젯 코드와 매우 유사하여, Flutter 개발자들이 서버 응답에서 프로그래밍 방식으로 UI를 설계하고 렌더링하는 것이 직관적으로 느껴집니다. Android, iOS, Web, macOS, Windows, Linux 등 여러 플랫폼을 지원하며, 다양한 환경에서 일관된 UI 렌더링이 가능합니다. 이 패키지는 UI 변경에 앱 업데이트가 필요 없이도 유연하고 데이터 기반 인터페이스를 쉽게 만들 수 있도록 도와줍니다.
사용 사례
서버 기반 UI 업데이트
JSON을 사용한 빠른 프로토타이핑
크로스 플랫폼 동적 레이아웃
앱 내 콘텐츠 사용자 지정
원격 UI 구성
UI 로직을 오프로드하여 앱 크기 줄이기
주요 기능
JSON 기반 위젯 정의
JSON에서 플러터 유사 구문
다중 플랫폼 지원
확장 가능한 위젯 레지스트리
런타임 위젯 렌더링
JSON 변경에 대한 핫 리로드
적합한 대상
서버 기반 앱을 개발하는 개발자
자주 UI 업데이트가 필요한 팀
사용자별 맞춤형 콘텐츠를 갖춘 앱
빠른 UI 반복이 필요한 프로젝트
프론트엔드 팀이 백엔드 디자이너와 협업하고 있습니다
고려 사항
신중한 JSON 스키마 관리가 필요합니다
복잡한 위젯과 함께 가능한 성능 오버헤드
신뢰할 수 없는 JSON 소스와 관련된 보안 위험
형식이 잘못된 JSON에 대한 제한된 디버깅
런타임 시 적절한 오류 처리가 필요합니다
일관된 백엔드-프론트엔드 계약에 의존
원본 README
연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.
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.
