neneui_render 0.0.1

Render NeneUI interface definitions as native Flutter widgets.

[./assets/nene.jpg]

Nene UI Runtime

Flutter renderer for JSON interfaces generated by the neneui TypeScript package.

Features

• Server-driven UI
• JavaScript backend
• Flutter rendering
• Dynamic widgets

Usage

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return InitUI.init(
      baseUrl: "http://localhost:3500",
      title: "Nene",
      debugShowCheckedModeBanner: false,
    );
  }
}

Architecture

NeneUI (TypeScript)
        ↓
      JSON
        ↓
neneui_render
        ↓
Flutter Widgets

JSON Sample

{
  "id": "#hello",
  "name": "Scaffold",
  "props": {
    "appBar": {
      "id": "#560A",
      "name": "Empty"
    },
    "body": {
      "id": "#columnA",
      "name": "Column",
      "props": {
        "mainAxis": "start",
        "crossAxis": "start",
        "children": [
          {
            "id": "#textWidget",
            "name": "Text",
            "props": {
              "text": "Hello World",
              "align": "start",
              "overflow": "visible",
              "style": {
                "height": 1,
                "fontSize": 14,
                "fontWeight": "w400",
                "color": "black",
                "decoration": "none",
                "fontStyle": "normal"
              }
            }
          }
        ]
      }
    },
    "drawer": {
      "id": "#255A",
      "name": "Empty"
    },
    "floatingActionButton": {
      "id": "#130A",
      "name": "Empty"
    },
    "backgroundColor": "#0000",
    "bottom": {
      "id": "#714A",
      "name": "Empty"
    },
    "floatingActionButtonLocation": null
  }
}

How to Render UI on Server

import express from "express";
import { Column, CrossAxis, MainAxis, Scaffold, Text } from "neneui";

const app = express();

app.get("/ui/main", (req, res) => {
    let _scaffold = Scaffold("#hello", {
        body: Column(
            "#columnA", {
                mainAxisAlignment: MainAxis.start,
                crossAxisAlignment: CrossAxis.start,
                children: [
                    Text("#textWidget", {text: "Hello World"})
                ]
            }
        )
    })

    res.json(_scaffold);
})

app.listen(3500)

For More Information and Docs, Please Refer to NeneUI JavaScript Package