yoyo930021/flutter_compositions: Vue-inspired reactive building blocks for Flutter

Vue-inspired reactive building blocks for Flutter

Flutter Compositions brings Vue 3’s Composition API patterns to Flutter, enabling fine-grained reactivity and composable logic with a clean, declarative API.

📚 Read the full documentation →

This repository uses a Melos-managed monorepo layout:

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

class CounterPage extends CompositionWidget {
  const CounterPage({super.key});

  @override
  Widget Function(BuildContext) setup() {
    // Reactive state
    final count = ref(0);
    final doubled = computed(() => count.value * 2);

    // Side effects
    watch(() => count.value, (value, previous) {
      debugPrint('count: $previous → $value');
    });

    // Return builder
    return (context) => Scaffold(
          appBar: AppBar(title: const Text('Counter')),
          body: Center(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text('Count: ${count.value}'),
                Text('Doubled: ${doubled.value}'),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () => count.value++,
            child: const Icon(Icons.add),
          ),
        );
  }
}

• Vue-inspired API – Familiar ref, computed, watch, and watchEffect
• Fine-grained reactivity – Powered by alien_signals
• Composable logic – Extract and reuse stateful logic with custom composables
• Type-safe DI – provide/inject with InjectionKey
• Built-in composables – Controllers, animations, async data, and more
• Zero boilerplate – Single setup() function replaces multiple lifecycle methods
• Lint rules – Custom lints enforce best practices

This is a Melos monorepo. To get started:

# Install Melos
flutter pub global activate melos

# Bootstrap the workspace
melos bootstrap

# Run tests across all packages
melos run test

# Run analysis
melos run analyze

cd packages/flutter_compositions/example
flutter run

Contributions are welcome! Please feel free to submit a Pull Request.

Flutter Compositions is built upon excellent work from the open source community:

• alien_signals – Provides the core reactivity system with fine-grained signal-based state management
• flutter_hooks – Inspired composable patterns and demonstrated the viability of composition APIs in Flutter

We are grateful to these projects and their maintainers for paving the way.

MIT © 2025