With this article, I would like to help Beginners/ Newbies to get started with Flutter development.
Detailed instructions for Flutter Development Setup based for various operating system can be found here – https://bit.ly/2AiNQOH.
If you are starting with mobile development for the first time, you may feel some uneasy, don’t worry everyone has such trouble while starting with the framework. as you move forward you’ll know how to handle the situation.
Let’s Create a Flutter App
Once you setup development environment, we can start creating our flutter apps. To create a new flutter app, execute following flutter commands one by one.
flutter create App_Name cd App_Name code .
I’m creating this app from Windows system using VS Code. Replace
App_Name with meaning full name –
coutner . The above
create command will take a while to complete the process, so please be patient.
- To open emulator from vs code, click on ‘No Device’ at the bottom-right click corner of the IDE. Then list of created emulator will be opened, just select one emulator.
- Or you could directly start from android studio.
To run this app, press F5 or execute following flutter command.
For the first time, it may take a while to complete this process. Because it might download and install Gradle software, which is act as a build system.
How it works?
As you know Flutter uses Dart as it’s programming language. Execution of flutter app starts from lib/main.dart file,
main() function is the starting point. It is defined as follows.
The function is defined with shorthand syntax, since it only returns the result from executing the function
runApp . You could also write the function in full form like this.
runApp() is a function defined in Flutter, it will attach a flutter widget to device screen. In Flutter, everything is a widget. Here
MyApp is a widget. Inside this newly created application, we have two widgets –
MyHomePage . There are two kinds of widgets in Flutter,
- Stateful Widget (eg. Button)
- Stateless Widget (eg. Checkbox)
As per Flutter documentation here –Stateful and stateless widgets.
In this application,
MyApp is stateless and
MyHomePage is a stateful widget. Don’t worry if you don’t get it now. Basically widgets are classes in Dart, which inherits from parent classes –
StatefulWidget , So parent class determines whether a widget is stateful or stateless.
How Flutter Apps are Designed
To design the app, we override
build() function from the parent widget class. Flutter uses Material Design for it’s elements. You could see the corresponding import statement at the top – ‘flutter/material.dart’ . Inside the root widget
MaterialApp() function is called. Home screen is created with
A stateful widget is defined with two classes as shown below.
First and second classes are inherited from
State class respectively. The main reason for this split is immutability of parent class –
StatefulWidget now. If you don’t know what is meant by mutability or immutability of a class, don’t worry it’s not important right now. In short the first class configure the widget and the second class –
_MyHomePageState contains design of the widget.
I’m not going to explain each widget in deep inside this article, mainly inside this home page or
MyHomePage widget, we’ve an app-bar, text control and a floating button.
State Management in Flutter
Basically in an application, the state of screen/ page is represented with few properties. for example, state of a form page is defined with properties or objects contains input values and other related information. Changes in these values will change the screen/page state into another state. Or you can say, the UI of the screen is created in accordance with the state object. Same is happened inside this app.
MyHomePage widget, there is only state variable
_counter. which is defined in
_MyHomePageState class. The UI/ design of the screen is based on this state variable
_counter. Meaning the design of the screen changes only when state object/ variable changes. That’s what happens when we tap on floating action button,
_incrementCounter() function is called to increment the value of
Whenever we change the state object, we’ve to do that inside
setState() function. That way flutter knows there is a need redesign/ recreate the widget with update state object. That’s how the Text control is redrawn with the updated value.
We have discussed the same topic in our YouTube Channel. Where we have customized this counter app with two buttons for increment and decrement buttons.