How to Build Native App With Flutter — Step-by-Step Guide

Sit back, close your eyes and imagine a single programming language that would allow developing various products on various platforms.

“One programming language to rule them all.”

You won’t need to spend sleepless nights on studying new languages and frameworks. The development process has never been easier.

Unfortunately, this story is nothing more than a fantasy. In reality, we’re dealing with a plenty of technologies and spheres of influence. In a world of mobile app development, there’s an endless race between two giants: iOS and Android (it looks like Windows Phone pulled out of the race a long ago :( ).

Each sphere requires certain skills, such as knowing the platform and a leading programming language: Swift for iOS and Kotlin for Android. Nowadays, there are 3 solutions of universal SDL for mobile application development. They’re also known as React Native, Xamarin, and Flutter.

Flutter is an SDK from Google, which allows developing native applications both for iOS and Android. It’s an open-source project that works with an existing code.

In this post, we’ll take a closer look at Flutter development for Android platform (remember that you’ll need Android Studio for Android and XCode for iOS).

First of all, make sure you have Android Studio version 3.0+. Do you have one? Great, now you need to install Flutter plugin;

1. Start Android Studio.
2. Open plugin preferences (Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux).
3. Select Browse repositories…, select the Flutter plug-in and click install.
4. Click Yes when prompted to install the Dart plugin.
5. Click Restart when prompted.

Now you can create a new project for Flutter: File> New> New Flutter Project.

Choose Flutter application.

Select a name for your project and enter a path to your SDK. If SDK is not specified, just click on “Install SDK.”

Choose the package name and add a support for Swift and Kotlin (if necessary). Basically, that’s all you need to start working with a project. Additionally, you can run a default code generated with Flutter (please, don’t forget to run an emulator or connect your device).

Let’s write “Hello world” app:

And now let’s take a look at the syntaxis peculiarities.

• In this example, we use Material style as we work in Android Studio. Flutter provides various ready design widgets. For the iOS platform will be available Coopertino style.
• => This symbol is just a syntaxis for one line functions.
• In Flutter everything is a widget (even an application itself). Stateless and Stateful widgets are the widgets with changeable and unchangeable conditions.
• The Scaffold widget is a framework that includes the standard screen components. Hierarchy can be quite a difficult process. and have an app bar, body, menu and other.
• The main method for the widget will be build() — that’s how the widget should look like.
• The widget should contain other widgets.
• Stateless widgets are immutable. This means that their properties can’t be changed. All the values are unchangeable.
• Stateful widgets maintain state that might be changed during the lifetime of the widget. Implementing a stateful widget requires at least two classes: 1) a StatefulWidget class that creates an instance of 2) a State class. The StatefulWidget class is, itself, immutable, but the State class persists over the lifetime of the widget.

Basically, you need to create a Widget and generate a condition for this widget (build it according to the state).

For education purposes, let’s create a dependency in a file pubspec.yaml. This library has the most common English words.

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.0
  english_words: ^3.1.0

Let’s click on the “package get” to pull in a dependency. We’ll create a widget that A widget that changes its state, we’ll create by hiring from the base class.

Besides, we create a condition by inheriting from the base class of condition:

We need to redefine a method createState() and return an object condition. Condition class has a builder method, which you need to redefine if you want to configure your widget. This is how a method builder of your main class of the application should look like:

Let’s create a list of the most common words and add a possibility to mark the words that we liked the most and drag them on the new screen. Basically, all the logic will be in the condition class. The following code needs to be considered as as a single class with comments:

As a result, we can select the important elements and go on the new screen.

We just scraped the surface of mobile development and there are still a lot of things to know. The development process is not the easy one. If you want to develop cool hybrid apps, you’ll need to dive into the ocean of programming. The right way will be to start with the Dart programming language (all the code in this article was written in Dart). Additionally, you’ll need to learn a lot of widgets + Reactive approach to the programming. But these topics are for the future articles. See you in the next episode.

By the way, If you want to find out more about the Flutter, feel free to visit this website.

JetRuby - Mobile App Development Services for Startups and SMEs