How can I chain two images to load asset synchronized together?

I have two images and load local asset.

    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Image.asset(
          'assets/images/ic_x.png',
          height: size,
        ),
        Image.asset(
          'assets/images/ic_$giftCount.png',
          height: size,
        ),
      ],
    )

but assets/images/ic_x.png will load faster than assets/images/ic_$giftCount.png

I want to make them appear at the same time

How to achieve it?

I think what your looking for is precacheImage which also returns a Future, hence you can await multiple images at the same time:

First, create a variable in your State class:

bool _isImagesLoaded = false;

then, create a method to await the images:

 Future<void> _loadImages() async {
    await Future.wait([
      precacheImage(
        AssetImage(image1Path),
        context,
      ),
      precacheImage(
        AssetImage(
          image2Path,
        ),
        context,
      ),
    ]);
    setState(() {
      _isImagesLoaded = true;
    });
  }

and in your build, check whether the images were loaded or not.

Here is a complete runnable snippet (obviously you'll have to change the image paths):

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Images(),
    );
  }
}

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

  @override
  State<Images> createState() => _ImagesState();
}

class _ImagesState extends State<Images> {
  bool _isImagesLoaded = false;
  final image1Path = 'assets/images/image1.jpg';
  final image2Path = 'assets/images/image2.jpg';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _isImagesLoaded ? _buildImages() : _buildLoading(),
      ),
    );
  }

  Future<void> _loadImages() async {
    await Future.wait([
      precacheImage(
        AssetImage(image1Path),
        context,
      ),
      precacheImage(
        AssetImage(
          image2Path,
        ),
        context,
      ),
    ]);
    setState(() {
      _isImagesLoaded = true;
    });
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _loadImages();
  }

  Widget _buildImages() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Image.asset(
          image1Path,
        ),
        Image.asset(
          image2Path,
        ),
      ],
    );
  }

  Widget _buildLoading() {
    return const CircularProgressIndicator();
  }
}

See also

• https://stackoverflow.com/q/51343735/12349734