flutter_remote_icon

remote icon loader for flutter


Keywords
code-push, code-push-server, dynamic, dynamicwidget, express, figma, flutter, flutter-icons, grpc, nodejs, socketio, typescript, ui, ui-components, uikit
License
MIT

Documentation

logo

dynamic. a remotely configured user interface with super flexibility. read more at bridged.xyz/dynamic

server - dynamically change client specs from server

client - dynamically load content from server & with dynamic layout / component / action specs

Platform Package
NodeJS (for server) @bridged.xyz/remote-ui-core
@bridged.xyz/remote-ui-server
NodeJS (for web) (comming soon)
(@bridged.xyz/remote-ui)
flutter dynamic

sub packages

dyanmic actions

Installation

Server side

# install with yarn
yarn add @bridged.xyz/remote-ui-core

# install with npm
npm install @bridged.xyz/remote-ui-core

How to use

server side (express/ts)

import * as rui from "@bridged.xyz/remote-ui-core"

router.get("ui", (req, res)=>{

 const ui = new rui.Layout(
  {
   icon: rui.icons.material.note.uri,
   title: new rui.Text("hello world!")
  }
 );
 res.json(ui).send()
})

app side (flutter)

import "package:flutter_remote_ui/flutter_remote_ui.dart"

Widget buildRui(BuildContext context){
 final ruiData = fetchRuiDataFromServer();
 return RemoteUI.of(context).build(ruiiData);
}

Concepts & onthology will be documented under notion document, which will be added soon.

Platform support

usage language runs on example Ready?
core rui core library (@bridged.xyz/remote-ui-core) TS/JS NodeJS @bridged.xyz/remote-ui-core
flutter flutter_remote_ui dart iOS
Android
OSX
Windows
Linux
Web
flutter-remote-ui
flutter remote ui example
express remote-ui-core wrapper for ExpressJS (@bridged.xyz/remote-ui-server) (in 2020) TS/JS NodeJS (server) express, plain 👩‍💻
iOS native note supported (2021 Q2) swift iOS OSX 👩‍💻
android native note supported (2021 Q2) kotlin Android 👩‍💻
vue vueJS wrapper for remote-ui Web 👩‍💻

Concepts

concept description example demo
action provide client action data to be executed on specific events
layout register & call layouts with built data dynamically
icon register & use font based icons or svg icons dynamically
image use registered local assets or remote assets dynamically
route specify route spec to provide routing, building menus, shortcuts, etc..
modal show modals with custom transition with desired content
client the client is the app instance, customize with your database user
session the session of single flow. show modal, get event of "ok" button clicked, trigger the action in single session so it can be tracked & managed

Remote Icons

import * as rui from "@bridged.xyz/remote-ui-core"

console.log(rui.icons.material.note)

/// logs 
/// RemoteIconData {
///  uri: 'material://Icons.note',
///  type: 'MATERIAL_NATIVE',
///  asset: undefined }


/// can be used directly on flutter

Remote Route Specs

import {routes} from "@bridged.xyz/remote-ui-core"


const MOCK_DATABASE = {
    users: [
        {
            id: "1",
            name: "softmarshmallow"
        },
        {
            id: "2",
            name: "GY"
        },
        {
            id: "3",
            name: "gin"
        },
    ]
}

function fetchUserFromMockDatabase(id: string): { id, name } {
    return MOCK_DATABASE.users.find((e) => e.id == id);
}


routes.register(
    new routes.spec(new routes.spec<{ id }, { id, name }>({
        key: "/users/:id",
        pattern: "/users/:id",
        dataFetcher: async (p) => {
            return fetchUserFromMockDatabase(p.id);
        },
        title: {
            default: "user detail",
            template: "user {{ data.name }}",
        }
    }))
)

const route = "/users/1";
const spec = routes.match(route)
routes.build(spec).then((d) => {
    console.log(d)
})


/// logs
/// { title: 'user softmarshmallow',
///  description: undefined,
///  icon: undefined,
///  route: '/users/1' }

Contribution

contribution guideline

Contributor's documentation

we are using figma file for the contributor's documenting and suggesting roadmap.

TODO

  • remote ui dashboard -> customize & configure your app through web interface remotely, realtime.

related projects

Sponsors

References

dynamic_widget

Use dynamic with figma plugin / bridged console

comming soon features

  • sync assets directly (dont download, put it in asset. bridged provides bucket and usable resource uri. s3 GCP supported)
  • live update data

Blogs

starting remote ui project