CODEWITHSUNDEEP
flutter
Allen Hu
Allen Hu

Reputation: 655

Custom Splash Screen with Image in flutter

I'm working on an app that requires asynchronous loading before my main screen shows up. It initializes some provider classes, thus instead of initializing in main() and using the native splash screen (which I could not get the BuildContext required for provider), I decided to create my own splash screen as a widget.

This approach worked fine until I added a logo using Image.asset().

The image was loading too slowly, often slower than my original initialization, which means that my splash screen stays blank.

Just for reference, this is my splash screen layout:

Container(
  alignment: Alignment.center,
  color: Theme.of(context).scaffoldBackgroundColor,
  child: Center(
    child: Image.asset("logo.png"),
  )
);

I came across the function precacheImage(), but this also requires BuildContext, thus couldn't be used before the splash screen is shown.

Is there any better approach to this? Thanks in advance.

Upvotes: 1

Views: 3301

Answers (3)

JonnyH
JonnyH

Reputation: 368

My splash screen build is similar. What is the file size of your logo?

Update: My logo is 512x512 and 32k.

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        key: UniqueKey(),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                  decoration: null,
                  margin: EdgeInsets.symmetric(horizontal: _margin),
                  child: Image.asset("assets/meds.png"),
              ),
              SizedBox(
                height: 10,
              ),
              SpinKitDoubleBounce(
                color: Theme.of(context).primaryColor,
              ),
            ],
          ),
        ),
      ),
    );
  }

Upvotes: 1

E. Sun
E. Sun

Reputation: 1344

There's always a delay between the app start and the flutter first paint, you will get better performance by implementing a splash screen natively.

https://android.jlelse.eu/launch-screen-in-android-the-right-way-aca7e8c31f52

Upvotes: 0

galloper
galloper

Reputation: 941

I'll skip the obvious solutions like reducing the size of image.. Are you sure you're using precacheImage in the right place?

Correct usage would be like this:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    precacheImage(AssetImage("assets/images/logo.png"), context);
    return MaterialApp(
      title: 'MyApp',
      theme: myTheme,
      home: MySplashScreen(),
    );
  }
}

And in the MySplashScreen just do this:

ImageProvider logo = AssetImage("assets/images/logo.png");

Also, it may sound weird, but if you don't see improvement, try to use jpg instead of png.

P.S. and if you run it in debug mode it can be slow cuz of how Flutter is handled in this mode, production is many times faster, try it on real device with flutter run --release

Upvotes: 1

Related Questions