4(a) . Flutter for Android Developer — Basic Widget (Building block)
Go to index to find out all the articles in this series.
In this article we will learn about few basic widget required to build any UI. Flutter has a ton of widget and it will be nightmare to try to remember all the widget and their properties at once therefore i am picking only most used and basic widget. We will learn advance widget later in the series while creating complex ui and clones.
In this article we will discuss about
- Text
- Padding
- Container
- Center
- TextField
- Image
- Icon
- Card
- Radio
- Opacity
- Column
- Row
- Button
- Wrap
- ListView
- PageView
- Divider
- Circular Progress Bar
Let’s start
Standard template which we will use throughout this exercise…
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool currentState = false;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: WillPopScope(
child: Scaffold(
appBar: AppBar(title: Text("Widget Basic"),),
body: getBody(),
),
),
);
}We will make change in getBody() function.
- Text
It is simply Android’s TextField equivalent in the Flutter. It show simple non — interactive text on the screen.
Widget getBody(){
return Text("Hello world");
}
Other Properties
Widget getBody(){
return Text("Hello world",style: TextStyle(
// text Color
color: Colors.white,
// backgound color
backgroundColor: Colors.black,
// font size
fontSize: 40.0,
// font weight (thickness) (bold/normal)
fontWeight: FontWeight.bold,
//font style (normal/italic)
fontStyle: FontStyle.italic,
// distance between two letter
letterSpacing: 5.0,
// distance between two word
wordSpacing: 10.0,
// decoration like underline , overline , lineThrough
// Please note that , this decoration is TextDecoration
// we have other decoration called InputDecoration.
// Both are different.
decoration: TextDecoration.lineThrough
),);
}
}
2. Padding
Padding is provided by “Padding” class in Flutter
Widget getBody(){
return Padding(
padding: const EdgeInsets.all(50.0),
child: Text("Hello world"),
);
}
Other way of providing padding. You can also omit const keywordpadding: const EdgeInsets.only(left: 5,right: 10,top: 20,bottom: 30),padding: const EdgeInsets.symmetric(horizontal: 10,vertical: 20),
3. Container
As the name suggest it act as house for another widget. It provide functionality like padding, margin, sizing. Container first respect parent layout constraint then its own after that it’s child. For example , if you place container directly inside scaffold , then container will occupy whole screen regardless of its size because scaffold wants its child to occupy full screen.
Widget getBody(){
return Container(
padding: const EdgeInsets.symmetric(horizontal: 10,vertical: 20),
child: Text("Hello world"),
);
}
Other Properties
you can use double.min to specify min size (wrap_content) and double.infinity to specify max size (match_parent)
Widget getBody(){
return Container(
//background color of the box
color: Colors.red,
// width and height
width: 100,
height: 100, // specify where child is attached in the container.
// similar to gravity and layout_gravity in android
alignment: Alignment.bottomLeft,
// margin
margin: const EdgeInsets.symmetric(horizontal: 50),
//padding
padding: const EdgeInsets.symmetric(horizontal: 10,vertical: 20),
//child
child: Text("Hello world"),
);
}
}
4. Center
This widget center align it’s child. It occupy all the space in the parent and then position its child in the center.
Widget getBody(){
return Center(
child: Text("Hello world"),
);
}
Other properties
Widget getBody(){
return Container(
color: Colors.red,
child: Center(
widthFactor: 2.0,
child: Text("Hello world"),
),
);
}widthFactor = 2.0 means center widget will be twice as its child. If widthFactor is null , then it will match parent as in previous example.
5. TextField
Android EditText is called TextField in android.
Widget getBody(){
return TextField(
);
}
Other Properties
Widget getBody(){
return Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
// this is input decoration not text decoration...
decoration: InputDecoration(
// floating text
labelText: "Lable Text",
//outline input border
border: OutlineInputBorder(borderRadius: BorderRadius.circular(10)),
// set it null for no error
errorText: "There is so more",
// show icon on the left
icon: Icon(Icons.search),
// icon on the right
suffixIcon: Icon(Icons.search),
// this accept a widget so it can be anything..
suffix: Icon(Icons.mic),
// padding between text text and border...
contentPadding: const EdgeInsets.all(10),
),
),
);
}
Widget getBody(){
return Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
// this is input decoration not text decoration...
// inputtype in android.. but it has more option
keyboardType: TextInputType.phone,
// capitalize in andorid..
textCapitalization: TextCapitalization.words,
// same as text style in Text widget
style: TextStyle(fontSize: 20.0),
// same as edittext gravity to align text input
textAlign: TextAlign.right,
// if true, soft keyword will open when widget is displayed
autofocus: false,
// equivalent to inputtype = password.. hide input with star character
obscureText: true,
// maximum lines , default is 1 , for no constraint specify null
maxLines: null,
// maximum no of character , same as length in android edittext
maxLength: 10,
// when it is clicked
onTap: (){// write your code here
},
onChanged: (String s){
// s is final string, write your code here..
},
onEditingComplete: (){},
),
);
}
Loved 6/10 text, in Android , i have to code this. Totally love this.
6. Image
Equivalent to imageview in flutter. Show image from asset, network
Showing image from assets involve 2 steps. I will cover it in another article.
Widget getBody() {
return Container(
color: Colors.red,
padding: const EdgeInsets.all(8.0),
child: Image.network(
"https://www.codemate.com/wp-content/uploads/2016/02/"
"flutter-logo-round.png",
),
);
}
Other properties
Widget getBody() {
return Container(
color: Colors.red,
width: 500,
height: 500,
padding: const EdgeInsets.all(8.0),
child: Image.network(
"https://www.codemate.com/wp-content/uploads/2016/02/"
"flutter-logo-round.png",
// width and height
width: 500,
height: 500,
// specify positon of image within itself,
// like gravity and layout_gravity
alignment: Alignment.bottomRight,
// repeat image , it is like repeat property in html also
repeat: ImageRepeat.repeat,
// there is also a header parameter, which you can pass
// if your image require auth..
),
);
}
While dealing with image , one parameter which is most commenly used is fit (scale type in flutter).
Image.network("https://www.codemate.com/wp-content/uploads/2016/02/"
"flutter-logo-round.png",
width: 100,height: 250,
fit: BoxFit.contain,
)BoxFit.contain : as large as possible while respecting both width and height.
BoxFit.cover : as small as possbile while respecting both width and height.
BoxFit.fill : fill the container even by destroying aspect ration
BoxFit.fitHeight : image height match the container height
BoxFit.fitWidth : image width match the container width
BoxFit.none : no scaling is applied
BoxFit.scaleDown : same as contain when container is small then image also none is applied
7. Icon
Non interactive widget
Widget getBody() {
return Icon(
Icons.phone,
size: 50,
color: Colors.blue,
);
}
8. Card
We all know Google loves material design and one of the main component of material design is cardview. Card widget has properties like elevation, shape which give real entity feel.
Widget getBody() {
return
Card(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Text("Hello world",),
),
);
}
Other Properties
Card also have margin,color,elevation,shape property.
9. Radio
Radio is like “Radio” in Android. This is a simple widget which let you select one from a group of options. Like what is your gender? For this , you have three options 1) Male 2) Female 3) Others. There is 99% chance that you belong to only one of this category. Radio help you to do this.
class _MyAppState extends State<MyApp> {
String groupValue = "";Add a string to which represent group value as the data member. This variable is used to show selected option. Radio having same value as group is selected.
Widget getBody() {
return Column(
children: <Widget>[
Text("What is your gender?" ,),
Row(
children: <Widget>[
Container(width:100 ,child: Text("Male")),
Radio(
value: "Male",
groupValue: groupValue,
onChanged: (s){ setState(() {
groupValue = s;
});},),
],
),
Row(
children: <Widget>[
Container( width : 100,child: Text("Female")),
Radio(value: "Female",
groupValue: groupValue,
onChanged: (s){ setState(() {
groupValue = s;
});},),
],
),
Row(
children: <Widget>[
Container(width:100,child: Text("Other")),
Radio(value: "Other",
groupValue: groupValue,
onChanged: (s){ setState(() {
groupValue = s;
});},),
],
)
],
);
}For now , don’t stuck in code. Just remember , column is used to show multiple child in vertical direction and row show multiple child in horizontal direction ( see childred : <Widget>[]) ( [] = list in dart).
So we have defined 3 radio button, each radio button is controller by common group variable. If value = groupValue then that particular radio is selected. Initially i kept it “”. It is not necessary that value represent text of radio like “male”,”female” , it can be 0,1,2. Next, when a radio is checked , onChanged method is called. onChanged accept a function having prototype (String s){}. In this function we updated group value and then setState() to update UI.
setState() is explained in this article.
10. Opacity
This is equivalent to alpha in Android and html/css. Opacity control the visibility of its child. Opacity = 0 means item is not visible and Opacity = 1 means fully visible widget.
Widget getBody() {
return Opacity(opacity: 0.2,child: Text("Hello partially visible world"),);
}
That’s all for this article, we will cover other widget in the next article.
If you liked the article please give it a clap. Thanks for your time.