How can I speed up the loading speed of my AssetImage?

Question

My image size is quite small which is about 50kb but it seems to load longer than I expected it would be, so my app doesn't load up that prettily as I would imagined. Any way I could speed it up? `

import 'dart:async';
import 'package:egarment2/pages/home_page.dart';
import 'package:egarment2/sign_in.dart';
import 'package:flutter/material.dart';

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

  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override

  // void initState() {
  //   super.initState();
  //   Timer(
  //     const Duration(seconds: 3),
  //     () {
  //       Navigator.pushReplacement(
  //         context,
  //         MaterialPageRoute(
  //           builder: (context) => HomePage(),
  //         ),
  //       );
  //     },
  //   );
  // }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        // color: const Color(0xFFf65d46),
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/images/bg.jpg'),
            fit: BoxFit.fill,
          ),
        ),
        width: MediaQuery.of(context).size.width,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset(
              'assets/images/logo.png',
              width: 75,
              height: 75,
            ),
            const SizedBox(
              height: 25,
            ),
            const Text(
              'E-Garment',
              style: TextStyle(
                  color: Colors.black,
                  fontWeight: FontWeight.bold,
                  fontSize: 30),
            ),
          ],
        ),
      ),
    );
  }
}

`

I tried compressing the image size which originally was 200 something kb to 50kb (current size) but it doesn't seem to do anything.

Answer 1

You can use the method precacheImage:

class _SplashScreenState extends State<SplashScreen> {
   final _image = AssetImage('assets/images/bg.jpg');

  @override
  void initState() {
    super.initState();
    precacheImage(_image, context);
    
    // Add your own initState code here
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    precacheImage(_image, context);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: _image,
            fit: BoxFit.fill,
          ),
        ),

        // ...
      ),
    );
  }
}