0

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?

2
  • 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 Commented Feb 15 at 10:40
  • "how could it be done?" with precacheImage top level function Commented Feb 15 at 12:50

1 Answer 1

0

if you want load image before init() or don't want a white area while displaying the image when you app launch or your ui render on the screen you can use didChangeDependencies().

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,
      ),
    );
  }
}
Sign up to request clarification or add additional context in comments.

2 Comments

Don't add code-only answers. Why does your code work? What does it even do? How does it even attempt to answer the question? Code-only answers don't really teach people, they just give them a "copy this in" solution, and aren't useful if a future visitor comes along with a similar problem but not with the exact same code as the OP.
thanks for guidance. i have edited it . i hope all can understand now.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.