sdui

Description:

sdui

SDUI #
SDUI make it easy to implement Server Driven UI pattern on flutter.

The server decides what to render by describing in a JSON the widgets to render.
The Flutter screen parse the JSON and build the widgets

Kind like HTML... but not really.
Example #
The Server #
Here is an example of JSON returned by the URL POST http://myapp.herokuapp.com/screens/profile:
{
"type": "Screen",
"appBar": {
"type": "AppBar",
"attributes": {
"title": "Profile"
}
},
"child": {
"type": "Form",
"attributes": {
"padding": 10
},
"children": [
{
"type": "Input",
"attributes": {
"name": "first_name",
"value": "Ray",
"caption": "First Name",
"maxLength": 30
}
},
{
"type": "Input",
"attributes": {
"name": "last_name",
"value": "Sponsible",
"caption": "Last Name",
"maxLength": 30
}
},
{
"type": "Input",
"attributes": {
"name": "email",
"value": "[email protected]",
"caption": "Email *",
"required": true
}
},
{
"type": "Input",
"attributes": {
"type": "date",
"name": "birth_date",
"caption": "Date of Birth"
}
},
{
"type": "Input",
"attributes": {
"type": "Submit",
"name": "submit",
"caption": "Create Profile"
},
"action": {
"type": "Command",
"url": "https://myapp.herokuapp.com/commands/save-profile",
"prompt": {
"type": "Dialog",
"attributes": {
"type": "confirm",
"title": "Confirmation",
"message": "Are you sure you want to change your profile?"
}
}
}
}
]
}
}
copied to clipboard
The UI in Flutter #
import 'package:flutter/material.dart';
import 'package:sdui/sdui.dart';

void main() async {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return MaterialApp(title: 'Demo', initialRoute: '/', routes: _routes());
}

Map<String, WidgetBuilder> _routes() =>
{
'/': (context) =>
const DynamicRoute(
provider: HttpRouteContentProvider(
'http://www.myapp.com/screens/profile'))
};
}
copied to clipboard
Screenshots #



Screen
Date Picker
Alert Dialog










Widgets #
In Flutter, UI is composed of a hierarchy of Widgets. A widget is a visual element on a screen.
SDUI described widgets with the following json structure:
{
"type": "...",
"attributes": {
"padding": 12,
"color": "#ff0000",
...
},
"children": [
...
]
}
copied to clipboard

type: indicates the type of widget
attributes: key/value pair of the attributes of the widget. Ex: caption, color, padding, spacing etc.
children: The list of children widgets

Widget Library #

Navigation widgets

Dialog
AppBar
Page
PageView
Screen


Layout widgets

Center
Column
Container
Expanded
FittedBox
Flexible
GridView
Positioned
Row
Stack
SingleChildScrollView
Spacer


Images/Icons

CarouselSlider
CircleAvatar
Icon
IconButton
Image
PhotoView


Input widgets

Button
Camera
DropdownButton
DropdownMenuItem
Form
IconButton
Input
ListView
ListItem
ListItemSwitch
MoneyText
MoneyWithKeyboard
MoneyWithSlider
PinWidthKeyboard
QrImage
QrView
Radio
RadioGroup
SearchableDropdown
Text


Other

Badge
Chip
ExpandablePanel
Html



Global Variables #

sduiErrorState: Function for building the error state.
sduiLoadingState: Function for building the loading state.
sduiProgressIndicator: Function for building the progress indicator.
sduiRouteObserver: Route observer that reload each page on navigation.
sduiAnalytics: Analytics class.
See SDUIAnalytics
sduiCameras: List of available cameras. Empty by default, must be initialized the application

Actions #
With actions, you can:

Execute a command on a server (Ex: Saver User Profile, Delete User Account etc.)
Navigate to another screen.
Prompt a message to user.

SDUI described actions with the following json structure:
{
"type": "...",
"attributes": {
...
},
...
"action": {
"type": "...",
"url": "...",
"prompt": {
"type": "...",
"title": "Confirmation",
"message": "Are you sure you want to change your profile?"
}
}

}
copied to clipboard

type: Defines the type of action:

Route: To redirect to another route
Page: To redirect to another page, in the context of [PageView]
Command: Remote action to execute. The screen is associated with a URL that will execute the command, and
redirect the user to the next screen
Share: Share a message to user via email/messenger/whatsapp etc.
Navigate: Navigate user to a web page


url: is the URL associated with the action

route:/..: redirect users to previous route
route:/~: redirect users to 1st route
URL starting with route:/<ROUTE_NAME> redirect user the a named route. (Ex: route:/checkout)
URL starting with http:// or https redirect user to a server driven page
page:/<PAGE_NUMBER>: redirect users to a given page. <PAGE_NUMBER> is the page index (starting with 0).


replacement: For type=Route, this indicate if we replace the current view or navigate.
parameters: Parameters to add to the URL where to redirect to
message: Message to share
prompt: Shows a Dialog before execute the action

type: The type of prompt (Exemple: Confirm, Error, Warning, Information)
title: Title of the alert box to open
message: Message to display to the user



Build your own Widget #
You can integrate your own widget into sdui.
Step 1: Create your instance of SDUIWidget #
This is an example of widget that render a text with a margin and padding. The widget has the following attributes

text: The text to display
padding: The padding value
margin: The margin value

class MyWidget extends SDUIWidget {
String text = '';
double padding = 10.0;
double margin = 10.0;

/// This method will be called by [SDUIParser] to read the widget attributes from the JSON data
@override
SDUIWidget fromJson(Map<String, dynamic>? json) {
text = json?['caption'] ?? '';
margin = json?['margin'] ?? 10.0;
padding = json?['padding'] ?? 10.0;
return this;
}

/// This method will be called when rendering the page to create the Flutter widget
@override
Widget toWidget(BuildContext context) =>
Container(
padding: EdgeInsets.all(padding),
margin: EdgeInsets.all(margin),
child: Text(
text,
style:
const TextStyle(fontWeight: FontWeight.bold, color: Colors.red),
),
);
}
copied to clipboard
Step 2: Register the widget #
The Widget is registered into SDUI and associated with the type MyWidget
void main() async {
// Register 3rd party widget
SDUIWidgetRegistry.getInstance().register('MyWidget', () => MyWidget());

runApp(constMyApp());
}

class MyApp extends StatelessWidget {
// ...
}
copied to clipboard
Step 3: Add the widget into the JSONs #
Here is an example of JSON with our 3rd party widget
{
"type": "Screen",
"appBar": {
"type": "AppBar",
"attributes": {
"title": "Home"
}
},
"child": {
"type": "Center",
"children": [
{
"type": "MyWidget",
"attributes": {
"caption": "3rd Party Widget",
"padding": 5.0,
"margin": 5.0
}
}
]
}
}
copied to clipboard