flutter - 使用 Flutter Hooks 实现 Flutter 过渡

Question

我正在尝试FadeTransition在Flutter Hooks.

我正在使用布尔值来显示或隐藏带有淡入淡出过渡动画的小部件。

class RecordingScreen extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final recorderEvents = useProvider(recorderProvider);
    final recorderStates = useProvider(recorderProvider.notifier);
    final animationController =
        useAnimationController(duration: const Duration(seconds: 1));
    // useRecordStateForAnim(recordState: recorderEvents.timerStartOrStop, animationController: animationController);

    return SafeArea(
      child: Scaffold(
        backgroundColor: blueTextColor,
        body: Container(
          height: height(context),
          width: width(context),
          decoration: const BoxDecoration(
              image: DecorationImage(
            image: Svg(waveSvg),
            fit: BoxFit.cover,
          )),
          child: Container(
            constraints: BoxConstraints(
              minWidth: width(context)!,
              maxHeight:
                  recorderEvents.timerStartOrStop ? height(context)! : 70.h,
            ),
            margin: EdgeInsets.symmetric(horizontal: 3.h),
            alignment: Alignment.center,
            child: SingleChildScrollView(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Text("Text",
                      textAlign: TextAlign.center,
                      style: h4(context, Colors.white,
                          fontFamily: "Inter", height: 1.5)),
                  SizedBox(
                    height: 8.h,
                  ),
                  GestureDetector(
                      onTap: () {
                        recorderStates.mapEventsToStats(
                            VoiceRecorderEvents.recordButtonPressed(
                          timerStartOrStop: !recorderEvents.timerStartOrStop,
                        ));
                      
                      },
                      child: buildMicRecButton()),
                  if (!recorderEvents.timerStartOrStop) ...[
                    FadeTransition(
                      opacity: Tween<double>(begin: 0.0, end: 1.0).animate(
                          useRecordStateForAnim(
                              recordState: recorderEvents.timerStartOrStop,
                              animationController: animationController)),
                      child: Column(
                        children: [
                          SizedBox(
                            height: 10.h,
                          ),
                          Text(
                            "text",
                            textAlign: TextAlign.center,
                            style: h6(
                              context,
                              Colors.white,
                              fontWeight: FontWeight.normal,
                              height: 1.4,
                            ),
                          )
                        ],
                      ),
                    ),
                  ] else ...[
                    Column(
                      children: [
                        SizedBox(
                          height: 5.h,
                        ),
                        Text(
                          recorderEvents.time,
                          textAlign: TextAlign.center,
                          style: h6(context, Colors.white,
                              fontWeight: FontWeight.normal,
                              height: 1.4,
                              fontSize: 20.sp),
                        ),
                        SizedBox(
                          height: 8.h,
                        ),
                        Container(
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(15),
                          ),
                          height: 20.h,
                          width: 100.w,
                        )
                      ],
                    )
                  ],
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Animation<double> useRecordStateForAnim(
    {required bool recordState,
    required AnimationController animationController}) {
  return use(_SlideAndFadeAnimation(
    animationController: animationController,
    recordState: recordState,
  ));
}

class _SlideAndFadeAnimation extends Hook<Animation<double>> {
  final AnimationController animationController;

  final bool recordState;

  const _SlideAndFadeAnimation({
    required this.animationController,
    required this.recordState,
  });

  @override
  _SlideAndFadeAnimationState createState() => _SlideAndFadeAnimationState();
}

class _SlideAndFadeAnimationState
    extends HookState<Animation<double>, _SlideAndFadeAnimation> {
  @override
  void initHook() {
    if (hook.recordState) {
      hook.animationController.reverse();
    } else {
      hook.animationController.forward();
    }
  }

  @override
  Animation<double> build(BuildContext context) {
    return hook.animationController.view;
  }
}

我怎样才能做到这一点，请帮忙？谢谢