Things you want to learn to build the flutter application
I started my career as a flutter developer and worked on various applications from scratch. I have learned that flutter is easy to learn and implement if you know what the topics should be learned first and begin with the development.
When I started learning about the flutter, I searched for various tutorials on YouTube and read most of the articles. But I was not aware of what topics should we learn first. So before learning, we must follow the proper roadmap to begin with, so that we learn from basics to advance level.
Before we dive into, learning the flutter, you may have a question:
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. Find more about flutter here.
Why flutter?
1. The main advantage of flutter is that we can create application for ios, android, web and desktop with a single code base as flutter is cross platform application framework.
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. (Google pay is developed by using flutter, and many more applications).
5. Backed by google and has large community for support globally.
To start with flutter development, one must know dart programming. As dart is a new programing language we must understand the basics of dart programming to proceed with application development.
oops concepts
data types
loops
maps
functions,etc
There are more topics covered in official documentation which are very useful and explained in detail.
Find more about dart programming by example here.
Understand how flutter is different for app development by watching a video.
Setting up environment
The setup is different for each platform. One must download the stable release SDK of flutter and install it. I have worked mostly on windows, and the steps provided by the flutter documentation are easy to understand.
Follow the steps for setup here for each platform. Here you will find all the steps from downloading the flutter and dart SDK to setting up the editor for development. You can choose your favorite editor and follow the steps accordingly.
As a beginner, I’ll recommend starting with Android Studio. Android Studio is very easy to set up to start your project. Android Studio makes it easy to create emulators and start basic project development.
Flutter project architecture
At this point, you have done the setup for flutter SDK setup and created a demo project. Now it's time to understand the structure of the project.
Every time we create a new flutter project, predefined directories and files are created automatically. The most important directories and files are :
android and ios directory : These directories contain all the predefined configurations of the native android and ios applications. Also, we can modify some of the files in this directory, if there are any platform-specific changes we have to make else it is not recommended to make changes in any of the files of these directories.
lib directory : The lib directory is where you can place your dart files. In this directory, you can create several subfolders containing some dart files. These dart files contain the actual dart code such as the UI screen, etc. By default there is a main.dart file which contains the code of counter application.
pubspec.yaml file : The pubspec.yaml file is the heart of any Flutter project. Developers are strongly recommended to always read all comments in the pubspec.yaml file. This file contains all the information about your app. This file contains the name of the app, the version of the app, current working Flutter and Dart environment, etc. This file also contains information such as the use of fonts, assets, and dependencies in your project.
Widgets
Flutter is all about widgets. Widgets are used to create user interfaces and display images on mobile application screens. Flutter comes with various widgets. The main advantage of these widgets is that you can customize them according to your needs.
Below is the list of commonly used widgets
- Stateless and Statefull widget
- Row
- Column
- Container
- Scaffold, etc
To learn more about the widgets in-depth, read the official documentation here. Also, try to practice practically every widget available in flutter so that you get used to it.
Layout
As we have learned that is flutter is all about widgets that are displayed on the screen of mobile, but all widgets are not visible. Some widgets are used for layout purposes. Consider Row and Column are widgets that are not visible on the screen but we use these widgets to lay a widget inside these widgets.
Here we can say that flutter has visible and invisible widgets. There are widgets such as Row, Column, ListView, and GridView that are used to lay the widgets. Learn more about the layouts with examples here.
Interactive widgets
An application is incomplete without end-user interaction. For this purpose, flutter provides various widgets which are highly interactive. One must understand how to get any response while tapping on any widgets. In flutter, we have widgets like Buttons(Outlined button, Text Button, etc), Gesture detector, Inkwell, etc which are highly used for interaction purposes.
You should also understand which widgets to use for interaction purposes such as Statefull or Stateless widgets. If you use an interactive widget to change the widget state, you should prefer Statefull widget. Click here to learn more about adding interactivity to an app by example.
Navigation
Since your application will always have multiple screens, you also need to understand how to move from one screen to another and how to return to the previous screen. In flutter, we can navigate to a new screen using the Navigator widget. Flutter also provides navigation to screens using named routes. Read more about navigation here.
There may be chances that you have to send data to a new screen and return data to the previous screen. This can also be achieved using navigation. Example
To navigate to new screen
Navigator.push(
context,
MaterialPageRoute(
builder: (BuildContext context) => ScreenName(),
)),
To navigate previous screen
Navigate.pop();
Navigate and pass value to the new screen
Navigator.push(
context,
MaterialPageRoute(
builder: (BuildContext context) => ScreenName(
param: value,
),
)),Local Storage
As you work with your application, you may need to store a small amount of data within the application. So, for this purpose, you can readily use a local database package such as SQFLite, Hive or Object Box, etc. Alternatively, we can use shared preferences to store data as key-value pairs, or use Firebase.
While working on the database it is necessary to understand how to perform CRUD operations. Learn more about the local databases here.
API integration
API integration is the most important part of application development. Once you create any UI and you want to show some data in the UI which is coming from backend API or you want to send data backend, then you need to understand how to work with APIs.
Flutter provides us with different packages to work with API such as http, dio, etc. Always start with http package, because it is easy to use and commonly used and if you get confident then try other different packages.
Whenever you make an API call, the response is received in JSON format. So it is good practice to convert the JSON response into models, so the models can be used easily in the application.
Create a model easily by visiting these websites.
json to dart : just paste your json response in json section and click on the generate dart button.
quicktype.io : convert the json into model for any language
Learn more about networking in flutter here.
State management
State management is an important concept and the most discussed topic in a flutter. State management is important when developing an application as your application grows, managing the flow of data becomes difficult. So with state management, you can control the flow of data and reuse it anywhere in your application.
Flutter provides various state management approaches which have their pros and cons. Flutter has state management approaches such as a Provider, Bloc, Riverpod, Get, etc. Read more about the state management in the documentation.
Let me know in the comments if I need to correct anything. I will try to improve it.
Clap if you like the article. 👏
