Server Side Rendering

A Backend-Driven UI toolkit, build your dynamic UI with json, and the json format is very similar with flutter widget code.

Install

1. Depend on it

Add this to your package's pubspec.yaml file:

dependencies:
  ssr: any

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:ssr/ssr.dart';

Get started

You should use ServerSideRendering.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:ssr/ssr.dart';

class PreviewPage extends StatelessWidget {
  final Map jsonMap;

  PreviewPage(this.jsonMap);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Preview"),
      ),
      body: ServerSideRendering.build(jsonMap, context),
    );
  }
}

How to implement for custom widgets

This is a RaisedButton widget parser.

import 'package:ssr/ssr.dart';
import 'package:flutter/material.dart';

ServerSideRendering.register('Alignment', {
  'bottomCenter': Alignment.bottomCenter,
  'bottomLeft': Alignment.bottomLeft,
  'bottomRight': Alignment.bottomRight,
  'center': Alignment.center,
  'centerLeft': Alignment.centerLeft,
  'centerRight': Alignment.centerRight,
  'topCenter': Alignment.topCenter,
  'topLeft': Alignment.topLeft,
  'topRight': Alignment.topRight,
});

ServerSideRendering.register('RaisedButton', ({Map args = const {}}) {
    return RaisedButton(
      color: args['color'],
      disabledColor: args['disabledColor'],
      disabledElevation: args['disabledElevation'],
      disabledTextColor: args['disabledTextColor'],
      elevation: args['elevation'],
      padding: args['padding'],
      splashColor: args['splashColor'],
      textColor: args['textColor'],
      child: args['child'],
      onPressed: () {
      },
    );
});

How to add a click listener

Add "click_event" property to your widget json definition. for example:

var raisedButton_json = {
    'Container': {
        'alignment': 'Alignment.center',
        'child': {
            'RaisedButton' : {
                'color': {
                    'Color': [0xFF00FF],
                },
                'textColor': {
                    'Color': [0x00FF00],
                },
                'splashColor' : {
                    'Color': [0x00FF00],
                },
                'click_event' : 'route://productDetail?goods_id=123',
                'child' : {
                    'Text': ['I am a button']
                }
            }
        }
    }
};

Already completed widget/registery:

Alignment
AppBar
Color
Column
Container
Row
Scaffold
Text
TextOverflow
TextStyle