Build Your Own Google Search with Flutter for web (In just 3 Simple Steps)

FooterOptions.png

It’s always a privilege to help you upgrade your skillset through my write-ups and tutelage.

Before the end of this writeup, you will learn how to build a Google Search User Interface (UI) using flutter.

Definition: Flutter for web

Flutter for web is a code-compatible implementation of Flutter that is rendered using standards-based web technologies. This includes: HTML, CSS and JavaScript.

With Flutter for web, you can compile existing Flutter code written in Dart into a client experience that can be embedded in the browser and deployed to any web server. You can use all the features of Flutter, and you don’t need a browser plug-in.

NOTE: For your easy comprehension, this writeup is divided into major three steps.

Step 1:

Create a text for: “Gmail”, “Images”, “Image for dashboard” and “A button for sign in ” (see image below)

Step 2:

Add an image for “Google ”, then an edit text for “Google Search; a button for “Google Search” and another for “I’m Feeling Lucky”.

Then add text for “Google offered in: Hausa Igbo Èdè Yorùbá Nigerian Pidgin”. (see image below).

Step 3:

Add text: “ Nigeria”, “ Privacy” “Terms” “Settings” “Advertising” “Business” “About” “How Search Works”. (See image below)

After completing the three-stages, your Google Search UI will look like the image below:

You‘re doing great already!!

Let’s continue.

You can create your Google Search UI using Visual Studio, IntelliJ or Android studio.

Open IntelliJ, click on File>>New>>New Project, Select Dart and choose “Flutter Web App - a simple Flutter Web app”.

Click on “Next

Enter the project name and click on “Finish

When you are done creating your project, Go to the “web folder” create a folder and name it “assets”.

Also, you should create another folder where your images will be kept. This folder will be named: “images”.

While building your Google search, you need two images; the first image is the image that looks like a dashboard and the second image is the Google image.

Add this code to your “main.dart”

Create a dart file and name it “googleMenuOptions.dart”. Add this code inside the dart file.

To test run your project, open “Terminal”

Add this code “flutter packages pub global run webdev serve” to your terminal and press enter.

After building your project, copy the URL: http://127.0.0.1:8080 and paste to your browser.

The website should look like this image below:

The next step is to create another dart file and the name it: “googleSearch.dart”.

Add this code inside the dart file you have created and re-run your project again.

The website will look like the image below:

The final step is to create a dart file and the name it: “footerOptions.dart”.

Add this code inside the dart file you have created and re-run your project again.

Congratulations!!! You have successfully built your Google Search UI.

P.S: Here is the source code for the project you just worked on.

If you found this article insightful and educating, please hit the press the like button and also share with your friends.

You can keep in touch with me via Facebook, Twitter, Linkedin, and GitHub.

My name is Promise Amadi. I am a writer and Flutter Developer. I work with startups across the globe to build mobile solutions using Flutter.

You can also check out these awesome writeups:

No Comments Yet