Create Splash Screen Using Dart in Android Studio

Creating a splash screen in Dart using Android Studio is an essential part of app branding and user experience. A splash screen introduces your app to users while essential data loads in the background. In this guide, you’ll learn how to implement a clean and animated splash screen in a Flutter project using Dart language inside Android Studio.

Step 1: Setup Flutter Project in Android Studio

Start by creating a new Flutter project:

flutter create splash_screen_app

Open it in Android Studio.

Step 2: Edit main.dart

This is your entry point. We’ll use a delay to transition to the main screen.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Splash Demo',
      debugShowCheckedModeBanner: false,
      home: SplashScreen(),
    );
  }
}

Step 3: Create SplashScreen.dart

Add a splash screen that shows your logo and navigates to HomeScreen after a delay.

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

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    Timer(Duration(seconds: 3), () {
      Navigator.of(context).pushReplacement(
        MaterialPageRoute(builder: (_) => HomeScreen()),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueAccent,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(Icons.android, size: 100, color: Colors.white),
            SizedBox(height: 20),
            Text('Welcome', style: TextStyle(fontSize: 24, color: Colors.white)),
          ],
        ),
      ),
    );
  }
}

Step 4: Create HomeScreen.dart

This is the screen users will see after the splash screen.

// home_screen.dart
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')),
    );
  }
}

Step 5: Update pubspec.yaml

Make sure all screens are recognized and assets are added if needed.

Extra Tip

You can enhance your splash screen using the flutter_native_splash package for native splash compatibility.