This is a flutter demo for a login screen that can be adapted for any app as required.
There is space left on the top where a logo could come if needed or perhaps another design element.
A pleasing and neutral gradient has been used for the background to give a clean and modern look.
To make a unique design, a double card stack was used on top of the background for the other elements on the page.
Simple alternate rounded corners, minimal colors and clear typography make this design come alive.
Poppins Font has been used on this page with different weights and sizes giving a better hierarchy.
The word 'Login' has been given the biggest font size to lay emphasis on the purpose of this page.
The words 'Username' and 'Password' have the next biggest size and medium weight to pull the users’ attention to them.
Buttons like 'Forgot Password' and 'Remember Me' use a smaller font size but medium weight to show more importance than the input field text options which use a small font size and regular weight.
The word 'Login' has been given a white color as it already draws attention to its purpose with its font size and weight. White maintains its prominence without making the word attack your senses.
The words 'Username' and 'Password' have been given the color black to pull more attention to themselves.
The words 'Forgot Password' and 'Remember Me' have given a green color to show that they are buttons and once clicked, an action will take place.
The buttons have been given a unique shape to add some fun to the page. The 'Sign In' button and the 'Google' and 'Apple' account login buttons also use green to show that they are clickable.
Design by Vasundhara Sharma
Implement in flutter by Adi Sirohi
Device Mockup created using this open source mock up file.