To create a Beautiful Text Box with in Flutter
Hello Everyone Again, Today we will see how to create a simple yet beautiful Text Box in flutter. Text Box are very important as they are the basic element of input forms or any other type of form which are used to take data from user.
So lets start with our Coding part :-
Step 1 :- Start a new project in android studio. I am using android studio you can use any other IDE as per your need. If you don’t know how to setup flutter in android studio for iOS and android application development in flutter then you can refer following link :-
How to create Hello Flutter App for iOS and Android using Flutter and Android Studio
To start new project following the steps below :-
Step 1.1 :- Click on “Start a new Flutter project”
Step 1.2 :- Click on “Flutter Application” and then click next.
This is the screen you will see finally. You can go ahead and run code to see the output.
Step 2 :- Then comes the main part. Coding for Text Box.
First clear all the code, just keep the import statment
import 'package:flutter/material.dart';Then first create the main method with following code. This may show some error as currently we have not created the MyApp class.
void main() => runApp(new MyApp());Next create a class name MyApp with following code.
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
}
}Here we create a class name MyApp and then extend it with the StatelessWidget. Then as we have extended it with StatelessWidget then we need to Override the build method that returns a widget.
The next step is to code the Material App widget that we want. But first lets define a handy method that helps to convert Hexdecimal color code to Color object of Dart. Define this method in build function.
Color hexToColor(String code) {
return new Color(int.parse(code.substring(1, 7), radix: 16) + 0xFF000000);
}Then we create Material App as follows : -
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "Welcome to Flutter",
home: new Material(
child: new Text('Beautiful Flutter TextBox')
)
);We add a home element that will contain the widget that will be displayed on application start.
Now we will have to replace the code in home element with the code below.
new Material(
child: new Container (
padding: const EdgeInsets.all(30.0),
color: Colors.white,
child: new Container(
child: new Center(
child: new Column(
children : [
new Padding(padding: EdgeInsets.only(top: 140.0)),
new Text('Beautiful Flutter TextBox',
style: new TextStyle(color: hexToColor("#F2A03D"), fontSize: 25.0),),
new Padding(padding: EdgeInsets.only(top: 50.0)),
new TextFormField(
decoration: new InputDecoration(
labelText: "Enter Email",
fillColor: Colors.white,
border: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(25.0),
borderSide: new BorderSide(
),
),
//fillColor: Colors.green
),
validator: (val) {
if(val.length==0) {
return "Email cannot be empty";
}else{
return null;
}
},
keyboardType: TextInputType.emailAddress,
style: new TextStyle(
fontFamily: "Poppins",
),
),
]
)
),)
)
)
Ohhhhh So much code to read, but its actually easy. Lets see it part by part.
First we create a new Material. Then in its child element we create a Container that is used to get padding for the entire screen. Then in it we create another container which has a column as the child element so that it can contain multiple widget. In this Column we have Padding element so that we can clearly see the Text Box and Text. Then our Text and Text Box.
Now we will see the code in Text Box Widget :-
new TextFormField(
decoration: new InputDecoration(
labelText: "Enter Email",
fillColor: Colors.white,
border: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(25.0),
borderSide: new BorderSide(
),
),
//fillColor: Colors.green
),
validator: (val) {
if(val.length==0) {
return "Email cannot be empty";
}else{
return null;
}
},
keyboardType: TextInputType.emailAddress,
style: new TextStyle(
fontFamily: "Poppins",
),
),We first use the decoration property to create new InputDecoration. This Decoration provide a Label Text and Colour to fill in the Text Box. Then we use the boarder property and make a OutlineInputBorder with borderRadius as 25.0 and BorderSide. Then the validator is optional but it is good to have a validator and then the keyboardType which is also optional, used to specify the keyboard type used to provide inpute to Text Box and finally style for Text which specify the fontFamily as Poppins.
So finally we have completed our code. Now lets see the output.
Ohhh its look. So this ends our tutorial for this beautiful Text Box.
The Complete code is below :-
import 'package:flutter/material.dart';void main() => runApp(new MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
Color hexToColor(String code) {
return new Color(int.parse(code.substring(1, 7), radix: 16) + 0xFF000000);
}return MaterialApp(
debugShowCheckedModeBanner: false,
title: "Welcome to Flutter",
home: new Material(
child: new Container (
padding: const EdgeInsets.all(30.0),
color: Colors.white,
child: new Container(
child: new Center(
child: new Column(
children : [
new Padding(padding: EdgeInsets.only(top: 140.0)),
new Text('Beautiful Flutter TextBox',
style: new TextStyle(color: hexToColor("#F2A03D"), fontSize: 25.0),),
new Padding(padding: EdgeInsets.only(top: 50.0)),
new TextFormField(
decoration: new InputDecoration(
labelText: "Enter Email",
fillColor: Colors.white,
border: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(25.0),
borderSide: new BorderSide(
),
),
//fillColor: Colors.green
),
validator: (val) {
if(val.length==0) {
return "Email cannot be empty";
}else{
return null;
}
},
keyboardType: TextInputType.emailAddress,
style: new TextStyle(
fontFamily: "Poppins",
),
),
]
)
),)
)
)
);}
}
