Flutter Tutorial Part 1: Build a Flutter App From Scratch

In this tutorial series, we’ll guide you step by step on how to create an e-commerce mobile application using flutter. The mobile application would be an open-source app for the Aviacommerce platform. The tutorial would focus on this application to introduce the important concepts of the flutter framework.

This tutorial is the first part of the flutter tutorial series:-

1. How to build a flutter app from scratch
2. How to layout an application in flutter (coming soon)
3. How to organize data in flutter (coming soon)
4. Listing data in flutter (coming soon)

More updates on the content as we move ahead.

The blog will explain how to create layouts and introduce state step by step. To dive straight into the code, the entire project is available in Github under the umbrella of AviaCommerce. Feel free to fork it and play around.

We, at AviaCommerce actively seek out new frameworks that redefine software development. Our team is closely tracking activity in Flutter since its first beta release.

Google has finally announced Flutter 1.0, the first stable release of UI toolkit for creating beautiful, native experiences for iOS and Android from a single codebase.

Flutter has exceptional documentation for setting up the development environment. Follow this official installation guide to get going.

Once the setup is complete, we can start with a new test project. I prefer Android Studio since it offers a complete, integrated IDE experience for Flutter. Android Studio will require an editor plugin for Dart.

Launch Android Studio. You can see an option for initializing a new Flutter based project.

Choose Flutter Application from the list of configurations.

Think of a fancy name for your first Flutter app. Or just go with a timer if you are bad in naming stuff like me.

One last step in the process, the dialog will ask you for the application package name.

After this step, the Flutter SDK will create an initial directory structure for the application. All the action goes inside lib folder and main.dart is the starting point in the app execution.

In Flutter, everything is a widget. Images, icons, and text in a Flutter app are all widgets. Even layout elements such as the rows, columns, and grids that arrange, constrain, and align other widgets, are widgets themselves.

The good point is, Flutter SDK creates an interactive widget at the root of the application here itself. To make things a bit easier, let's remove that and start with a bare minimal design (Hello World!).

Your main.dart the file should look something like this:

Firing up the Android emulator opens it up with a Text widget greeting “Hello World!”

Notice the widget in focus here. We will try to modify the body of MaterialApp to bring out the interface as we want it to be. The original version is what is shown below.

Layout elements (widgets) in Flutter can be broadly categorized into two types based on whether they house a single widget or are capable of holding an array of widgets. Container, Padding belong to the former while Row, Column etc. fall under the latter.

Introduce a Row layout with three children of type Text widgets.

Before we go on and style the components, it is advisable to create a new widget that will handle the styling so that we follow the DRY principle.

Replace the three children with a custom widget defined later in the same file. The main.dart file now becomes

The timer looks a bit bland right now. I am not very good at user interfaces but let's try our best. Pack the Text widget inside a Container and decorate the Container with a background color along with padding to space out elements.

Also, insert a button to perform the actions on timer below the three styled text widgets. The modified code looks like this.

Here comes the most integral part of the app — state. The State will hold the current value of the timer and whether the timer is active (running) or not. I have come up with TimerState the class that is responsible for maintaining the state and also takes charge of building the widget tree.

Pressing the button toggles isActive variable.

Dart comes with an elegant module for async operations. We can use its Timer class to help us increment seconds. The modified TimerAppState is described below. Notice we have refactored Timer class to TimerApp to prevent ambiguity with Timer class in the async module.

The app is fully functional now. The complete main.dart code can be found here. I hope it clears out the basics of the Flutter framework.