A simple Flutter application that displays a purple-themed splash screen with a fade-in animation before transitioning to the main app page.
- Smooth fade-in animation using AnimationController and FadeTransition
- Customizable splash duration
- Minimal and elegant purple UI
- Automatic navigation to the main page after the splash screen
- Entry point of the application
- Launches the app with PurpleSplashScreen as the home screen
- Implements the animated splash screen
- Displays an icon and text that fade in smoothly
- Navigates to a placeholder main screen (PlaceholderNextScreen) after 3 seconds
- Background Color: Deep Purple (Colors.deepPurple)
- Icon: Icons.sunny (white)
- Text: "Helloooo" in bold white font
- Next Screen: Displays “welcome” text with a purple AppBar
- When the app starts, the splash screen fades in an icon and text.
- A Timer waits for 3 seconds.
- After that, it automatically navigates to the main page using Navigator.pushReplacement().
- Concepts Used
- StatefulWidget for managing animation and navigation
- AnimationController and Tween for fade-in effect
- CurvedAnimation for smooth transitions
- Timer from dart:async for controlling splash duration
- Navigator for screen navigation
- Flutter SDK (>=3.0.0)
- Dart (>=2.17.0)
- Compatible with Android, iOS, and Web
- Clone or download the project.
- Open it in VS Code or Android Studio.
- Run the following command in the terminal: flutter run
- The splash screen will appear, fade in, and navigate to the main screen.
- You can modify the following values inside PurpleSplashScreen:
- Splash duration → _splashDuration
- Background color → _brandPurpleColor
- Text content → _displayText
- Icon and color → inside the Icon() widget