Flutter Compositions

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.

Documentation

📚 Read the full documentation →

• Getting Started - Quick start guide and installation
• Guide - Learn core concepts and patterns
• API Reference - Complete API documentation
• Internals - Architecture and design decisions

Packages

This repository uses a Melos-managed monorepo layout:

Package	Description	Version
flutter_compositions	Core reactive composition primitives for Flutter
flutter_compositions_lints	Custom lint rules to enforce best practices

Quick Example

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),
          ),
        );
  }
}

Features

• 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

Development

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

Running the Example App

cd packages/flutter_compositions/example
flutter run

Contributing

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

Acknowledgments

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.

License

MIT © 2025