Introduction to Building an App with Flutter

Published in

Nerd For Tech

6 min readAug 25, 2021

What is Flutter?

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase.

Flutter is very new, but a promising platform, that has attracted the attention of large companies who’ve released their apps already. It is interesting because of its simplicity compared to developing web applications, and because of its speed as compared with native applications.

Dart is the programming language used to code Flutter apps. Dart is another product by Google and released version 2.1, before Flutter, in November. As it is starting out, the Flutter community is not as extensive as ReactNative, Ionic, or Xamarin.

Features of Flutter

Flutter framework offers the following features to developers −

Modern and reactive framework.
Uses Dart programming language and it is very easy to learn.
Fast development.
Beautiful and fluid user interfaces.
Huge widget catalog.
Runs same UI for multiple platforms.
High performance application.

Installation and Setup

For Installation : https://flutter.dev/docs/get-started/install

For Editor : https://flutter.dev/docs/get-started/editor

First of all it is mandatory to find the best IDE(Integrated Development Environment) for Flutter. There are many IDEs available for cross-platform mobile application development such as Android Studio, Visual Studio Code, Xcode, IntelliJ, Xamarin. On which Android Studio and Visual Studio Code are the most common IDEs for Flutter app development.

Visual Studio code is an IDE from Microsoft used to develop computer programs and websites also for cross-platform mobile applications. The Dart extension is required to use the DevTools from VS Code. You can also add the Flutter extension while you’re debugging Flutter apps. Open the root folder of your project (the one containing pubspec.yaml) in VS Code and select Run > Start Debugging to start a debug session for your application.

The Dart: Open DevTools command occurs in the VS Code command palette until the debug session is active and the application has started. In VS Code, there are no options for developing a project. Only the project name and location are selectable in VS Code.

Among these two IDEs Android Studio is considered as the best IDE for Flutter because of its popularity among developers. VS Code is also popular, but it seems to be more complex for a fresher to create an application by using command palette and adding extensions for making the app more attractive.

Some Basic Concepts

The core of Flutter’s layout mechanism is widgets. In Flutter, almost everything is a widget — even layout models are widgets. The images, icons, and text that you see in a Flutter app are all widgets. But things you don’t see are also widgets, such as the rows, columns, and grids that arrange, constrain, and align the visible widgets. Widgets build by composing other widgets normally use layout widgets. It is really easy to build an application if beforehand, you have a sketch of the app like the basic layout and features you would like to incorporate in the app then after that you can match the features of the app with the required functionalities/packages present in flutter.

Layout widgets can be grouped into two distinct category based on its child −

Widget supporting a single child
Widget supporting multiple child

Some of the Important Widgets :

Layout Widgets : To compose multiple widgets into a single widget, Flutter provides large number of widgets with layout feature. For example, the child widget can be centered using Center widget. Some of the popular layout widgets are as follows −
-Container − A rectangular box decorated using BoxDecoration widgets with background, border and shadow.
-Center − Center its child widget.
-Row − Arrange its children in the horizontal direction.
-Column − Arrange its children in the vertical direction.
-Stack − Arrange one above the another.
State maintenance widgets : In Flutter, all widgets are either derived from StatelessWidget or StatefulWidget.
Widget derived from StatelessWidget does not have any state information but it may contain widget derived from StatefulWidget. The dynamic nature of the application is through interactive behavior of the widgets and the state changes during interaction. For example, tapping a counter button will increase / decrease the internal state of the counter by one and reactive nature of the Flutter widget will auto re-render the widget using new state information.
Platform independent / basic widgets : Flutter provides large number of basic widgets to create simple as well as complex user interface in a platform independent manner. Flutter comes with a suite of powerful basic widgets, of which the following are commonly used:
TextThe Text widget lets you create a run of styled text within your application.Row, ColumnThese flex widgets let you create flexible layouts in both the horizontal (Row) and vertical (Column) directions. The design of these objects is based on the web’s flexbox layout model.
StackInstead of being linearly oriented (either horizontally or vertically), a Stack widget lets you place widgets on top of each other in paint order. You can then use the Positioned widget on children of a Stack to position them relative to the top, right, bottom, or left edge of the stack. Stacks are based on the web’s absolute positioning layout model.
Container:The Container widget lets you create a rectangular visual element. A container can be decorated with a BoxDecoration, such as a background, a border, or a shadow. A Container can also have margins, padding, and constraints applied to its size. In addition, a Container can be transformed in three dimensional space using a matrix.

Project Structure

Let’s first see what’s in the project generated by the Flutter framework:

lib/ — just as pub (Dart’s package manager), all the code will be here
pubspec.yml — stores a list of packages that are required to run the application, just like package.json does it. You should remember that in Flutter projects you cannot use pub directly, but instead, you will use the Flutter command: flutter pub get <package_name>
test/ — I’m sure you know what this is about. Right? You can run them via flutter test
ios/ & android/ — the code specific for each platform, including app icons and settings where you set what permissions you’ll need for your application (like access to location, Bluetooth).

Let’s get to building a simple application with Flutter

What will we be building?

Well, we will build a Pomodoro App with some really simple features- start and stop. It has a timer which runs for 25 minutes when you click on start, after the 25 minutes are over it resets itself automatically. You can stop/pause the timer while it is running.

You can start with importing the required packages in Flutter in main.dart file.

Inside the main() function:

For the application we can use any layout, I have used the Stateless Widget since in it the build function is called only once which makes the UI of the screen so it is easy to use.

To create a Stateless Widget , general requirements are:

A name for the new class ( in our case it is Pomodoro).
To extend the class from StatelessWidget.
Implement the build() method, that will receive one argument of type BuildContext and return a result of type Widget.

Extending Pomodoro class from StatelessWidget :

Now next step is creating the required Functions and UI for the app.

You are free to use any number of Widgets inside the build function to create your desired UI.