展示 HN: Flutter_compositions：受 Vue 启发的 Flutter 响应式构建块

展示 HN: Flutter_compositions：受 Vue 启发的 Flutter 响应式构建块
Show HN: Flutter_compositions: Vue-inspired reactive building blocks for Flutter

原始链接: https://github.com/yoyo930021/flutter_compositions

## Flutter Compositions：为 Flutter 带来的 Vue 风格响应式编程 Flutter Compositions 将 Vue 3 的 Composition API 的强大功能带到 Flutter 开发中。它提供了一种声明式且简洁的方式来管理状态和逻辑，使用了像 `ref`、`computed`、`watch` 和 `watchEffect` 这样的熟悉概念。它构建于 `alien_signals` 之上，提供细粒度的响应式，从而实现高效的更新和优化的性能。主要特性包括通过自定义 composables 实现可组合逻辑，使用 `provide/inject` 进行类型安全的依赖注入，以及内置的 composables 用于常见任务，如控制器和动画。该库通过单个 `setup()` 函数简化开发，取代了传统的生命周期方法并减少了样板代码。它还包含自定义 lint 规则以鼓励最佳实践。该项目是一个 Melos monorepo，提供结构化的开发环境和易于测试的机制。欢迎贡献！

## Flutter Composition Library - 摘要一个名为 `flutter_compositions` 的新 Flutter 库，灵感来自 Vue.js，旨在简化 Flutter 开发中的响应式构建块。创建者 yoyo930021 在 Hacker News 上分享了这个项目，引发了关于 Flutter 易用性和状态管理的讨论。一些开发者报告说使用 Flutter 内置工具（如 `ValueNotifier` 和 `InheritedWidget`）取得了成功，而另一些人则认为该框架的人体工程学有不足，称赞了 Dart 语言本身。人们担心与第三方库的潜在“锁定”，因为长期使用后迁移会变得困难。许多评论者对替代方案表示兴奋，指出 Flutter 的复杂性通常需要 AI 辅助来解决看似简单的问题。MobX（针对 Dart）和 GetIt 等现有解决方案也被提及。该项目因其简洁的代码和易于理解的概念而受到积极反馈，并收到性能基准测试的请求。

原文

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.

展示 HN: Flutter_compositions：受 Vue 启发的 Flutter 响应式构建块 Show HN: Flutter_compositions: Vue-inspired reactive building blocks for Flutter

展示 HN: Flutter_compositions：受 Vue 启发的 Flutter 响应式构建块
Show HN: Flutter_compositions: Vue-inspired reactive building blocks for Flutter