In this very first Google Flutter blog I am going to build above login screen,
UI inspiration taken from https://uplabs.com
To make a generic component we have to identify the common components in the screen. If we take a closer look at screen, UI itself explaining two input (username, password) and two button (‘Login with Facebook’ and ‘Login’) are having similar UI.
Now you and me going to create above two components (Input and Button).
To create input component I have to extended the StatelessWidget or StatefulWidget. I choose to extend StatelessWidget because I do not need to maintain any state into this component. Input component constructor takes two parameters to get Placeholder and Input type values.
Button component is very similar to input component. it took color, borderRadius and label as a constructor parameters.
If you are not going to provide label value in constructor it will display “My Button” as a button label.
To create a vertical space between the component I have created VGap component.
Following are the full source code of Login page.
If you still wanted to see full source code of this page.
Please visit this link https://github.com/santoshanand/unsplash
Stay tune for more blogs!