The splash screen in Flutter is the first screen that is seen by a user when the application is launched.
Actually, this is the time when the application is organizing the resources which are needed to run the application.
Developers can customize the splash screen in various ways according to their requirements.
In this article, we will learn how we can display the splash screen.
You may also check our Flutter app development page.
Splash Screen in Flutter using Timer() function
Here is a piece of code that uses the timer() function to show the splash image til a given time interval.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
import 'dart:async'; import 'package:flutter/material.dart'; void main() { runApp(SplashScreenApp()); } class SplashScreenApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Splash Screen', theme: ThemeData( primarySwatch: Colors.blue, ), home: HomeView(), debugShowCheckedModeBanner: false, ); } } class HomeView extends StatefulWidget { @override _HomeViewState createState() => _HomeViewState(); } class _HomeViewState extends State<HomeView> { @override void initState() { super.initState(); Timer(Duration(seconds: 13), ()=>Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => OtherScreen() ) ) ); } @override Widget build(BuildContext context) { return Container( color: Colors.white, child:FlutterLogo(size:MediaQuery.of(context).size.height) ); } } class OtherScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title:Text("Splash Screen in Flutter")), body: Center( // your UI here ), ); } } |
So let’s discuss what’s happening here.
If you are aware of the basic Flutter code then main() function is the starting point of the application.
runApp(SplashScreenApp()) initializes the Stateless Widget SplashScreenApp.
You then return the title, theme, and home properties to MaterialApp.
MyHomePage() returns a Container that has a child as FlutterLogo(which will be shown initially when the app starts).
initState() first call super.initState() and then Timer of duration 13 seconds.
After 13 seconds, the current screen will be replaced by a new Screen i.e. OtherScreen().
Using splashscreen package
Add the dependency splashscreen to your pubspec.yaml file
Now import the package to your file as below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
import 'dart:async'; import 'package:flutter/material.dart'; import 'package:splashscreen/splashscreen.dart'; void main() { runApp(SplashScreenApp()); } class SplashScreenApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Splash Screen', theme: ThemeData( primarySwatch: Colors.green, ), home: HomeView(), debugShowCheckedModeBanner: false, ); } } class HomeView extends StatelessWidget { @override Widget build(BuildContext context) { return SplashScreen( seconds: 13, navigateAfterSeconds: new OtherScreen(), title: new Text('Mobikul',textScaleFactor: 2,), image: new Image.network('<your image URL here>'), loadingText: Text("Loading"), photoSize: 100.0, loaderColor: Colors.blue, ); } } class OtherScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title:Text("Splash Screen in Flutter")), body: Center( // your UI here ), ); } } |
In the above code, we are using the splashscreen package to display the splash image from the network.
After completing 13 seconds, it will navigate to a new screen.
Conclusion
Here is the expected result.
Be the first to comment.