Route Mobile Diploma

Task Two : Facebook App

Splash Screen Login Screen Home Screen

What is a Native Splash Screen?

Facebook Rounded Logo as Assets Image
Goal: Create a polished, user-friendly mobile application that allows users to seamlessly Unlike the Flutter framework's splash screen, which is part of the Circular Avatar Title Of Input Text Field
explore and interact with a social media platform. The app should include essential app's UI, a native splash screen is a platform-specific component Email Text From Field For Email Input
Screen App Bar
That Hold The Without any outer
functionalities like login, news feed browsing, and post interactions. The design focuses It Should Take input from user with the format
User Image decorations Images Icon
that's displayed before the Flutter framework initializes. This means App Bar Title This is an image of Facebook Name
on
it's rendered directly by the device's operating system, providing a
-> [email protected]

Enhancing Usability: Build an intuitive interface that offers smooth navigation and and if User entered Invalid Email it will Show error

easy access to key features for users of all experience levels more seamless and native-like experience.

on user Interactions App Bar Actions With Three
Boosting Engagement: Prioritize engagement elements by displaying stories, posts, Icon buttons
and interaction options (like, comment, share) in an accessible and appealing manner Why Use a Native Splash Screen

Strengthening Brand Identity: Integrate brand elements such as logos and color Faster Perceived Load Times : By displaying a visually appealing
schemes to reinforce brand recognition and consistency across screens splash screen immediately, you can mask the initial loading time
And When User Enter Invalid Email it will Show
Streamlining User Flow: Develop a seamless login experience and a structured home of your Flutter app, making it feel more responsive
error like this
feed to guide users naturally from signing in to interacting with content.

Consistent Branding: A native splash screen allows you to

establish your app's brand identity right from the start, with
UI Screens Overview consistent colors, logos, and typography
Splash Screen: A simple introductory screen that features the platform’s logo A Material Design primary tab bar.

Platform-Specific Customization: You can tailor the splash

prominently, creating a smooth initial experience and transitioning users into the app Primary tabs are placed at the top of the content
screen's appearance and behavior to match the specific
Login Screen: A user-friendly login page with fields for email/phone number and pane under a top app bar. They display the main
guidelines and conventions of each platform (iOS and Android).

content destinations.

password, along with options for password recovery and account creation. This Horizontal List View With Height 220 This list view have two type of objects

Password Text From Field To Take User Password

Typically created as the AppBar.bottom part of
screen prioritizes ease of access and clarity
Home Screen: A comprehensive feed displaying stories at the top, followed by user Logo The flutter_native_splash Package

To simplify the process of creating and configuring native splash

And Validate on The Password if it’s a valid an AppBar and in conjunction with a TabBarView.
one for create story and another for view story

posts. The layout includes a header with the platform’s name and icons for primary password if it’s not it will show message to user
navigation, along with interactive options (like, comment, share) on each post to screens in Flutter, the flutter_native_splash package is a popular invalid , the valid password should contain
enhance user engagement.

choice. It automates the generation of platform-specific code, uppercase letters , lowercase letters , numbers
making it easy to customize the splash screen's appearance and and special Characters
behavior.

 Profile Image More Icon with
This layout can be implemented in Flutter, Android XML Views, or Jetpack Compose by
Color Black
adapting the components and styles to the respective framework while maintaining a
consistent user experience. Key Features of flutter_native_splash This Is a text button but in this Ui
Easy Configuration: You can customize the splash screen's
there is no functionality it will have
When User Input the text should be hidden
background color, image, and other properties through a simple
configuration file This Login Button is Elevated Button that when user Press it User Account Name and The date
Colors Automatic Code Generation: The package generates the
Check if the Email And password is valid it will navigate to published of the post with the icon of
Branding Image necessary native code for both iOS and Android platforms
Dark Mode Support: You can configure the splash screen to
Home Screen Otherwise it will Ignore the click and show That
fields is invalid When User Press on Suffix Icon Password Will be
world
Blue #1877F2 White : #FFFFFF G ray : #898F9C Black : #242527 Visible
adapt to the device's dark mode settings this elevated button has white background and Create Story Widget
Full-Screen Support: The splash screen can be configured to fill
blue border and has no functionality in this ui

the entire screen Post Image

Platform-Specific Options: You can fine-tune the splash
Screen Layout When User Enter Invalid Password
screen's behavior for each platform.
Screen Background Text Sizes 3 User Image

Set a White background (#FFFFFF) Title Large -> 24 , Font weight bold , Color Black

The Screen Have Padding of 16 in Title Me dium -> 16 , Font weight bold , Color Black Add Rounded Button
horizontal axis

Body Large -> 16 , Font weight regular , Color Gray Description
1
The screen displays a Facebook login page. It consists of the following layers:
Create Story Text
Layer One: A full-screen background image with a dark blue gradient.

Buttons Te xt Field Layer Two: Overlaid on the background, a white rectangular box occupies the majority of the screen. Within this box, we
find
The Facebook logo at the top
Input fields for "Mobile Number or Email Address" and "Password" with a visibility toggle for the password
Elevated Button Te xt Form Fiel A blue button labeled "Login" Share and User Image
Like and Like Comments and Book Mark
A link below the button to "Forgotten Password?".
Share Image
Background Color : Blue (#1877F2) Color : White (#FFFFFF) Image Comment Image
Layer Three: At the very bottom of the screen, there's a white button titled "Create Account".

Fill

Foreground Color : White (#FFFFFF Hint Style : Gray (#898F9C) , Font Size : 16
Font Size : 20 Font Size : 16 Functionality Story Image
Font Weight : Regula Font Weight : Regula

Text Align : Cente Border Radius : 1 Users can enter their credentials in the respective fields
Overlay Color : Transparent Border Side : Width (2) , Color Gray (#898F9C Tapping the "Login" button initiates the login process
Border Radius : 1 Padding : 1 The "Forgotten Password?" link leads to a password recovery page
Padding : 16 Error Border : Width (2) , Color Red (#EE403D
Cursor Color : Blue Clicking the "Create Account" button navigates to a registration screen.