Before we start, please read about how flutter web and how to set it up from the articles below:
Flutter for web developers
Learn how to apply Web developer knowledge when building Flutter apps.
Check the full code in the repo:
A Simple Login page made with flutter web. Contribute to JideGuru/LoginPage development by creating an account on…
Before we start building the web page, lets create a new flutter web project then start coding.
We will go through these steps to develop our page.
- Add MaterialIcons to our assets.
- Create our page.
Add MaterialIcons to our assets.
We need to add MaterialIcons font file to our project in order to display Material Icons in our website. First we need to download the file from this link. After downloading, we need to navigate to the “web” folder in the root of our project and create a new folder called “assets”. We copy and paste our font file into our “assets” folder then also create a new file called FontManifest.json. Copy and paste the code below in our FontManifest json file:
So our assets folder should look something like this
Create our page
Everything we want to create will be done in the “lib” folder. So we have to open the main.dart file thats located in the “lib” folder which contains the default counter app. we also need to create a new file and name it home.dart. Now we have to make it the home of the MaterialApp() in main.dart as shown below:
Now that the main.dart is done, we can focus on the home.dart file. We need to create a StatelessWidget and create our page inside it.
To create our page inside the Widget, we need a Scaffold and inside the scaffold body, we need a Padding that will contain the Card that is holding the form. In the form, i had to create custom widgets as the standard widgets alone cant fully give us the result we require. The Custom widget includes
- InputField: This is the Widget for the blue-ish TextFields.
- Gender: This widget holds up the two gender types as shown in the Screenshot
- Membership: It holds up both the label and icon for each membership type
This Custom widgets were create in separate file so as not to “dirty” the code. So lets create our widgets.
InputField contains a Text, decorated Container and TextField. The Container is decorated to apply color to the TextField and the Text is for Label. Code below.
The Gender widget actually contains the widgets for both genders. Each widget has a CircleAvatar and a Text. In which the Icon is in the CircleAvatar.
The Membership Widget is very very similar to the Gender Widget.
Now that we have created our widgets. we can now add the to the Home page.
Full code below.
I hope the article was helpful. If you find it helpful you can clap and star the repo, but if you feel something is wrong you can express yourself in the comment section. Thank you.