Flutter未知功能插件rivership的探索使用

Flutter未知功能插件riversship的探索使用

标题

Rivership

安装

安装 via dart pub add 或 flutter pub add:

dart pub add rivership

包含的内容

Riversship 包括了一组意见一致的工具，可以帮助你更快地构建你的 Flutter 应用。以下是一些亮点：

1. Hooks

   • useTweenAnimation

     • 一个非常有用的钩子，可以让你在不嵌套的情况下使用 TweenAnimationBuilder 的功能。

     final bool isActive;
     
     Widget build(BuildContext context, WidgetRef ref) {
         // 这将在 isActive 为 true 时从 0 动画到 1，并 保持动画每个过渡之后。
         final scale = useTweenAnimation<double>(
             Tween(begin: 0.0, end: isActive ? 1.0 : 0.0),
         );
         return Transform.scale(
             scale: scale,
             child: const Text('Hello World'),
         );
     }
     

     • 对于更简洁的代码，你可以使用 useTweenedValue 方便的钩子，它会为你初始化 Tween。

     final bool isActive;
     
     Widget build(BuildContext context, WidgetRef ref) {
         // 每次 isActive 变化时自动动画每次过渡。
         final scale = useTweenedValue<double>(isActive ? 1.0 : 0.0);
         return Transform.scale(
             scale: scale,
             child: const Text('Hello World'),
         );
     }
     

   • useDelayed

     • 一个帮助你以声明式方式建模延迟 UI 更改的钩子。这在各种动画、弹出框、toast 等方面都非常有用。

     final int value;
     
     Widget build(BuildContext context, WidgetRef ref) {
         // 每次 value 变化时重新开始为 true。
         final isRed = useDelayed(
             delay: const Duration(seconds: 1),
             before: true,
             after: false,
             keys: [value],
         );
         return Text(
             'Value: $value',
             style: TextStyle(color: isRed ? Colors.red : Colors.black),
         );
     }
     

     • 如果你不希望文本一开始变红，而是只在 value 第一次变化时变红，可以将 startDone 设置为 true:

     final isRed = useDelayed(
         delay: const Duration(seconds: 1),
         before: true,
         after: false,
         startDone: true,
         keys: [value],
     );
     

   • usePage

     • 一个返回给定 PageController 的当前页面的钩子，可以帮助你在 PageView 中实现复杂的动画和过渡。

     Widget build(BuildContext context, WidgetRef ref) {
         final pageController = usePageController();
         final page = usePage(pageController);
         return Text('Current page: $page');
     }
     

     • 注意：类似 useAnimation 钩子一样，这个钩子会在页面被拖动或动画时触发重建。确保从树中便宜重建的叶节点调用此钩子。

2. 设计实用工具

   • SimpleWidgetStates
     • WidgetStateProperty 的的一个子类，旨在提供简单性而不牺牲灵活性。

     return TextButton(
         style: TextButton.styleFrom(
             color: SimpleWidgetStates.from(
                 normal: Colors.blue,
                 pressed: Colors.blue[800],
                 disabled: Colors.grey,
             ),
         ),
         child: Text("Button"),
         onPressed: () {},
     );
     

     • 未传递的值将回退到已传递的值，所以你可以只定义需要的状态。

示例 Demo

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Rivership Demo')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 使用 useTweenAnimation
              AnimatedContainer(
                duration: Duration(seconds: 1),
                curve: Curves.easeInOut,
                child: Text(
                  'Hello World',
                  style: TextStyle(fontSize: 36),
                ),
              ),
              SizedBox(height: 2),
              // 使用 useDelayed
              Container(
                width: 100,
                height: 100,
                color: useDelayed(
                  delay: const Duration(seconds: 1),
                  before: true,
                  after: false,
                  keys: ['counter'],
                ) ? Colors.red : Colors.white,
              ),
              SizedBox(height: 10),
              // 使用 usePage
              PageView.builder(
                controller: PageController(),
                itemCount: 5,
                itemBuilder: (context, index) {
                  return Text('Page $index');
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}