The schema_widget is a Flutter package implemented with base on dynamic_widget package that produces widgets dynamically interpreting JSON objects.
Writed by Alex Manoel Ferreira Silva
Under
A major difficulty for any application developer is to ensure that all users keep their applications up to date to ensure the same user experience and to reduce the time required to fix bugs.
The most commonly used alternative to accelerate this process is Code Push which allows the application update without the need for a new deploy in the store. However in Code Push GitHub itself there is a Code Push Support for Flutter request with comment saying that support depends on implementing dynamic update support in Flutter, there is also a reference to Flutter Roadmap saying that support for This type of update is postponed according to the official comment Code Push / Hot Update / out of band updates, which explains the reasons that led to the decision.
One possible solution to this deadlock is to implement a JSON interpreter that enables screen redesign, which can be obtained using dynamic_widget. Although dynamic_widget provides an easy way to extend support for other widgets through separate implementations. It limits the use of events and does not allow the use of complex business rules.
The basic operation of schema_widget is very similar to that of dynamic_widget. Both interpret JSON and instantiate the widget for it. The main difference with schema_widget is that it allows the creation of parsers for any type of object and the use of pre-implemented rules. For this reason, it makes it possible to create much more complex business rules.
The schema_widget package provides the SchemaWidget class, in most cases this will be the only class used. All methods in this class are static.
To add a new parser, the following methods can be used:
Default parsers: This method loads all the default parsers from schema_widget.
SchemaWidget.registerParsers();Synchronous: This method can be used to load a custom parser that can be loaded synchronously.
TypeSchemaParser typeSchemaParserInstance = CustomTypeSchemaParser();
SchemaWidget.registerTypeParser(typeSchemaParserInstance);Asynchronous: This method can be used to load a custom parser that needs to be loaded asynchronously.
String typeName = "Custom";
Future<TypeSchemaParser> futureTypeSchemaParserInstance = () async => CustomTypeSchemaParser();
SchemaWidget.registerTypeParserAsync(typeName, futureTypeSchemaParserInstance);In addition to parsers, any type of function and object for use by parsers can also be registered. For this, the SchemaWidget.registerLogic(logicName, logic) method must be used. The logic name must be unique, otherwise the previously registered logic will be replaced.
Example:
const string1 = "Hello World";
const map1 = {"foo": "bar"};
const object1 = Foo();
var func1 = () => "Hello World";
var asyncFunc1 = () async => "Hello World";
var object2 = Bar();
SchemaWidget.registerLogic("string1", string1);
SchemaWidget.registerLogic("map1", map1);
SchemaWidget.registerLogic("object1", object1);
SchemaWidget.registerLogic("func1", func1);
SchemaWidget.registerLogic("asyncFunc1", asyncFunc1);
SchemaWidget.registerLogic("otherExemple", object2);Both parsers and logics are registered using the get_it package to manage everything.
After registering all the parsers and logic necessary for use. It may be necessary to wait for GetIt to finish loading asynchronous parsers. For this, GetIt makes GetIt.I.allReady() available for use in a FutureBuilder for the purpose of creating widgets only after all parsers are loaded as shown in the following example.
class MyApp extends StatelessWidget {
MyApp({Key key}) : super(key: key) {
SchemaWidget.registerParsers();
SchemaWidget.registerLogic("funcHelloWorld", () => Text("Hello World"));
}
@override
Widget build(BuildContext context) {
return FutureBuilder(
future: GetIt.I.allReady(ignorePendingAsyncCreation: false),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (!snapshot.hasData) {
return CircularProgressIndicator();
}
return SchemaWidget.parse<Widget>(
context,
{
"type": "Scaffold",
"appBar": {
"type": "AppBar",
"title": {
"type": "Text",
"data": "Hello World Example",
},
},
"body": {
"type": "Center",
"child": "funcHelloWorld",
},
},
);
},
);
}
}Alternatively, SchemaWidget itself can be used to execute SchemaWidget.registerParsers() and SchemaWidget.parse<Widget>(), reducing the complexity of the code.
class MyApp extends StatelessWidget {
MyApp({Key key}) : super(key: key) {
SchemaWidget.registerLogic("funcHelloWorld", () => Text("Hello World"));
}
@override
Widget build(BuildContext context) {
return SchemaWidget(
{
"type": "Scaffold",
"appBar": {
"type": "AppBar",
"title": {
"type": "Text",
"data": "Hello World Example",
},
},
"body": {
"type": "Center",
"child": "funcHelloWorld",
},
},
);
}
}Everything in schema_widget is based on TypeSchemaParser.
TypeSchemaParser is the implementation of a JSON interpreter that converts it into a complex object.
- For help over SchemaWidget usage, view the example;
- For help over class documentation, view the documentation;
- For help getting started with Flutter, view our online documentation;
- For help on editing package code, view the documentation.
- Add this to your package's pubspec.yaml file:
dependencies:
get_it:
schema_widget: ^2.0.0-beta.0- Install packages from the command line: with Flutter:
$ flutter packages get- Import it into the code file:
import 'package:schema_widget/schema_widget.dart';import 'dart:async';
import 'package:flutter/material.dart';
import 'package:schema_widget/schema_widget.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
final GlobalKey<NavigatorState> _navigatorKey = GlobalKey<NavigatorState>();
MyApp({Key key}) : super(key: key) {
SchemaWidget.registerLogic(
"onGenerateRoute",
_onGenerateRoute,
);
SchemaWidget.registerLogic(
"onUnknownRoute",
_onUnknownRoute,
);
SchemaWidget.registerLogic(
"navigatorKey",
_navigatorKey,
);
}
@override
Widget build(BuildContext context) {
return SchemaWidget(
loadSchemas: false,
{
"type": "MaterialApp",
"title": 'SchemaWidget Demo',
"theme": {
"primarySwatch": {
"primary": 0xFF2196F3,
"swatch": {
"50": 0xFFE3F2FD,
"100": 0xFFBBDEFB,
"200": 0xFF90CAF9,
"300": 0xFF64B5F6,
"400": 0xFF42A5F5,
"500": 0xFF2196F3,
"600": 0xFF1E88E5,
"700": 0xFF1976D2,
"800": 0xFF1565C0,
"900": 0xFF0D47A1,
},
},
},
"navigatorKey": "navigatorKey",
"initialRoute": "home",
"onGenerateRoute": "onGenerateRoute",
"onUnknownRoute": "onUnknownRoute"
},
);
}
Route _onGenerateRoute(RouteSettings settings) {
return MaterialPageRoute(
builder: (buildContext) => MyHomePage(),
settings: settings,
);
}
Route _onUnknownRoute(RouteSettings settings) {
return MaterialPageRoute(
builder: (buildContext) => MyHomePage(),
settings: settings.copyWith(name: "home"),
);
}
}
class MyHomePage extends StatelessWidget {
MyHomePage({Key key}) : super(key: key) {
SchemaWidget.registerLogic("funcHelloWorld", () => Text("Hello World"));
}
@override
Widget build(BuildContext context) {
return SchemaWidget(
{
"type": "Scaffold",
"appBar": {
"type": "AppBar",
"title": {
"type": "Text",
"data": "Hello World Example",
},
},
"body": {
"type": "Center",
"child": "funcHelloWorld",
},
},
);
}
}- Publish Package;
- Make MVP;
- Minimal documentation;
- Change event binding of click event;
- Add list of default supported Widgets;
- Add list of default supported Types;
- Create content about;
- Publish complementar packages;
- Create example full functional apps;
- Make a commercial product using the package;
![mend-bolt-for-github[bot] avatar](https://avatars.githubusercontent.com/in/16809?v=4 "mend-bolt-for-github[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent