How to Make Custom Splash Screen with Duration of Display in Flutter
Introduction
————
A splash screen is the first screen that appears when a user launches a mobile application. It is used to display the application’s logo, name, or any other relevant information while the application is loading. In this blog post, we will explore how to create a custom splash screen with a specific duration of display in a Flutter application.
Creating a Custom Splash Screen
To create a custom splash screen in Flutter, you can use the `SplashScreen` class from the `flutter` package. However, this class does not provide an option to set the duration of the splash screen. To overcome this limitation, you can use a `StatefulWidget` to create a custom splash screen with a specific duration of display.
Implementing the Custom Splash Screen
To implement the custom splash screen, you can use the following code:
“`dart
import ‘package:flutter/material.dart’;
class CustomSplashScreen extends StatefulWidget {
@override
CustomSplashScreenState createState() => CustomSplashScreenState();
}
class _CustomSplashScreenState extends State
@override
void initState() {
super.initState();
Future.delayed(Duration(seconds: 3), () {
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => HomePage()),
);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(‘assets/splash_screen.png’),
fit: BoxFit.cover,
),
),
child: Center(
child: Text(
‘My App’,
style: TextStyle(fontSize: 24, color: Colors.white),
),
),
),
);
}
}
“`
Setting the Duration of the Splash Screen
In the above code, the `Future.delayed` function is used to set the duration of the splash screen. The `Duration` class is used to specify the duration in seconds, milliseconds, or microseconds.
Navigating to the Home Page
After the splash screen has been displayed for the specified duration, the `Navigator.pushReplacement` function is used to navigate to the home page. The `MaterialPageRoute` class is used to create a material design transition between the splash screen and the home page.
Conclusion
———-
In this blog post, we have explored how to create a custom splash screen with a specific duration of display in a Flutter application. By using a `StatefulWidget` and the `Future.delayed` function, you can create a custom splash screen that displays your application’s logo or name for a specified duration before navigating to the home page.
FAQ
—-
1. Q: How do I set the duration of the splash screen in Flutter?
A: You can set the duration of the splash screen by using the `Future.delayed` function.
2. Q: Can I use the `SplashScreen` class to create a custom splash screen?
A: No, the `SplashScreen` class does not provide an option to set the duration of the splash screen.
3. Q: How do I navigate to the home page after the splash screen?
A: You can navigate to the home page by using the `Navigator.pushReplacement` function.
4. Q: Can I use a `StatelessWidget` to create a custom splash screen?
A: No, you should use a `StatefulWidget` to create a custom splash screen.
5. Q: How do I add an image to the splash screen?
A: You can add an image to the splash screen by using the `AssetImage` class and the `DecorationImage` class.
