time_widget.dart 2.31 KB
import 'package:flutter/cupertino.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:wow_english/common/blocs/timerbloc/timer_bloc.dart';
import 'package:wow_english/common/extension/string_extension.dart';
import 'package:wow_english/common/widgets/timer_ticker.dart';

class TimerWidget extends StatefulWidget {
  const TimerWidget({super.key, required this.canSendSms});

  final bool canSendSms;

  @override
  State<StatefulWidget> createState() {
    return _TimerWidgetState();
  }
}

class _TimerWidgetState extends State<TimerWidget> {
  late bool sendSmsIng;

  @override
  void initState() {
    super.initState();
    sendSmsIng = false;
  }

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) => TimerBloc(ticker: const TimerTicker()),
      child: _buildCountdownWidget(),
    );
  }

  Widget _buildCountdownWidget() => BlocBuilder<TimerBloc,TimerState>(
    buildWhen: (prev, state) => prev.runtimeType != state.runtimeType,
    builder: (context,state) {
      final bloc = BlocProvider.of<TimerBloc>(context);
      final duration = bloc.state.duration;
      final secondsStr = (duration % 60).floor().toString().padLeft(2, '0');
      if (state is TimerInitial) {
        sendSmsIng = true;
      } else {
        sendSmsIng = false;
      }
      return GestureDetector(
        onTap: () {
          if (widget.canSendSms && !sendSmsIng) {
            bloc.add(ResetEvent());
            bloc.add(StartEvent(duration: bloc.state.duration));
          }
        },
        child: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage(
                    widget.canSendSms?'securitycode'.assetPng:'securitycode_dis'.assetPng
                ),
                fit: BoxFit.fill
            ),
          ),
          padding: const EdgeInsets.symmetric(horizontal:12.0,vertical: 15.0),
          child:  Row(
            children: [
              if (state is TimerInitial)...[
                const Text('获取验证码')
              ],
              if (state is RunningState)...[
                Text('${secondsStr}s倒计时')
              ],
              if (state is FinishedState) ...[
                const Text('获取验证码')
              ]
            ],
          ),
        ),
      );
    },
  );
}