Why does not the picture change for every period of time?

Question

I want my flutter web page display a photo , and change for every 3 seconds to display another photo .. here is my code

class _contactPageState extends State<contactPage> {

List<String> randomPics= ['profiles/github.png', 'profiles/linkedIn.png', 'profiles/stack.png'];
Timer timer;
var random= Random();
String photo;

@override
void initState() {
photo = randomPics[random.nextInt(randomPics.length)];
openLink = new linksToOpen();
super.initState();
timer = new Timer(new Duration(seconds: 1), ( ){
  setState(() {
    photo= randomPics[random.nextInt(randomPics.length)];
    print('${photo}');
  });
});
}
  @override
Widget build(BuildContext context) {
    Container(
           
      child: Image(image : AssetImage(photo),gaplessPlayback: true,),
        width: 400, height: 400,
                
                ),

What is the problem with my code ? Please , can anyone help me !

score 1 · Accepted Answer · answered Oct 04 '20 at 22:34

I did some test and I think this could work for you:

import 'dart:async';
import 'dart:math';

import 'package:flutter/widgets.dart';

class ContactPageState extends StatefulWidget {
  ContactPageState({Key key}) : super(key: key);

  @override
  _ContactPageState createState() => _ContactPageState();
}

class _ContactPageState extends State<ContactPageState> {
  List<String> randomPics = ['assets/a.jpg', 'assets/b.jpg', 'assets/c.jpg'];
  String photo;
  final random = new Random();

  void initState() {
    WidgetsBinding.instance.addPostFrameCallback((_) => configureTimer());
    super.initState();
  }

  configureTimer() {
    Timer.periodic(Duration(milliseconds: 3000), (timer) {
      final int index = random.nextInt(randomPics.length);
      setState(() {
        photo = randomPics[index];
        debugPrint('Select picture $photo in index $index');
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Image(
        image: AssetImage(photo != null ? photo : 'assets/a.jpg'),
        gaplessPlayback: true,
      ),
      width: 400,
      height: 400,
    );
  }
}

score 1 · Answer 2 · answered Oct 05 '20 at 06:30

For a quick fix, you need to add function setStatus ... as a callback function so it can call itself infinitely.

  void _nextPic(){
    setState(() {
      photo= randomPics[random.nextInt(randomPics.length)];
      print('${photo}');
    });
    timer = new Timer(new Duration(seconds: 1), _nextPic);
  }

This function create another timer after this one is done. So you can just need to create the first timer in initState...

  @override
  void initState() {
    photo = randomPics[random.nextInt(randomPics.length)];
    super.initState();
    timer = new Timer(new Duration(seconds: 1), _nextPic);
  }

Thank you so much for the help – Sana'a Al-ahdal Oct 05 '20 at 18:31 — Sana'a Al-ahdal, Oct 05 '20 at 18:31

score 0 · Answer 3 · answered Oct 04 '20 at 21:12

0

For one thing, you will need to specify 3 seconds instead of 1. Another, you may be looking for timer.periodic to have this execute multiple times (until you tell it to stop) instead of a single timer countdown that happens starting from state initialization.

An example, see selected answer here: Flutter Countdown Timer

Documentation: https://api.flutter.dev/flutter/dart-async/Timer/Timer.periodic.html

answered Oct 04 '20 at 21:12

Scott

236
2
7

even with one second , it does not change .. can you help with more explanation or code that it will change automatically – Sana'a Al-ahdal Oct 04 '20 at 21:22

Why does not the picture change for every period of time?

3 Answers3