Flux Flutter

Flutter bindings for the Flux scripting language.

This package enables you to run Flux scripts within a Flutter application, allowing for:

  • Hot Updates: Update business logic and UI layout without re-releasing the app.
  • Server-Driven UI: Fetch and render UI definitions from a remote server.
  • Dynamic Prototyping: Iterate on UI/UX instantly.

Features

  • FluxWidget: A Flutter widget that renders UI defined in Flux scripts.
  • FluxNavigator: Seamless navigation between Flux screens and native Flutter screens.
  • State Management: Reactive state binding between Flux and Flutter using FluxNotifier.
  • Native Modules: Access device capabilities (HTTP, Storage, Device Info) directly from scripts.

Getting Started

  1. Add flux_flutter to your pubspec.yaml:
dependencies:
  flux_flutter: ^0.1.0
  flux_vm: ^0.1.0
  1. Import the package:
import 'package:flux_flutter/flux_flutter.dart';

Usage

Basic Rendering

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

void main() async {
  // Initialize standard modules
  FluxNativeModules.register(Flux.vm);
  
  runApp(MaterialApp(
    home: FluxWidget(
      source: '''
      widget "Demo" {
        state: { count: 0 }
        
        build: (context) {
          return Center(
            child: Column(
              children: [
                Text("Count: " + toString(count)),
                ElevatedButton(
                  onPressed: () {
                    setState(() { count = count + 1; });
                  },
                  child: Text("Increment")
                )
              ]
            )
          );
        }
      }
      ''',
    ),
  ));
}

Hot Reload / Hot Update

See the examples/hot_update_demo in the repository for a complete example of setting up a hot-update server and client.

Modules

The following modules are available by default when using FluxNativeModules:

  • http: RESTful API calls (http.get, http.post).
  • storage: Persistent key-value storage (storage.get, storage.set).
  • dialog: Native alerts and toasts (dialog.alert, dialog.toast).
  • navigation: Screen transitions (navigation.push, navigation.pop).

Libraries

flux_flutter