Building a Signup page with Flutter Web(Hummingbird)

Olusegun Festus Babajide
Jul 17 · 3 min read

TL;DR

Check the full code in the repo:

Getting started

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.

  1. Add MaterialIcons to our assets.
  2. 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

  1. InputField: This is the Widget for the blue-ish TextFields.
  2. Gender: This widget holds up the two gender types as shown in the Screenshot
  3. 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.


Final Notes

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.

Lets become friends on Twitter and Github

Olusegun Festus Babajide

Written by

17y.o FullStack Developer and Technical Writer. Flutter, Node.js, Android, iOS, Python.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade