Introduction to Building an App with Flutter

Amima Shifa
Aug 25 · 6 min read

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.

Features of Flutter

Flutter framework offers the following features to developers −

  • 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

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.

Flutter Architecture
  • Widget supporting multiple child

Some of the Important Widgets :

Project Structure

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

  • 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.

  1. To extend the class from StatelessWidget.
  2. Implement the build() method, that will receive one argument of type BuildContext and return a result of type Widget.
For reference UI of the app

References

Nerd For Tech

From Confusion to Clarification

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Amima Shifa

Written by

Self - motivated Programmer | A.I. Enthusiast | Freelance Software Developer | Undergrad CSE Student

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.