remote_ui 0.0.9
remote_ui: ^0.0.9

Flutter Android iOS web

Flutter widget to manage UI from a JSON definition

remote_ui #

Flutter widget to manage UI from a JSON definition

How it works #

So all you need is to have a JSON definition of a widget tree, then parse it and give it to RemoteWidget, it will take care of creating all your tree.

Example of a JSON widget tree representation:

{
  "type": "column",
  "children": [
    {
      "type": "row",
      "flex": 3,
      "children": [
        {
          "type": "spacer",
          "flex": 1
        },
        {
          "type": "image_button",
          "id": "onoff",
          "flex": 2,
          "mainIndicator": true,
          "values": { "on": "http://test/on.png", "off": "http://test/off.png"},
          "value": "on"
        },
        {
          "type": "spacer",
          "flex": 1
        }
      ]
    },
    {
      "type": "slider",
      "id": "dim",
      "flex": 1,
      "min": 0,
      "divisions": 100,
      "max": 100,
      "value": 50
    }
  ]
}

Some widget fields are enums, for those just set them to the integer index of that enum and they'll be used correctly.

Usage #

Once you have you're parse JSON data it's really easy, just do:

RemoteWidget(
    definition: parsedJsonData,
),

Dynamic data #

Might be useful to bind data in case our tree contains form fields, no problem.

All you need is to modify a bit your JSON and wrap dynamic data between $ like $varName$.

Then you can pass this data to RemoteWidget:

RemoteWidget(
    definition: parsedJsonData,
    data: {"varName": "myValue"},
),

Interactivity #

If you have buttons or form field, you probably want to get the events back somehow ^^

You can do this with the RemoteManagerWidget, his job is to forward all the changes of your interactive widget under him.

Interactive widget need an id field to be able to recognize them. Once the user click on the button or slide the slider you'll get the changes under onChanges callback

Example:

RemoteManagerWidget(
    onChanges: (key, value, {associatedData}) => debugPrint('$key change to $value'),
    child: RemoteWidget(
      data: {
        'myColor': 0xFFFF00FF,
        'sliderData': {
          'sliderValue': .2,
        }
      },
      definition: {
        'type': 'column',
        'crossAxisAlignment': CrossAxisAlignment.stretch.index,
        'children': [
          {
            'type': 'row',
            'flex': 1,
            'crossAxisAlignment': CrossAxisAlignment.stretch.index,
            'children': [
              {
                'type': 'container',
                'color': '\$myColor\$',
                'width': 80.0,
              },
              {
                'type': 'expanded',
                'child': {
                  'type': 'container',
                  'color': 0xFF00FFFF,
                }
              },
              {
                'type': 'container',
                'color': 0xFFFFFF00,
                'width': 80.0,
              },
            ]
          },
          {'type': 'slider', 'id': 'brightness', 'value': '\$sliderData.sliderValue\$'}
        ],
      },
    ),
),

Widget compatibility #

Here is the list of currently supported flutter widget:

  • Center
  • Padding
  • Row
  • Column
  • Stack
  • Expended
  • FlatButton (partially)
  • RaisedButton (partially)
  • Slider
  • Container
  • Spacer
  • Text (partially)

Addons #

Existing addons #

  • image_button : Button based on remote images
  • color_picker : Color picker widget, inline or with button

Use an addons #

To use an addons all you need to do is to pass the factory to the RemoteManagerWidget.

Example:

RemoteManagerWidget(
    parsers: [RemoteImageButtonFactory()],
    child: RemoteWidget(...)
)

Create an addons #

I suggest you take a look at the existing addons on how to make a new one.

5
likes
80
pub points
60%
popularity

Publisher

mylisabox.com

Flutter widget to manage UI from a JSON definition

Homepage
Repository (GitHub)
View/report issues

Documentation

API reference

License

GPL 3.0 (LICENSE)

Dependencies

flutter, flutter_hooks

More

Packages that depend on remote_ui