How do I make a Looping Function in flutter - function

Question

I want to make a widget(a fan) spin around untill the user clicks it.
And for that, I thought I was gonna use a function, but then the question is;
How do I make a looping function, that stoppes when a bool = false?
This is my current function (that doesn't loop):
#override
void initState() {
super.initState();
angleController = AnimationController(vsync: this, duration: Duration(milliseconds: 230));
angleController .addListener(() {
setState(() {
fanAngle = angleController.value * 90 / 360 * pi * 2;
});
});
}
And the GestureDetector function:
void fanRotation() {
if(angleController.status == AnimationStatus.completed){
angleController.stop();
fanState = false;
} else if (angleController.status == AnimationStatus.dismissed) {
angleController.forward();
fanState = true;
}
}
}
I want it to have a continuous loop, so no stopping and starting again.

Answer 1

You can copy paste run full code below
You can directly call angleController.repeat() in initState() and call angleController.stop() when click fan
code snippet
#override
void initState() {
super.initState();
angleController =
AnimationController(vsync: this, duration: Duration(seconds: 3));
angleController.repeat();
}
...
GestureDetector(
onTap: () {
angleController.stop();
},
child: Icon(
Icons.forward,
color: Colors.pink,
size: 100.0,
)),
working demo
full code
import 'package:flutter/material.dart';
import 'dart:math';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
AnimationController angleController;
#override
void initState() {
super.initState();
angleController =
AnimationController(vsync: this, duration: Duration(seconds: 3));
angleController.repeat();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
AnimatedBuilder(
animation: angleController,
builder: (_, child) {
return Transform.rotate(
angle: angleController.value * pi * 2,
child: child,
);
},
child: GestureDetector(
onTap: () {
angleController.stop();
},
child: Icon(
Icons.forward,
color: Colors.pink,
size: 100.0,
)),
),
],
),
),
);
}
}

Answer 2

You need a timer.periodic:
https://api.flutter.dev/flutter/dart-async/Timer/Timer.periodic.html
Use it to keep the rotation function running and just turn it off when clicked.
var timer = Timer.periodic(Duration(seconds: 5), (timer) {
//Your function goes here
});
// Cancel the timer
timer.cancel();