94 lines
2.5 KiB
Dart
94 lines
2.5 KiB
Dart
import 'package:flutter/material.dart';
|
|
|
|
void main() {
|
|
runApp(const UseAnimation());
|
|
}
|
|
|
|
class UseAnimation extends StatefulWidget {
|
|
const UseAnimation({super.key});
|
|
|
|
@override
|
|
State<UseAnimation> createState() => _UseAnimationState();
|
|
}
|
|
|
|
class _UseAnimationState extends State<UseAnimation>
|
|
with SingleTickerProviderStateMixin {
|
|
late AnimationController _controller;
|
|
late Animation<double> _tween;
|
|
|
|
@override
|
|
void initState() {
|
|
_controller = AnimationController(vsync: this);
|
|
_tween = Tween<double>(begin: 0, end: 1).animate(_controller)
|
|
..addStatusListener((status) {
|
|
// print(status);
|
|
})
|
|
..addListener(() {
|
|
setState(() {});
|
|
});
|
|
// _controller.forward();
|
|
super.initState();
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
super.dispose();
|
|
_controller.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return MaterialApp(
|
|
title: 'Use Animation',
|
|
home: Scaffold(
|
|
appBar: AppBar(title: const Text('use animation')),
|
|
body: Center(
|
|
child: SizedBox(
|
|
height: 300,
|
|
width: 200,
|
|
child: Stack(
|
|
alignment: Alignment.center,
|
|
children: [
|
|
Image.asset('assets/images/user_2.png'),
|
|
Positioned.fill(
|
|
child: Container(
|
|
color: _tween.value == 1.0
|
|
? null
|
|
: const Color.fromARGB(255, 36, 36, 36)
|
|
.withOpacity(0.3),
|
|
child: Center(
|
|
child: Text(
|
|
(_tween.value * 100).toStringAsFixed(1),
|
|
style: const TextStyle(
|
|
color: Colors.green,
|
|
fontSize: 24,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
CircularProgressIndicator(
|
|
value: _tween.value,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
floatingActionButton: FloatingActionButton(
|
|
onPressed: () {
|
|
if (_tween.value == 1.0) {
|
|
_controller.reset();
|
|
}
|
|
print(_tween.value);
|
|
// print(_controller.value);
|
|
_controller.animateTo(_tween.value + 0.1,
|
|
duration: const Duration(milliseconds: 200));
|
|
print(_tween.value);
|
|
},
|
|
child: const Icon(Icons.plus_one),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|