I'm trying to make a button where when user hold it, there will be a progress, but if the user unpress the button before it finish, the progress will decrease. somthing like the one on the picture
See Question&Answers more detail:osI'm trying to make a button where when user hold it, there will be a progress, but if the user unpress the button before it finish, the progress will decrease. somthing like the one on the picture
See Question&Answers more detail:osAs said by Arnold Parge, you can use the GestureDetector and listen to onTapDown
and onTapUp
. To create your desired LoadingButton, you can use the following Widget Structure:
- GetureDetector
- Stack
- CircularProgressIndicator // background circle
- CircularProgressIndicator // foreground circle
- Icon
To create the animation, you can add an AnimationController and bind the value of the foreground CircularProgressIndicator
to AnimationController.value
. Now you'll just have to the add the two listeners to to the GestureDetector
:
onTapDown
: When tapping on the button, the animation should start. Therefore we call AnimationController.forward()
onTapUp
: When releasing the press, we want to check if the animation is already finished. We can use AnimationController.status to check the status. If it is AnimationStatus.forward
it is still running. Hence we want to reverse the animation with calling AnimationController.reverse()
.Here is the resulting button:
And the complete source code:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(),
home: Scaffold(
body: Center(child: LoadingButton()),
),
);
}
}
class LoadingButton extends StatefulWidget {
@override
LoadingButtonState createState() => LoadingButtonState();
}
class LoadingButtonState extends State<LoadingButton>
with SingleTickerProviderStateMixin {
AnimationController controller;
@override
void initState() {
super.initState();
controller =
AnimationController(vsync: this, duration: Duration(seconds: 1));
controller.addListener(() {
setState(() {});
});
}
@override
Widget build(BuildContext context) {
return GestureDetector(
onTapDown: (_) => controller.forward(),
onTapUp: (_) {
if (controller.status == AnimationStatus.forward) {
controller.reverse();
}
},
child: Stack(
alignment: Alignment.center,
children: <Widget>[
CircularProgressIndicator(
value: 1.0,
valueColor: AlwaysStoppedAnimation<Color>(Colors.grey),
),
CircularProgressIndicator(
value: controller.value,
valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
),
Icon(Icons.add)
],
),
);
}
}