flutter_compositions library

Flutter Compositions provides Vue-like composition utilities for Flutter.

Build widgets with a setup function and fine-grained reactivity powered by the alien_signals package.

Classes

AsyncData<T>

Data state - operation completed successfully.

AsyncError<T>

Error state - operation failed.

AsyncIdle<T>

Idle state - no connection, no data.

AsyncLoading<T>

Loading state - waiting for data.

AsyncValue<T>

Result of an async operation tracked by useFuture.

CompositionBuilder

A function-based alternative to CompositionWidget that can be used inline without defining a class, similar to StatefulBuilder.

CompositionWidget

A Widget that uses Vue Composition API style.

ComputedBuilder

A widget that creates a fine-grained reactive scope for its child.

ComputedRef<T>

A read-only computed reference, similar to Vue's ComputedRef.

CustomRef<T>

A custom ref that allows manual control of tracking and triggering.

InjectionKey<T>

A symbol used as a key for injecting values with type safety.

ReadonlyCustomRef<T>

A read-only custom ref that allows manual control of tracking and triggering.

ReadonlyRef<T>

A read-only reactive reference.

Ref<T>

A reactive reference, similar to Vue's Ref.

WritableComputedRef<T>

A writable computed reference.

WritableRef<T>

A writable reactive reference interface.

Extensions

CompositionWidgetExtension on T

Extension on CompositionWidget that provides reactive widget access.

Functions

computed<T>(T getter()) → ReadonlyRef<T>

Creates a read-only computed value, similar to Vue's computed().

customRef<T>({required T getter(void track()), required void setter(T value, void trigger())}) → CustomRef<T>

Creates a custom ref with manual track/trigger control.

inject<T>(InjectionKey<T> key, {Object? defaultValue = const _NoDefaultValue()}) → T

Injects a value provided by an ancestor component using an InjectionKey.

manageAnimation<A extends Animation<T>, T>(A animation) → (A, ReadonlyRef<T>)

Manages an Animation and creates a reactive reference to its value.

manageChangeNotifier<T extends ChangeNotifier>(T notifier) → ReadonlyRef<T>

Manages a ChangeNotifier with automatic lifecycle management.

manageListenable<T extends Listenable>(T listenable) → ReadonlyRef<T>

Manages a Listenable and creates a reactive read-only reference.

manageValueListenable<L extends ValueListenable<T>, T>(L listenable) → (L, ReadonlyRef<T>)

Manages a ValueListenable and creates a reactive reference to its value.

onBuild(void callback(BuildContext)) → void

Registers a callback to be called on every build.

onMounted(VoidCallback callback) → void

Registers a callback to be called when the component is mounted, similar to Vue's onMounted().

onUnmounted(VoidCallback callback) → void

Registers a callback to be called when the component is unmounted, similar to Vue's onUnmounted().

provide<T>(InjectionKey<T> key, T value) → void

Provides a value that can be injected by descendant components, similar to Flutter's Provider package but scoped to composition trees.

ref<T>(T initialValue, {String? debugLabel}) → Ref<T>

Creates a reactive reference, similar to Vue's ref().

untracked<T>(T callback()) → T

Executes a function without tracking reactive dependencies.

useAnimationController({TickerProvider? vsync, double? value, Duration? duration, Duration? reverseDuration, String? debugLabel, double lowerBound = 0.0, double upperBound = 1.0, AnimationBehavior animationBehavior = AnimationBehavior.normal}) → (AnimationController, ReadonlyRef<double>)

Creates an AnimationController with automatic lifecycle management and reactive tracking.

useAppLifecycleState() → Ref<AppLifecycleState>

Creates a reactive reference that tracks the app lifecycle state.

useAsyncData<T, W>(Future<T> future(W watchValue), {W watch()?}) → (ReadonlyRef<AsyncValue<T>>, void Function())

Creates a reactive async operation that re-executes when watch function changes.

useAsyncValue<T>(ReadonlyRef<AsyncValue<T>> statusRef) → (ReadonlyRef<T?>, ReadonlyRef<Object?>, ReadonlyRef<bool>, ReadonlyRef<bool>)

Creates separate reactive refs for data, error, and status from an AsyncValue.

useContext() → Ref<BuildContext?>

Creates a reactive reference to the BuildContext.

useContextRef<T>(T selector(BuildContext), {bool equals(T, T)?}) → ReadonlyRef<T>

Creates a reactive reference that tracks a value from BuildContext.

useFocusNode({String? debugLabel, FocusOnKeyEventCallback? onKeyEvent, bool skipTraversal = false, bool canRequestFocus = true, bool descendantsAreFocusable = true, bool descendantsAreTraversable = true}) → ReadonlyRef<FocusNode>

Creates a FocusNode with automatic lifecycle management and reactive tracking.

useFuture<T>(Future<T> future()) → Ref<AsyncValue<T>>

Creates a reactive reference that tracks a Future's state and result.

useLocale() → ReadonlyRef<Locale>

Creates a reactive reference to the current Locale.

useMediaQuery() → ReadonlyRef<MediaQueryData>

Creates a reactive reference to MediaQuery data.

useMediaQueryInfo() → (ReadonlyRef<Size>, ReadonlyRef<Orientation>)

Creates reactive references to MediaQuery size and orientation.

usePageController({int initialPage = 0, bool keepPage = true, double viewportFraction = 1.0}) → ReadonlyRef<PageController>

Creates a PageController with automatic lifecycle management and reactive tracking.

usePlatformBrightness() → ReadonlyRef<Brightness>

Creates a reactive reference to the platform brightness (light/dark mode).

useScrollController({double initialScrollOffset = 0.0, bool keepScrollOffset = true, String? debugLabel}) → ReadonlyRef<ScrollController>

Creates a ScrollController with automatic lifecycle management and reactive tracking.

useSearchController() → ReadonlyRef<SearchController>

Creates a SearchController with automatic lifecycle management and reactive tracking.

useSingleTickerProvider() → SingleTickerProvider

Creates a SingleTickerProviderStateMixin for use with AnimationController.

useStream<T>(Stream<T> stream, {required T initialValue}) → Ref<T>

Creates a reactive reference that tracks a Stream's latest value.

useStreamController<T>({required T initialValue}) → (StreamController<T>, Ref<T>)

Creates a StreamController with automatic lifecycle management.

useTextEditingController({String? text}) → (TextEditingController, WritableRef<String>, WritableRef<TextEditingValue>)

Creates a TextEditingController with automatic lifecycle management.

useTextScale() → ReadonlyRef<TextScaler>

Creates a reactive reference to text scale factor.

useTheme() → ReadonlyRef<ThemeData>

Creates a reactive reference to Theme data.

watch<T>(T source(), void callback(T newValue, T? oldValue), {bool immediate = false}) → void Function()

Watches a reactive source and calls a callback when it changes, similar to Vue's watch().

watchEffect(void callback()) → void Function()

Runs a function and automatically re-runs it when reactive dependencies change, similar to Vue's watchEffect.

writableComputed<T>({required T get(), required void set(T value)}) → WritableRef<T>

Creates a writable computed value with custom getter and setter.

Typedefs

CompositionBuilderCallback = Widget Function(BuildContext context)

Signature for the builder callback used by CompositionBuilder.

CompositionSetup = CompositionBuilderCallback Function()

Signature for the setup callback used by CompositionBuilder.