Create A Splash Screen In Flutter In Under 10 Minutes

Introduction:

A splash screen is the welcome mat of your mobile app, making a powerful first impression on users. In Flutter, designing an appealing and efficient splash screen is a breeze. In this tutorial, we will walk you through the process of creating a Flutter splash screen that not only enhances the user experience but also keeps your audience engaged from the moment they open your app.

Splash Screen In Flutter

Prerequisites:

Before we dive into creating the splash screen, ensure you have the following prerequisites in place:

  • A working Flutter development environment.
  • A Flutter project ready for customization.

Step 1: Add the flutter_launcher_icons

Open your Flutter project’s pubspec.yaml file and add the flutter_launcher_icons package as a dependency. Ensure that you’ve added the package under the dev_dependencies section, as you’ll use it only during development to generate icons. Here’s an example:

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_launcher_icons: ^0.9.0  # Use the latest version from pub.dev

Remember to replace ^0.9.0 with the latest version available on pub.dev.

Step 2: Add Assets to Your Project

Once your splash screen is designed, add it as an asset to your Flutter project. To do this, follow these steps:

  1. Create a folder named assets in your project’s root directory.
  2. Place your splash screen image in the assets folder.
  3. Open the pubspec.yaml file and add the following code to specify the asset:
flutter:
  assets:
    - assets/splash.png

Replace assets/splash.png with the path to your splash screen image.

Step 3: Implement the Splash Screen

Now, let’s create a Flutter widget that will display the splash screen. We’ll use the MaterialApp widget and the home property to set our splash screen. This ensures that the splash screen is the first thing users see when they open your app.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SplashScreen(),
    );
  }
}

class SplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Image.asset('assets/splash.png'), // Replace with your image path
      ),
    );
  }
}

Step 4: Set a Timer

You can make your splash screen appear for a specific duration and then navigate to your app’s main screen. To do this, use the Future.delayed function.

import 'package:flutter/material.dart';
import 'dart:async';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SplashScreen(),
    );
  }
}

class SplashScreen extends StatelessWidget {
  @override
  void initState() {
    super.initState();
    Timer(
      Duration(seconds: 2), // Set the duration you want
      () => Navigator.of(context).pushReplacement(MaterialPageRoute(
        builder: (context) => MainScreen(),
      )),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Image.asset('assets/splash.png'), // Replace with your image path
      ),
    );
  }
}

Conclusion

Creating a captivating splash screen in Flutter is not only a delightful visual experience for users but also a chance to leave a lasting impression. By following the steps outlined in this tutorial, you can design and implement an eye-catching splash screen for your Flutter app, ensuring that users are engaged from the moment they launch your application.

Remember, a well-designed splash screen can significantly enhance the overall user experience and set the tone for the rest of your app.

Related Posts