I want the first frame of my app to be an image, the same image as my native splashscreen (on ios). i would like a smooth transition between the native splash screen and the app splash screen.

i am using this widget in my build:

  Image.asset(
    'assets/splashScreen.jpg',
    fit: BoxFit.cover,
    width: double.infinity,
    height: double.infinity,
  ),

but this creates a frame without image (white), since the image has to load. so i get a flash between the 2 renders.

i want the image to be loaded before the first build so the transition gets smooth, in the initState. i don't care if it freezes the app. i just don't want this flash between the ios native splash screen and the flutter splash screen.

how could it be done?

I want the first frame of my app to be an image, the same image as my native splashscreen (on ios). i would like a smooth transition between the native splash screen and the app splash screen.

i am using this widget in my build:

  Image.asset(
    'assets/splashScreen.jpg',
    fit: BoxFit.cover,
    width: double.infinity,
    height: double.infinity,
  ),

but this creates a frame without image (white), since the image has to load. so i get a flash between the 2 renders.

i want the image to be loaded before the first build so the transition gets smooth, in the initState. i don't care if it freezes the app. i just don't want this flash between the ios native splash screen and the flutter splash screen.

how could it be done?

• ios
• flutter
• loading

• Looking out for the solution too so I up voted it. I'm sure the solution would work for both iOS and Android I guess – Kelvinsekx Commented Feb 15 at 10:40
• "how could it be done?" with precacheImage top level function – pskink Commented Feb 15 at 12:50

1 Answer 1

You can load your asset image like this. it will load your image fast even before init()

class Demo extends StatefulWidget {
  const Demo({super.key});

  @override
  State<StatefulWidget> createState() {
    return _DemoState();
  }
}

class _DemoState extends State<Demo> {
  // To Preload Image in our App
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    final image = Image.asset('assets/splashScreen.jpg');
    precacheImage(image.image, context);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Image.asset(
        'assets/splashScreen.jpg',
        fit: BoxFit.cover,
        width: double.infinity,
        height: double.infinity,
      ),
    );
  }
}