Flutter, how to automatically animate without a button trigger - flutter

Question

I have some animation code that changes background color infinitely
but the problem is I want to do this without a button trigger
and I want this to be automated at first time (when it's firstly loading)
below is code
I`m so stuck could anyone help please
the purpose is to animate without a trigger, it automatically runs animation that changes background
import 'package:flutter/material.dart';
class ScreenTime extends StatefulWidget {
#override
_ScreenTimeState createState() => _ScreenTimeState();
}
class _ScreenTimeState extends State<ScreenTime> {
List<Color> colorList = [
Colors.red,
Colors.blue,
Colors.green,
Colors.yellow
];
List<Alignment> alignmentList = [
Alignment.bottomLeft,
Alignment.bottomRight,
Alignment.topRight,
Alignment.topLeft,
];
int index = 0;
Color bottomColor = Colors.black54;
Color topColor = Colors.white10;
Alignment begin = Alignment.bottomLeft;
Alignment end = Alignment.topRight;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
AnimatedContainer(
duration: Duration(seconds: 2),
onEnd: () {
setState(() {
index = index + 1;
// animate the color
bottomColor = colorList[index % colorList.length];
topColor = colorList[(index + 1) % colorList.length];
//// animate the alignment
// begin = alignmentList[index % alignmentList.length];
// end = alignmentList[(index + 2) % alignmentList.length];
});
},
decoration: BoxDecoration(
gradient: LinearGradient(
begin: begin, end: end, colors: [bottomColor, topColor])),
),
Positioned.fill(
child: IconButton(
icon: Icon(Icons.play_arrow),
onPressed: () {
setState(() {
bottomColor = Colors.blue;
});
},
),
)
],
));
}
}

Answer 1

To keep as much as your original implementation as possible while fixing the problem, doing
WidgetsBinding.instance.addPostFrameCallback((_) => setState(() {bottomColor = Colors.blue;}));
in initState would not pose an issue. This is as long as it's done in initState. Calling it in build would lead to an undesirable extra infinite loop.
However, using an AnimationController on repeat would almost certainly be a cleaner implmentation.

Answer 2

the purpose of this question was basically "how to animate AnimatedContainer without a trigger"
and I think I found a solution
what I did is
just make a new function and then in the build method, invokes the method
and method code is like below
setState(() {
index = index + 1;
bottomColor = Colors.blue;
});
my second solution is this and I think it works
but I worry if it has a any side effects
WidgetsBinding.instance.addPostFrameCallback((_) => setState(() {}));

Answer 3

Use this
bool selected = false;
#override
void initState() {
Future.delayed(const Duration(seconds: 1), () {
setState(() {
selected = true;
});
});
super.initState();
}
#override
Widget build(BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
color: Colors.white
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
AnimatedAlign(
alignment: selected ? Alignment.topRight : Alignment.bottomLeft,
duration: const Duration(seconds: 1),
curve: Curves.fastOutSlowIn,
child: const FlutterLogo(size: 50.0),
),
],
));}
This Will automatically starts the animation. You can change the duration or animation type also.