Here is how you can incorporate a splash screen for 2 seconds in Flutter that is native to the platform:
Create an assets folder and add an image of your choice for the splash screen, preferably a PNG image.
In your pubspec.yaml file, add the following lines of code to load the image:
assets:
- assets/splash.png
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'dart:async';
class SplashScreen extends StatefulWidget {
@override
_SplashScreenState createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
@override
void initState() {
super.initState();
Timer(Duration(seconds: 2), () => Navigator.pushReplacement(
context, MaterialPageRoute(builder: (context) => HomePage())));
}
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
statusBarBrightness: Brightness.light,
statusBarIconBrightness: Brightness.light,
systemNavigationBarColor: Colors.white,
systemNavigationBarIconBrightness: Brightness.dark
));
return Scaffold(
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/splash.png"),
fit: BoxFit.cover
)
),
),
);
}
}
In the initState() method, we define a delay of 2 seconds using the Timer object, and use the Navigator.pushReplacement() method to navigate to the HomePage() of our app.
In the build() method, we use the SystemChrome class to customize the status bar and navigation bar of our app. We then use a Container widget to display the splash screen image.
Finally, in your main() method, replace the default MyApp() widget with SplashScreen() as follows:
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: SplashScreen(),
));
}
Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss
Asked: 2022-11-08 11:00:00 +0000
Seen: 8 times
Last updated: Sep 15 '22
In the Dart language, what is the function of the "as" keyword?
In a new Flutter project on Android Studio, is it possible to not have any libs or main.dart file?
How can Google calendar events be generated on the server-side using Flutter?
How can I retrieve an SVG image from a URL in Flutter?
How can I combine streams of different types in Dartlang using rxdart?
What are the steps to disable FlutterFire configuration?
How can zooming similar to desktop be achieved in HTML webview browser using Flutter?
How to imitate Http Client calls during flutter testing?
What is the process of invoking a Cloud Function in Firebase through Flutter?