How can TickerProvider vsync property be used inside ConsumerWidget/Stateless widget Riverpod | Flutter

Question

The timer package I'm using made some breaking changes which are very helpful performance wise but this clashes with my design of ConsumerWidgets.

So I'm wondering if there is a way to get this working without changing everything. This post gives a clue passing Scaffold.of() which I can't see working in my situation, seems weird to pass context around.

How can I get this working within my current design or with some preferably simple changes?

Form Widget:

class OTPSignInForm extends ConsumerWidget {
  OTPSignInForm({Key? key}) : super(key: key);
  final GlobalKey<FormState> _otpSignInFormKey = GlobalKey<FormState>();
  final GlobalKey<FormState> _localSignInFormKey = GlobalKey<FormState>();

  final CustomTimerController _emailOTPTimeController = CustomTimerController(
    vsync: Scaffold.of(context),                                 // Takes TickerProvider
    begin: const Duration(minutes: 10),
    end: const Duration(minutes: 0),
    initialState: CustomTimerState.reset,
    interval: CustomTimerInterval.seconds,
  );

  final CustomTimerController _phoneOTPTimeController = CustomTimerController(
    vsync: Scaffold.of(context),                                // Takes TickerProvider
    begin: const Duration(minutes: 10),
    end: const Duration(minutes: 0),
    initialState: CustomTimerState.reset,
    interval: CustomTimerInterval.seconds,
  );

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Column(
      children: [
        AutofillGroup(
          child: Form(
            key: _localSignInFormKey,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                
                       ...
                
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      TextContent.of(context).otpVerifyCodeExpiryWarning,
                      style: ThemeEndpoints.secondaryHeader(),
                    ),
                    const SizedBox(width: 8.0),
                    OTPTimer(timeController: _emailOTPTimeController),    // Passing here
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      TextContent.of(context).otpVerifyCodeExpiryWarning,
                      style: ThemeEndpoints.secondaryHeader(),
                    ),
                    const SizedBox(width: 8.0),
                    OTPTimer(timeController: _phoneOTPTimeController),    // Passing here
                  ],

                ),
              ],
            ),
          ),
                ...
        ),
      ],
    );
  }

Timer:

class OTPTimer extends StatelessWidget {
  final CustomTimerController timeController;

  const OTPTimer({
    required this.timeController,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CustomTimer(
      controller: timeController,
      builder: (state, time) {
        return Text(
          "${time.hours}:${time.minutes}:${time.seconds}",
          style: timerStyle(time),
        );
      },
    );
  }

  // // Timer time text
  TextStyle timerStyle(CustomTimerRemainingTime timeRemaining) {
    // Green indicator text
    if (int.parse(timeRemaining.minutesWithoutFill) > 3) {
      return ThemeEndpoints.infoHeaderPositive();
    }
    // Yellow indicator warning text
    if (int.parse(timeRemaining.minutesWithoutFill) < 3 &&
        int.parse(timeRemaining.minutesWithoutFill) > 1) {
      return ThemeEndpoints.infoHeaderWarning();
    }
    // Red indicator warning text
    return ThemeEndpoints.infoHeaderNegative();
  }
}