Flutter动画计时器图标插件flutter_animated_timer_icon的使用

Flutter 动画计时器图标插件 flutter_animated_timer_icon 的使用

插件简介

这是一个小部件，可以作为图标来表示剩余时间。它可以作为一个文本字段的后缀或更大的图标使用。

使用方法

要使用 Animated Timer Icon，首先需要将其导入到你的小部件文件中：

import 'package:flutter_animated_timer_icon/flutter_animated_timer_icon.dart';

一旦导入完成，你可以在代码中这样使用它：

final animateTimerController = AnimateTimerController();

AnimateTimer(
  animateTimerController: animateTimerController,
  size: 200,
  color: Colors.blue,
  animationDuration: 10,
  animationBehaviorPreserve: true,
)

你可以通过控制器来控制动画：

onPressed: () {
  animateTimerController.restart();
}

onPressed: () {
  animateTimerController.start();
}

onPressed: () {
  animateTimerController.stop();
}

完整示例代码

以下是完整的示例代码，展示了如何在应用中使用 Animated Timer Icon。

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

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final animateTimerController = AnimateTimerController();
  final animateTimerController2 = AnimateTimerController();
  TextEditingController textEditingController = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Material App Bar'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Center(
            child: SizedBox(
              width: 200,
              child: Column(
                children: [
                  TextField(
                    controller: textEditingController..text = ' ',
                    decoration: InputDecoration(
                      labelText: 'Enter the code',
                      suffix: AnimateTimer(
                        animateTimerController: animateTimerController,
                        size: 22,
                        color: Colors.blue,
                        animationDuration: 10,
                        animationBehaviorPreserve: true,
                      ),
                    ),
                  ),
                  const SizedBox(
                    height: 20,
                  ),
                  TextButton(
                      onPressed: () {
                        textEditingController.text = ' ';
                        animateTimerController.restart();
                      },
                      child: const Text('Submit')),
                  const SizedBox(
                    height: 50,
                  ),
                  Center(
                    child: AnimateTimer(
                      animateTimerController: animateTimerController2,
                      size: 200,
                      color: Colors.blue,
                      animationDuration: 10,
                      animationBehaviorPreserve: true,
                    ),
                  ),
                  const SizedBox(
                    height: 50,
                  ),
                  Row(
                    children: [
                      TextButton(
                          onPressed: () {
                            animateTimerController2.restart();
                          },
                          child: const Text('Restart')),
                      TextButton(
                          onPressed: () {
                            animateTimerController2.start();
                          },
                          child: const Text('Start')),
                      TextButton(
                          onPressed: () {
                            animateTimerController2.stop();
                          },
                          child: const Text('Stop')),
                    ],
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}