Splash screens are essential for mobile apps, offering a smooth transition when the user launches the app. They can also serve as a branding opportunity, displaying the logo or key elements while the app loads. One way to enhance the user experience is by adding a slide splash screen, which creates a dynamic and visually appealing effect as the screen changes to the main content.
In this blog, we’ll walk through how to create a slide splash screen in Flutter. You’ll learn both the design and coding aspects to bring this feature to life.
What Is a Slide Splash Screen?
A slide splash screen is a visual transition where elements on the splash screen smoothly move or slide into view, either horizontally or vertically, before the screen changes to the main content. It’s an engaging animation that adds a professional touch to the app experience.
Setting Up Your Flutter Environment
Before we dive into creating the slide splash screen, make sure your Flutter environment is set up:
- Install Flutter SDK: You need to have Flutter installed on your machine. If you haven’t done this yet, follow the official Flutter installation guide to get started.
- Create a New Project: Open your terminal or command prompt and create a new Flutter project:
flutter create slide_splash_screen3. Open the Project: Navigate to the newly created project and open it in your favorite code editor like Visual Studio Code:
cd slide_splash_screen
code .Step 1: Designing the Splash Screen
The first step is designing the UI of the splash screen. Let’s say we want a screen where the app’s logo and title slide in from the sides. We’ll create a simple UI with a centered logo and text that slides in.
UI Code
Here’s the basic design of the splash screen:
import 'package:flutter/material.dart';
class SplashScreen extends StatefulWidget {
@override
_SplashScreenState createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<Offset> _animation;
@override
void initState() {
super.initState();
// Initializing the animation controller
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 2), // Duration of the animation
);
// Defining the sliding animation
_animation = Tween<Offset>(begin: Offset(1.0, 0.0), end: Offset(0.0, 0.0)).animate(CurvedAnimation(
parent: _controller,
curve: Curves.easeInOut,
));
// Starting the animation
_controller.forward();
// Navigate to the next screen after the animation completes
Future.delayed(Duration(seconds: 3), () {
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => HomeScreen()),
);
});
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: SlideTransition(
position: _animation,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset('assets/logo.png', width: 150, height: 150),
SizedBox(height: 20),
Text(
"Welcome to MyApp",
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.blueAccent,
),
),
],
),
),
),
);
}
}Key Points in the Code
- AnimationController: This controls the animation and specifies the duration.
- Tween: A tween (short for “in-between”) defines the animation’s start and end points. In this case, we are defining the slide starting from
Offset(1.0, 0.0)(from the right side of the screen) toOffset(0.0, 0.0)(centered on the screen). - SlideTransition: This widget applies the sliding effect to the child elements (in this case, the logo and text).
- Navigator.pushReplacement: This is used to move to the next screen after the splash animation completes.
Step 2: Creating the Home Screen
After the splash screen animation completes, we need to transition to the main app screen. Let’s create a simple home screen that the app navigates to after the splash animation.
import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home'),
),
body: Center(
child: Text(
'This is the Home Screen!',
style: TextStyle(fontSize: 24),
),
),
);
}
}In this example, the home screen is basic, but you can customize it with your app’s content and design.
Step 3: Adding Assets (Logo)
For the logo to appear on the splash screen, you’ll need to add the image file to your project. Here’s how to do that:
- Add the Image: Place your logo image in the
assetsfolder of your project (create this folder if it doesn’t exist yet). - Update
pubspec.yaml: Open yourpubspec.yamlfile and add the path to the assets:
flutter:
assets:
- assets/logo.png3. Run flutter pub get: This command ensures that the assets are available for use in the project.
Step 4: Customizing the Animation
You can modify the splash screen animation by tweaking the following parameters:
- Duration: Change the animation speed by modifying the
Durationin theAnimationController. A shorter duration results in a faster slide. - Animation Type: The curve type, such as
Curves.easeInOut, defines how the animation progresses. You can experiment with other curve types (e.g.,Curves.linear,Curves.bounceIn). - Direction: Modify the
Tween‘s start and end points to change the sliding direction. For example, you can make the logo slide in from the top by setting thebeginvalue toOffset(0.0, -1.0).
Step 5: Running the App
Finally, run the app using the following command:
flutter runOnce the app runs, you’ll see the splash screen animation with the logo sliding in and transitioning to the home screen.
Conclusion
Creating a slide splash screen in Flutter is a relatively simple but powerful way to make your app stand out. By leveraging Flutter’s built-in AnimationController and SlideTransition widgets, you can easily create visually appealing transitions that improve the user experience. This guide provides a starting point, but you can further enhance your splash screen by adding more complex animations, interactive elements, or branding components.
