how to display an image in flutter after every 5 seconds? - flutter

Question

i am new at flutter and building a project in which a distractor appears after every 5 sec on the the screen. i am using timer periodic but it the picture does not appears after 5 seconds rather it get displayed randomly after a few times. it starts to flash the image on the screen rather then keeping it displayed. also pictures doesnt appear after set time rather it changes its time itself. please help me. i am sad.
...
import 'dart:async';
import 'dart:math';
import 'package:flutter/material.dart';
class adhd1 extends StatefulWidget {
const adhd1({Key? key}) : super(key: key);
#override
State<adhd1> createState() => _adhd1State();
}
class _adhd1State extends State<adhd1> {
int a = 4;
bool distractor1 = false;
bool? distractor2 = false;
bool? distractor3 = false;
bool? distractor4 = false;
late Duration tt;
late Duration ff;
#override
Widget build(BuildContext context) {
showD1() {
Timer.periodic(
tt = Duration(seconds: 4),
(Timer t) => setState(() {
distractor1 = true;
t.cancel();
}));
Timer.periodic(
ff = Duration(seconds: 5),
(Timer d) => setState(() {
distractor1 = false;
d.cancel();
}));
if (distractor1) {
return SizedBox(
height: 200,
child: Image.asset(
"assets/images/character_robot_attack0.png",
fit: BoxFit.contain,
));
} else {
return const SizedBox(
height: 200,
);
}
}
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: Column(
children: [showD1()],
)));
}
}
...

Answer 1

To show for 2 second and hide 5sec, I am using AnimationController
class AnimeTestW extends StatefulWidget {
AnimeTestW({Key? key}) : super(key: key);
#override
State<AnimeTestW> createState() => _AnimeTestWState();
}
class _AnimeTestWState extends State<AnimeTestW>
with SingleTickerProviderStateMixin {
late AnimationController controller;
#override
void initState() {
super.initState();
controller = AnimationController(
vsync: this,
duration: const Duration(seconds: 2),
reverseDuration: const Duration(seconds: 5),
)
..addListener(() {
print(controller.status);
if (controller.status == AnimationStatus.completed) {
controller.reverse();
}
if (controller.status == AnimationStatus.dismissed) {
controller.forward();
}
setState(() {});
})
..forward();
}
#override
void dispose() {
controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(onPressed: () {
controller.reverse();
}),
body: Column(
children: [
Text("A"),
if (controller.status == AnimationStatus.forward)
Container(
width: 100,
height: 100,
color: Colors.red,
)
],
),
);
}
}
Use initState with a state bool
class _adhd1State extends State<adhd1> {
Timer? timer;
bool showImage = false;
#override
void initState() {
super.initState();
timer = Timer.periodic(Duration(seconds: 5), (timer) {
setState(() {
showImage = !showImage;
});
});
}
#override
void dispose() {
timer?.cancel();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: Column(
children: [
if (showImage)
Image.asset(
"assets/images/character_robot_attack0.png",
fit: BoxFit.contain,
)
],
),
),
);
}
}