The splash screen is the splash screen that appears when the program starts. It usually includes a logo, the name of the app, or some other feature. The purpose of the screenshot is to give the user something to look at while the app is loading and to provide a smooth and seamless experience.
The primary purpose of a Splash Screen is to reinforce brand identity by displaying the logo, name, and other branding elements. It indicates that the app is loading in the background, especially if there is an initial setup or loading process that takes a few seconds.
Add Splash Screen Assets
assets:
- assets/images/logo-big.pngImplement the Splash Screen in Flutter
Create Splash Screen Widget:
Create a new widget for the splash screen in lib/splash_screen.dart.
import 'package:flutter/material.dart';
class SplashScreen extends StatefulWidget {
@override
_SplashScreenState createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
@override
void initState() {
super.initState();
_navigateToHome();
}
_navigateToHome() async {
await Future.delayed(Duration(seconds: 3), () {});
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => HomeScreen()),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Image.asset('assets/splash_screen_logo.png'),
),
);
}
}
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home Screen'),
),
body: Center(
child: Text('Welcome to Home Screen!'),
),
);
}
}
Update Main Dart File: Update the lib/main.dart to include the splash screen as the initial screen.
import 'package:flutter/material.dart';
import 'splash_screen.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Splash Screen Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: SplashScreen(),
);
}
}
With this screensaver applied, the sky is the limit to showing animations or widgets to the user for a better experience. However, if you want to learn more about how to take screenshots natively, you can head over to Flutter’s official documentation.
Moreover, there is always a package for everything. For splash screen, check out the awesome Flutter_native_splash package.
