sdui 0.0.162

*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 t [...]

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": "[e-mail]",
          "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": "http://myapp.herokuapp.com/commands/save-profile",
          "prompt": {
            "type": "Confirm",
            "title": "Confirmation",
            "message": "Are you sure you want to change your profile?"
          }
        }
      }
    ]
  }
}

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'))
      };
}

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": [
      ...
    ]
}

• 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
  • Flexible
  • GridView
  • Row
  • 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
  • Radio
  • RadioGroup
  • Text

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?"
      }
    }

}

• type: Defines the type of action:
  • 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
  • Screen: Screen to render. The screen is associated with a URL that return the content of the screen
  • Navigate: Navigate user to a web page
  • Share: Share a message to user via email/messenger/whatsapp etc.
• url: is the URL associated with the action
• message: Message to share
• prompt.type: The type of prompt (Exemple: Confirm, Error, Warning, Information)
• prompt.title: Title of the alert box to open
• prompt.message: Message to display to the user