duit-foundation / flutter_duit

Duit - driven UI toolkit | Server driven UI framework for Flutter

Duit - drived UI tooklit.

Duit is a server side UI framework for Flutter. It is used for creating widgets and server-side state management.

The framework consists of several parts:

• Flutter package (this repository)
• Go backend adapter
• Node JS backend adapter

The framework ensures that the layout model is received from the server, interacts with the backend via the Action API, and embeds custom components into the widget hierarchy processing pipeline. Duit is flexible and extensible, which allows it to create rich UI dynamically.

Core features

• Initial connection to the server and receiving a layout
• Support for different network protocols (http, websocket)
• Pointed widget state update (updating only those widgets for which the server returned an "update")
• Actions API. A special protocol that allows the server to specify dependencies for an action associated with a widget.
• Ability to add your own custom widgets on the Flutter and backend side.

Matching library and kernel versions

The flutter_duit library depends on the duit_kernel package, which contains basic model definitions for implementing framework entities and developing third-party packages and extensions. Carefully study the version compatibility table if you are going to directly add duit_kernel to your project (needed to implement custom widgets and extensions).

Lib versions	Kernel versions
<= v1.5.0	v1.0.1
>= v1.6.0	v1.1.0
>= v1.7.0	v1.1.1
>= v1.9.0	v1.2.0
>= v1.11.0	v1.3.0
>= v1.12.0	v1.4.0
>= v2.0.0	v2.0.1

Usage example

0. If you want to use the advanced features of the framework, you should install a dependency on the duit_kernel package, which provides definitions of the basic abstractions on the basis of which custom widgets and third-party extensions are implemented.

flutter pub add duit_kernel

1. Create DuitDriver instance.

It is responsible for displaying the UI, updating the state of widgets, and calling widget-related actions.

final driver = DUITDriver(
  "/layout1",
  transportOptions: HttpTransportOptions(
    defaultHeaders: {"Content-Type": "application/json"},
    baseUrl: "http://localhost:8999",
  ),
);

2. Embed the DuitViewHost widget into your application in the build method.

DuitViewHost(
  context: context,
  driver: driver,
  placeholder: const CircularProgressIndicator(),
),

Future plans

• Expanding the types of events generated by the server
• Expanding the widget collection
• Implementation of new network protocols (gRPC, socket.io)
• Adding new adapters for the backend (Dart, C#, etc.)
• Troubleshooting, updating documentation

Package info and documentation

WIKI (work in progress)

License

MIT

flutter_duit's Issues

Benchmarking

It is required to develop and implement benchmarking

Basic parameters to measure:

• Parsing time
• Render time
• Startup time
• Attributes copying time (?)
• Action execution time
• Event handling time

OverflowBox widget

ConstrainedBox widget

ListView widget

Subtree widget

Animations don't work when using components

Logging

• Develop an interface and basic implementation of the logger.
• Determine where to collect logs

Meta widget

Add Meta widget
Attributes contain json
Inherited from AttendedModel

RepaintBoundary widget

Error handling

Add error catching at different stages of the component and driver life cycle