Introduction
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.
Now before running this application, we’ve to open android emulator first. Hope you’ve created one by following this Flutter Documentation here.
- 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.
flutter run
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.
Here 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 – MyApp and 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.
A stateless widget never changes. and stateful widget is dynamic, it can change its appearance in response to events triggered by user interactions or when it receives data.
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 – StatelessWidget or 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 MyApp , MaterialApp() function is called. Home screen is created with MyHomePage widget.
A stateful widget is defined with two classes as shown below.
First and second classes are inherited from StatefulWidget and 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.
In 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 _counter.
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.
Video Tutorial
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.