Flutter Native Splash Screen Implementation within 5 mins

Flutter Knowledge Sharing #73

The splash screen is the first UI users experience in your mobile application. There have various designs and various usages of splash screens. Here I will share my knowledge on how to implement splash screens. You can customize this in your way. You can see many packages have to accomplish this task. But here I am showing you a native approach to implement a simple splash screen.

Add Dependency

Here I am introducing a Flutter package. That’s flutter_spinkit. It's a collection of loading indicators animated with flutter. So first, I add it to the pubspec.yaml.

flutter_spinkit: ^5.1.0

Create the Splash Screen Class

Then I implement the splash_screen.dart file as follows. In my case, the splash screen will route to the NextPage(Note page) after 5 seconds.

class SplashScreen extends StatefulWidget {
  const SplashScreen({Key? key}) : super(key: key);

  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    Timer(const Duration(seconds: 5), () =>…