Redus Flutter #

Vue-like ReactiveWidget for Flutter with fine-grained reactivity, lifecycle hooks, and dependency injection.

Features #

• 🎯 ReactiveWidget - Single-class component with state on Element
• ⚡ Fine-grained Reactivity - .watch(context) for any widget
• 🔄 Lifecycle Hooks - onMounted, onUpdated, onUnmounted, etc.
• 💉 Dependency Injection - Type + key-based lookup (from redus)
• 🧹 Auto Cleanup - Effect scopes tied to widget lifecycle

Installation #

dependencies:
  redus_flutter: ^0.3.0

Quick Start #

import 'package:redus_flutter/redus_flutter.dart';

class Counter extends ReactiveWidget {
  @override
  void setup() {
    state(#count, () => ref(0));
    onMounted(() => print('Mounted!'));
  }

  Ref<int> get count => getState(#count);

  @override
  Widget render(BuildContext context) {
    return ElevatedButton(
      onPressed: () => count.value++,
      child: Text('Count: ${count.value}'),
    );
  }
}

Fine-Grained Reactivity #

Use .watch(context) in any widget for automatic rebuilds:

class MyStatelessWidget extends StatelessWidget {
  final Ref<int> count;
  
  @override
  Widget build(BuildContext context) {
    // Only THIS widget rebuilds when count changes
    return Text('Count: ${count.watch(context)}');
  }
}

Lifecycle Hooks #

Dependency Injection #

DI comes from redus package with key support:

// By type
register<ApiService>(ApiService());
final api = get<ApiService>();

// By key (multiple instances)
register<Logger>(ConsoleLogger(), key: #console);
register<Logger>(FileLogger(), key: #file);
final log = get<Logger>(key: #console);

Full Example #

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

void main() {
  register<TodoStore>(TodoStore());
  runApp(MaterialApp(home: TodoScreen()));
}

class TodoScreen extends ReactiveWidget {
  @override
  void setup() {
    state(#store, () => get<TodoStore>());
    onMounted(() => store.loadTodos());
  }

  TodoStore get store => getState(#store);

  @override
  Widget render(BuildContext context) {
    if (store.isLoading.watch(context)) {
      return const CircularProgressIndicator();
    }
    
    return ListView(
      children: store.todos.value.map((t) => Text(t.title)).toList(),
    );
  }
}

License #

MIT License