flux_flutter 0.1.0

Flutter bindings for the Flux scripting language. Enables dynamic UI updates and hot reload.

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

2. 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).