Hi, I hope you all are doing great. In this tutorial I'll be sharing the technique I use to make a quick and interactive splash screen in flutter.
Prerequisites
- Basic knowledge of flutter
- Basic knowledge of android
Overview
In some cases we want to add an interactive splash screen to our app to prompt the user for different states, such as no internet connection. But just creating a splash widget may not be as satisfactory because flutter takes some time to draw its first frame when the app is launched. So today we'll be combining flutter splash screen with native android splash to get a quick and interactive splash screen.
Let's Get Started
Flutter Side
1. Create a new flutter project and open it in an IDE of your choice.
2. Go to the pubspec.yaml file and specify the assets directory as following:
flutter:
# ... other properties here
assets:
- assets/images/
Also change the dart SDK version constraints to enable null safety:
environment:
sdk: ">=2.12.0 <3.0.0"
3. Create a folder assets
in the project root directory. And paste this image as "logo_flutter.png" in it.
4. Create a new dart file "splash_page.dart" in the "lib" folder and paste the following code in it:
import 'package:flutter/material.dart';
class SplashPage extends StatefulWidget {
@override
_SplashPageState createState() => _SplashPageState();
}
class _SplashPageState extends State<SplashPage> {
@override
void initState() {
WidgetsBinding.instance?.addPostFrameCallback((_) => _afterBuild(context));
super.initState();
}
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: Center(
child: Image.asset('assets/images/logo_flutter.png'),
),
);
}
void _afterBuild(BuildContext context) {
showModalBottomSheet(
context: context,
isDismissible: false,
enableDrag: false,
barrierColor: Colors.transparent,
backgroundColor: Colors.blue,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: const Radius.circular(25),
topRight: const Radius.circular(25),
)),
builder: (builderContext) {
return SizedBox(
height: 100,
child: Padding(
padding: EdgeInsets.all(16),
child: Center(
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.white,
onPrimary: Colors.blue,
),
onPressed: () => Navigator.pop(context),
child: Text('Dismiss'),
),
),
),
);
},
);
}
}
In the above code, we schedule our _afterBuild
method to be called after the build
method, inside the initState
callback. The _afterBuild
method will display a modal bottom sheet after the splash page has been drawn. Which can be dismissed by pressing the dismiss button.
5. Go to main.dart file and replace the existing code with following.
import 'package:flutter/material.dart';
import 'splash_page.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter App',
debugShowCheckedModeBanner: false,
home: SplashPage(),
);
}
}
The SplashPage
widget has been passed as the home
parameter, meaning flutter will show the SplashPage
when our app is launched.
Android Side
6. For the android side we will need to create resolution aware image assets for our splash logo. Open the Image Baker website in your browser. Drop the the "logo_flutter.png" image you downloaded earlier. The site will generate the assets for you. Go ahead and download them by clicking on the Android button.
7. Extract the folder somewhere and you will find several drawable folders inside the extracted folder. These folders tell android which asset to use for different density displays. Copy all the drawable folders and paste them inside the {your_project}/android/app/src/main/res
folder.
8. Now we need to tell android to use our newly added asset. Open the "launch_background.xml" file in the "res/drawable" folder and replace the contents with following:
<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@android:color/white" />
<item>
<bitmap
android:gravity="center"
android:src="@drawable/logo_flutter" />
</item>
</layer-list>
Make sure you are using the correct drawable resource name. Flutter creates a drawable-v21 variant by default for "launch_background.xml". If you don't need it for anything else delete the drawable-v21 folder or the "launch_background.xml" in it.
9. Now that we have added all the assets we need to make sure that the splash image size for our flutter splash and native android splash is the same. Open "logo_flutter.png" inside the res/drawable-xxxhdpi folder. Note the size of the image, we will need our flutter splash image to match the size of this image.
For xxxhdpi an image of 640px will be drawn as 1 inch on the device screen, while for flutter an image of 160 logical pixels will occupy 1 physical inch.
So we can calculate the size needed for flutter splash with the following equation:
h = (height of the xxxhdpi image) / 640 * 160
Where h
is the calculated height for the flutter splash image. Go to "splash_page.dart" and add the calculated height to the image.
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: Center(
child: Image.asset(
'assets/images/logo_flutter.png',
height: 168.94, // calculated height in my case
),
),
);
}
Conclusion
And that's it we're done. Go ahead and run the application to watch your custom splash screen in action! Now we can discuss the pros and cons of this approach.
Pros
You get an instantaneous splash screen that is visible the moment your app launches. The splash becomes interactive when the flutter splash widget is drawn.
Cons
There is a slight blink when flutter draws its first frame. The lag is unacceptably long in development mode but it turns to only a slight blink in release mode. You can try to further optimize your flutter splash image by using resolution aware image assets.
That concludes this tutorial. I have hosted an example project on GitHub for anyone who is interested. I can't wait to see your feedback in the comments below. I hope to see you folks next time with more interesting content.
Top comments (1)
that's awesome! I really like it! if you are interested in Flutter, then check this article - dev.to/pablonax/free-vs-paid-flutt...