All about flutter basics you want to learn
Whenever we start working on any application, it is necessary to get clear with all the basic concepts for building the application. So in this article, we will explore and clear the basic concepts of flutter, which will help us to start with the development of the application. You can also learn flutter from the official documentation which is written in very easy language and easy to understand.
What is flutter?
Flutter is a cross platform application development framework which is used to create applications for iOS, Android, Web, Desktop . As flutter is growing constantly with new features as well as optimization, one can use flutter to develop a high quality application.
Why flutter?
1. Single codebase to create application for all platforms.
2. The performance of the application is same as the native apps.
3. Easy to learn and implement it.
4. Rapidly growing and used by most of the companies.
5. Backed by google and has large community for support globally.
How to install flutter?
Firstly you need to download the Android Studio from here. Follow the process of installation properly.
Depending upon the operating system (Windows, Apple, Linux and Chrome Os) you are working on, you can download the flutte SDK from here. You can also download the various version of the sdk as per the need of the development.
After successfully installing flutter, you can set up your favorite editor from here. So you can enjoy coding in your favorite editor.
Understanding the flutter project structure
When we create the first app by the flutter create command, it generates the predefined directories and files.
In lib directory,main.dart is a file that contains pre-defined code for a flutter counter application. In this file , main function is important where the actual execution of the program starts. In this lib directory we can create separate folders that separates the code according to the use of application.
pubspec.yaml is another important file that contains information about the application such as a version of the app, flutter SDK environment, path for the assets/fonts used in the application,etc.
The important directories are the android and ios directories, where the actual configurations are done. These folders have their own pre defined configuration folders which are not recommended edit or delete it.
So flutter is all about widgets. So let's explore some of the main widgets which are highly used in a flutter.
When we start working on the application we must understand what is Stateless and Stateful widgets.
StatelessWidget → StatelessWidget is a part of the user interface whose state does not get changed. If we use stateless widget, the widget doesn’t get changed while user interacts with the application. This type of widget is useful when we want to display just static data like any text,icon,button,etc which is not changing anytime.
StatefulWidget → StatefulWidget is a part of the user interface which has a mutable state means the state, can be changed by using setState. So when we use setState in stateful widget, the build method is called again due to which the state of the widget gets changed. This type of widget is useful when the information of the widget gets changed dynamically.
Text Widget
Text is a widget that is used to display text within the application. The text widget has a style property through which we can change the height, font, color of the text, and many more which is useful to customize the text according to the need.
Text(
/// Display text
"Demo text is here.",
/// To align text in centre
textAlign: TextAlign.center,
/// To display text in two line max
maxLines: 2,
/// To set the style of the text
style: TextStyle(
/// to set the color of text
color: Colors.white,
/// TO set the weight of the text like bold, normal,etc
fontWeight: FontWeight.bold,
/// to set the color of text
backgroundColor: Colors.red,
/// to set the font style of text like bold, italic,etc
fontStyle: FontStyle.italic,
/// to set the size of text
fontSize: 20.0,
/// TO set the space between each character
letterSpacing: 1.0),
),
TextField Widget
TextField is widget which used to create a material design text filed. Text filed in important whenever we want to take any inputs from end user. Flutter provides us with different text field properties to design and customize text field according the need of application.
TextField(
/// to get the value of textfield
controller: textController,
onChanged: (val) {
/// do something when user type in the textfield
},
onSubmitted: (val) {
/// do something when user completes typing in textfield
},
/// to set the keyboard type of textfield like number,text,etc.
keyboardType: TextInputType.text,
/// to set the color of cursor
cursorColor: Colors.red,
inputFormatters: [], // here we have custom format of the textfield input type
/// to decorate the textfield
decoration: InputDecoration(
/// to display hint in the text field
hintText: "Hello",
/// to display the outlined border when user clicks on the text field
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12.0),
borderSide: const BorderSide(color: Colors.green)),
/// to display the outlined border
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12.0),
borderSide: const BorderSide(color: Colors.yellow)),
/// to display the error border
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12.0),
borderSide: const BorderSide(color: Colors.red)),
/// to display the label of of textfield
label: const Text(
"Enter your text here..",
/// to set the style of text inside the textfield
style: TextStyle(color: Colors.black),
)),
),
TextFormField Widget
TextFormField widget is a type of form widget that contains TextField widget. It is same as TextFieldWidget but TextFormFieldWidget helps to validate the text field data easily using validation property.
Form(
// need to wrap text form field widget with form widget to validate
key: _formKey,
child: TextFormField(
/// to get the value of textfield
controller: textController,
onChanged: (val) {
/// validating using the form key
if (_formKey.currentState!.validate()) {}
},
/// to validate the text field data is value is empty
validator: ((value) {
if (value!.isEmpty) {
return "Please enter value";
}
return null;
}),
/// to set the keyboard type of textfield like number,text,etc.
keyboardType: TextInputType.text,
/// to set the color of cursor
cursorColor: Colors.red,
inputFormatters: [], // here we have custom format of the textfield input type
/// to decorate the textfield
decoration: InputDecoration(
/// to display hint in the text field
hintText: "Hello",
/// to display the outlined border when user clicks on the text field
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12.0),
borderSide: const BorderSide(color: Colors.green)),
/// to display the outlined border
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12.0),
borderSide: const BorderSide(color: Colors.yellow)),
/// to display the outline border style when error is displayed
focusedErrorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12.0),
borderSide: const BorderSide(color: Colors.red)),
/// to display the error border
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12.0),
borderSide: const BorderSide(color: Colors.red)),
/// to display the label of of textfield
label: const Text(
"Enter your text here..",
/// to set the style of text inside the textfield
style: TextStyle(color: Colors.black),
)),
),
),
Buttons in flutter
The button is an essential part of the application. If the user wants to move from one screen to another screen, one must need a button to perform some click event. Flutter provides various type of buttons which has their advantages.
Elevated button → Elevated button is a button which has more elevation. It requires the property onPressed and child. OnPressed is function where we can handle whats need to be done when user clicks on button. Child is property where we can have any widget. We can also add custom style to the butto using style property.
Elevated button is a filled material design button with a shadow.
ElevatedButton(
style: ElevatedButton.styleFrom(
/// to add styling to the elevated button
),
onPressed: () {
/// do something when user clicks
},
child: const Text("Elevated button"))
Outlined button → Outlined button is a simple button with a thin border and a text inside. It is same as text button with thin outer border. It is most commonly used button. It is also customizable y using the style property.
OutlinedButton(
onPressed: () {}, child: const Text("Outlined button"))
IconButton → Icon button is a button which requires icon as child property. Here the action will be done on the icon. It is mostly used in appbar. It is very useful when we want display an icon and make it clickable.
IconButton(
onPressed: () {},
/// we can add any icon here
icon: const Icon(Icons.add_a_photo))
In flutter, we also have other types of buttons like text button, pop-up menu button, dropdown button, etc which can be explored from here.
Layout widgets in a flutter
In flutter, we have layout widgets such as rows, columns, stacks, etc. These widgets are mostly used in a flutter to arrange the widgets in any direction.
Row → Row is widget which is used to to arrange the widget in left to right direction. Row has property children where we can have any number of widgets which is need to be displayed.
Row(
children: [
Container(
height: 40,
width: 60,
color: Colors.red,
child: const Center(
child: Text(
"1",
style: TextStyle(color: Colors.white),
)),
),
Container(
height: 40,
width: 60,
color: Colors.red,
child: const Center(
child: Text(
"2",
style: TextStyle(color: Colors.white),
)),
),
Container(
height: 40,
width: 60,
color: Colors.red,
child: const Center(
child: Text(
"3",
style: TextStyle(color: Colors.white),
)),
),
],
)
If we want to add a common space between the children widgets, row has property mainAxisAlignment through which we can have some space between the widgets.
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Widget 1,
Widget 2,
Widget 3,
],
)
Column → Column is a widget which is used to lay a widget in a top to down direction. It has property through which we have any number of widgets which is need to be displayed.
Column(
children: [
Container(
height: 40,
width: 60,
color: Colors.red,
child: const Center(
child: Text(
"1",
style: TextStyle(color: Colors.white),
)),
),
Container(
height: 40,
width: 60,
color: Colors.red,
child: const Center(
child: Text(
"2",
style: TextStyle(color: Colors.white),
)),
),
Container(
height: 40,
width: 60,
color: Colors.red,
child: const Center(
child: Text(
"3",
style: TextStyle(color: Colors.white),
)),
),
],
)
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Widget 1,
Widget 2,
Widget 3
],
),
Listview → Listview is a widget which is used to create a list which is scrollable. It has a property children where we can add any number widgets. If we use this widget, it must ensure that children widgets are not mutable after passing the list.
We can also change the direction of the scrolling using scrollDirection property provided by the Listview. It also other properties which can be explored while working on list view.
ListView.builder → ListView.builder is widget which is used to create a list which is scrollable and whose children widget are created on demand. ListView.builder requires a property itemBuilder which is called when it is list children widgets are visible. It also has property itemCount , if we provide any value to it, the itemBuilder will be called zero or less than item count value.
We also have listView.separated and listview.custom which has their advantage. ListView builder is mostly and commonly used in a flutter.
There are other layout widgets such as stack, which can be explored from here.
Image widget
Flutter allows us to display images from the assets or directly from the internet.
To display images from the asset, first create a folder and name it is asset. Under the asset folder, again create new folder and name it as a images, add you images in this folder.
Now go to puspec.yaml file and add the path of images folder.
/// displaying image from the asset
Image.asset("assets/images/image1.jpeg")
Displaying image from the network url.
Image.network(
"https://picsum.photos/200/300",/// network url of image
)
In this article, we have explored some of the widgets which are commonly used. But if you start working the application there may be situation arises to use other types of widget. So in order to keep a track always read a documentation properly and keep practicing each and every widget.
Let me know in the comments if I need to correct anything. I will try to improve it.
Clap if you like the article. 👏
