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 Tutorial - Flight List UI Example In Flutter
☞ Flutter Tutorial for Beginners - Full Tutorial
☞ 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
