Build Your Own Google Search with Flutter for Web

Build Your Own Google Search with Flutter for Web

In this post, you'll learn how to build your own Google Search with Flutter for web

Originally published by Promise Nzubechi Amadi at https://medium.com

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 the 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” file

import 'package:flutter_web/material.dart';
import 'footerOptions.dart';
import 'googleMenuOptions.dart';
import 'googleSearch.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget { // This widget is the root of your application.

@override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: MyHomePage(), theme: ThemeData( primaryColor: Colors.black, ), title: 'Google', ); } }

class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); }

class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, body: Column( children: [ //A Flexible widget controls how a child of a Row, Column, or Flex flexes.

        //I gave

        Flexible(
          flex: 1,
          child: GoogleMenuOptions(),
        ),
        Flexible(
          flex: 8,
          child: GoogleSearch(),
        ),
        Flexible(
          flex: 1,
          child: FooterOptions(),
        ),
      ],
    ));

} }

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

import 'package:flutter_web/material.dart';

class GoogleMenuOptions extends StatelessWidget { @override Widget build(BuildContext context) { return Container( child: Padding( padding: const EdgeInsets.only(top: 8.0, right: 8.0), child: Row( mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[ Text( "Gmail", style: TextStyle( fontSize: 15, fontWeight: FontWeight.w300, fontFamily: 'arial'), ), Padding( padding: const EdgeInsets.all(8.0), child: Text("Images", style: TextStyle( fontSize: 15, fontWeight: FontWeight.w300, fontFamily: 'arial')), ), Padding( padding: const EdgeInsets.all(8.0), child: Image.asset( 'images/menu1.png', fit: BoxFit.cover, height: 20, width: 20, ), ), Container( margin: EdgeInsets.only(left: 10, right: 10, top: 13, bottom: 13), child: RaisedButton( elevation: 0.0, color: Colors.blueAccent, onPressed: () {}, child: Text( 'Sign in', style: TextStyle( fontFamily: 'arial', color: Colors.white, fontSize: 15, fontWeight: FontWeight.w500), ), ), ) ], ), ), ); } }

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.

import 'package:flutter_web/material.dart';

class GoogleSearch extends StatelessWidget { @override Widget build(BuildContext context) { return Container( child: Container( child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Flexible( child: Image.asset( 'images/google.png', height: 100, ), ), SizedBox( height: 20, ), Flexible( child: Container( width: 500, decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(24.0), boxShadow: [ BoxShadow( color: Colors.black.withOpacity(0.2), offset: Offset(0.0, 0.5), blurRadius: 5.0, spreadRadius: 0.3, ) ], ), child: Padding( padding: const EdgeInsets.only(left: 8.0), child: TextField( cursorColor: Theme.of(context).primaryColor, decoration: InputDecoration( border: InputBorder.none, contentPadding: const EdgeInsets.symmetric( horizontal: 12.0, vertical: 13.0), ), maxLines: 1, ), ), ), ), SizedBox( height: 20, ), Flexible( child: Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Padding( padding: const EdgeInsets.only(right: 12.0, top: 10), child: RaisedButton( elevation: 0.0, color: Colors.black38.withOpacity(0.1), onPressed: () {}, child: Text( "Google Search", style: TextStyle( fontSize: 15.0, color: Colors.black54, fontFamily: 'arial'), ), ), ), Padding( padding: const EdgeInsets.only(left: 12.0, top: 10), child: RaisedButton( elevation: 0.0, color: Colors.black26.withOpacity(0.1), onPressed: () {}, child: Text( "I'm Feeling Lucky", style: TextStyle( fontWeight: FontWeight.w200, fontSize: 15.0, color: Colors.black54, fontFamily: 'arial'), ), ), ) ], )), Flexible( child: Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Padding( padding: const EdgeInsets.only(top: 20.0), child: Text("Google offered in:", style: TextStyle( color: Colors.black, fontSize: 13.0, fontFamily: 'arial')), ), Padding( padding: const EdgeInsets.only(left: 8.0, top: 20.0), child: Text("Hausa", style: TextStyle( color: Colors.indigo, fontSize: 15.0, fontFamily: 'arial')), ), Padding( padding: const EdgeInsets.only( left: 8.0, top: 20.0, ), child: Text("Igbo", style: TextStyle( color: Colors.indigo, fontSize: 15.0, fontFamily: 'arial')), ), Padding( padding: const EdgeInsets.only(left: 8.0, top: 20.0), child: Text("Èdè Yorùbá", style: TextStyle( color: Colors.indigo, fontSize: 15.0, fontFamily: 'arial')), ), Padding( padding: const EdgeInsets.only(left: 8.0, top: 20.0), child: Text( "Nigerian Pidgin", style: TextStyle( color: Colors.indigo, fontSize: 15.0, fontFamily: 'arial'), ), ), ], )) ], ), ), )); } }

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.

import 'package:flutter_web/material.dart';

class FooterOptions extends StatelessWidget { @override Widget build(BuildContext context) { return Container( decoration: BoxDecoration( border: Border.all(color: Colors.black26, width: 0.1), color: Colors.black.withOpacity(0.05), ), child: Column( mainAxisAlignment: MainAxisAlignment.start, children: [ Flexible( child: Container( child: Row( mainAxisAlignment: MainAxisAlignment.start, children: [ Padding( padding: const EdgeInsets.only( left: 20.0, top: 8, ), child: Text( 'Nigeria', style: TextStyle(fontSize: 15, fontFamily: 'arial'), ), ), ], ), ), ), Divider( color: Colors.black.withOpacity(0.1), ), Flexible( child: Padding( padding: const EdgeInsets.only( left: 20.0, ), child: Container( child: Row( mainAxisAlignment: MainAxisAlignment.start, children: [ Container( child: Text( 'Advertising', style: TextStyle(fontSize: 15, fontFamily: 'arial'), ), ), Container( margin: EdgeInsets.only(left: 15), child: Text( 'Business', style: TextStyle(fontSize: 15, fontFamily: 'arial'), ), ), Container( margin: EdgeInsets.only(left: 15), child: Text( 'About', style: TextStyle(fontSize: 15, fontFamily: 'arial'), ), ), Container( margin: EdgeInsets.only(left: 15), child: Text( 'How Search works', style: TextStyle(fontSize: 15, fontFamily: 'arial'), ), ), Container( margin: EdgeInsets.only(left: 15), child: Text( 'Privacy', style: TextStyle(fontSize: 15, fontFamily: 'arial'), ), ), Container( margin: EdgeInsets.only(left: 15), child: Text( 'Terms', style: TextStyle(fontSize: 15, fontFamily: 'arial'), ), ), Container( margin: EdgeInsets.only(left: 15, right: 15), child: Text( 'Settings', style: TextStyle(fontSize: 15, fontFamily: 'arial'), ), ), ]..insert(4, const Spacer()), ), ), ), ), ], ), ); } }

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

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

Thanks for reading

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading

Learn Flutter & Dart to Build iOS & Android Apps

Flutter & Dart - The Complete Flutter App Development Course

Dart and Flutter: The Complete Developer’s Guide

Flutter - Advanced Course

Flutter Tutorial - Flight List UI Example In Flutter

Flutter Tutorial for Beginners - Full Tutorial

Using Go Library in Flutter

A Beginners Guide to the Flutter Bottom Sheet

Flutter Course - Full Tutorial for Beginners (Build iOS and Android Apps)

Flutter Tutorial For Beginners - Build Your First Flutter App

Building the SwiftUI Sample App in Flutter

Building Cryptocurrency Pricing App with Flutter

Build a CRUD app using Firebase and Flutter (Provider)

Build Firestore Todo App in flutter using “flutter_bloc”

flutter mobile-apps web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How long does it take to develop/build an app?

This article covers A-Z about the mobile and web app development process and answers your question on how long does it take to develop/build an app.

Top Mobile App Developers & Leading App Development Companies in UK

Profusely examined top Mobile App Development companies in UK with ratings & reviews to help find the best Mobile App Development solution providers.

Mobile App Development North Carolina

Mobile App Development North Carolina In the era of globalization, technology has forced the businesses and industries to jump into the space of competition. Technology has both tangible and intangible benefits that help businesses from different ind...

Top 7 Mobile App Development Companies in Delhi NCR

Looking for a Mobile app development company in Delhi NCR? Here it a list of top mobile app development companies in Delhi for Android & iOS app Development.

ECommerce Mobile App Development | Ecommerce Mobile App Development Services

We are leading ecommerce mobile application development company. Hire our ecommerce mobile app developer for your custom Ecommerce project at competitive rates. **Know about [Top ECommerce Mobile App Development...