ssr

Description:

ssr

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
copied to clipboard
2. Install it
You can install packages from the command line:
with Flutter:
$ flutter pub get
copied to clipboard
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';
copied to clipboard
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),
);
}
}
copied to clipboard
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: () {
},
);
});
copied to clipboard
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']
}
}
}
}
};
copied to clipboard
Widget Documents #
Already completed widget/registery:

Alignment
AppBar
Color
Column
Container
Row
Scaffold
Text
TextOverflow
TextStyle