Continuous image load from web api in flutter

Issue

I have web api that returns last image taken from database so I wish to make timer to show latest image every few seconds using Flutter and Dart. Ideally I would like to load image, shot it to the user and request new image from server infinitely. My issue is that before new image is displayed, black screen appears so it makes flickering effect. How can I solve it? Here is my code:

import 'dart:async';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class TestWidget extends StatefulWidget {
  const TestWidget({Key? key}) : super(key: key);

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

class _CameraWidgetState extends State<TestWidget> {
  late int a = 1;
  final scaffoldKey = GlobalKey<ScaffoldState>();

  late bool loaded = false;

  late Future futureRecords;
  Future getImage() async {
    final responses = await http.get(
        Uri.parse("https://0465-95-178-160-106.ngrok.io/profile/download?picNum=" +
            (a++).toString()),
        headers: {
          "Accept": "application/json",
          "Access-Control_Allow_Origin": "*",
        });

    if (responses.statusCode == 200) {
      return responses.bodyBytes;
    } else {
      throw Exception('Failed to load image');
    }
  }

  @override
  void initState() {
    futureRecords = getImage();
    Timer.periodic(Duration(seconds: 5), (timer) async {
      try {
        //await getImage();
        setState(() {
          futureRecords = getImage();
        });
      } catch (Ex) {}
    });

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
        future: futureRecords,
        builder: (context, snapshot) {
          if (!snapshot.hasData)
            return Center(
              child: CircularProgressIndicator(),
            );

          Uint8List bytes = snapshot.data as Uint8List;
          return Image.memory(
            bytes,
            fit: BoxFit.fill,
          );
        });
  }
}

Solution

After few days of trying various methods, I found out about gaplessPlayback property in Image.memory and when I set it to true, all magically worked as expected.

Answered By - MrxMry