How to Build Native App With Flutter?

Native app development is becoming increasingly important. Users can benefit from the distinctive features of the platform, therefore, native apps are popular. Flutter, the new mobile UI framework from Google is also becoming very important. As a developer, you might be wondering how to build a native app with Flutter, and I will explain that here.

Contents

Native apps: What are they?
What are the advantages of native apps?
What is Flutter?
Advantages of Flutter
Flutter: Key resources
Reuse your Android and iOS development skills with Flutter
Make a mobile app using Google’s Flutter

Native apps: What are they?

Let‘s first look at the very concept of native apps, and understand what they are. A native app is an app that‘s built keeping specific platform features in mind. Such apps are for use on specific platforms or devices. Examples are Android native apps. Read more about native apps in “native app”.

Android and iOS are the two most popular mobile platforms, however, both are distinctly different. Native apps for each platform use the platform-specific hardware and software. Users have a seamless experience when they use native apps.

Native apps don‘t appear out of place on the device it‘s intended for. Native apps are coded using languages that are suited to specific platforms. Android native apps are coded using Java, whereas Objective C is the language to code iOS native apps. Read more about these characteristics in “Native mobile app”.

“Pokémon Go”, the famous game is a good example of a native app. The corresponding versions for Android and iOS use specific platform features for enhanced user experience.

On the other hand, hybrid apps are built using universal languages and frameworks since they are developed for both platforms. “LASIK”, an app used for finding surgeons online and schedule an appointment is a good example of hybrid apps.

There are also mobile-responsive websites, however, they aren’t as popular as native or hybrid apps. Mobile users use apps most of the time on apps and only 10% of their time on these websites. Read more about this observation in “Mobile app versus mobile website statistics”.

Download Our Project Specification Template

What are the advantages of native apps?

Native apps are increasingly popular among users, moreover, native app development is also popular among programmers. There are a host of reasons for this, as follows:

  • Native apps work using the inbuilt features of the device. This includes the camera, microphone, location services, and more. This naturally makes it easy to use them. Native apps are faster due to this exact reason.
  • For mobile users, native apps provide a seamless experience. Look and feel, ’user interface’ (UI), and usability are far superior for native apps.
  • App stores and marketplaces fully support native apps. Users know intuitively how to download and use native apps for particular platforms and devices.
  • Google and Apple both have stringent guidelines for publishing apps on their app stores. Native apps go through this detailed filtering process. Users can feel confident about using a native app, knowing that it has been approved for use on the respective platforms. Read more about the advantages of native apps in “Web app vs. native app: pros and cons”.
  • Mobile users are very familiar with the frequent routine of app upgrades. Most regularly upgrade their apps when prompted. This key maturity among users also contributes to the growth of native apps. These apps receive all necessary upgrades, therefore, they remain secure. In a domino effect of sorts, this further increases the popularity of native apps.
  • From the perspective of developers, native app development is advantageous. This is because they typically work with ’software development kits‘ (SDKs).

What is Flutter?

Flutter is a relatively new framework from Google. Developers can use it to create mobile apps on Android and iOS at the same time. Programmers can write their code once, subsequently, they can deploy it to both iOS and Android. In that sense, it’s a cross-platform framework.

Over time, Flutter will offer much more. There are desktop embeds for Linux and Mac OS. These will make it easy for programmers to develop apps for desktop environments. Read more about the importance of these desktop embeds in “Flutter: from Mobile to Desktop”. Windows desktop embeds will be there, too.

Flutter is interesting in many other ways! It uses its’ own coding framework and doesn’t use iOS or Android for it. It doesn’t have code for handling the camera, Bluetooth and other device-specific hardware.

However, when it comes to designing and developing cross-platform UI with the required business logic, Flutter is fully capable. Flutter also has its‘ own UI system. Mobile app developers can carry out a lot of experiments, thanks to this powerful capability. For e.g., programmers might be able to use an interface suited to iOS in an Android app! Read more about these capabilities in “In plain English: So what the heck is Flutter and why is it a big deal?”.

Advantages of Flutter

There are several advantages if you build a native app with Flutter, as follows:

  • When you create blocks in the UI, Flutter helps significantly. It works well with proprietary widgets.
  • Flutter is built using a promising programming language called Dart. It’s very easy to learn, and it’s great for reactive programming. The language also offers significant productivity improvement to programmers. Google has recently released Dart 2, signaling an exciting future for it. I have discussed this language in “How to deploy your Dart app to Heroku?”.
  • Flutter, having been built on Dart, allows amazing ease-of-use to developers. Programmers find a significant performance improvement with it.
  • Google seems to focus a lot on Flutter and Dart. In fact, their planned Fuchsia ’operating system‘ (OS) will be built on Dart. Such a high-focus will certainly ensure a good deal of stability to Flutter, and key enhancements.
  • Flutter has excellent documentation and tools.
  • The “Hot reload” feature allows developers to write code, and immediately see how it’s working.
  • Since programmers write one app for two platforms, i.e., iOS and Android, the time for testing reduces.
  • Flutter provides a catalog of widgets and allows designers to customize them. Creating new widgets is easy.
  • Last, but not the least: Flutter is open-source!

Read more about these advantages in “Flutter vs React Native: which is more startup friendly?”.

Flutter: Key resources

Flutter is still new. However, there are already many learning resources. To start with, you can visit their documentation webpage. Their installation instructions are here. This includes installation instructions for Windows, Mac OS, and Linux.

Developers can use any text editor along with Flutters‘ ’command line interface‘ (CLI) tools. However, there are a few recommended editor plugins when you create a native app using Flutter. These provide productivity aids such as editing assistance, highlighting syntax, debugging support, etc.

You can use these plugins for Android Studio, IntelliJ, or Visual Studio Code IDEs. There are detailed instructions for installing and configuring these plugins. Find these instructions here.

There are also learning resources for more advanced topics. These include sample apps on GitHub. There are instructions for adding resources like images to a Flutter app.

How to create animations for your Flutter app, how to internationalize your Flutter app, etc. are some of the other guides that you will find useful. You can access these guides here, to make your Flutter development for Android or iOS easier.

Reuse your Android and iOS development skills with Flutter

If you are an Android or iOS developer, you will be able to reuse your skills when you use Flutter. You only need to know how various Android and iOS concepts map to the Flutter concepts. Below, I point you to such a mapping.

Read How We Helped a Marketing Company to Build a Back-Office Custom Ads Dashboard

Android vs Flutter mapping:

Please note the following for Flutter app development, if you are an Android developer:

  • In Android, “View” is the foundation of everything that‘s on-screen. Buttons, toolbars, etc. are all views. Widgets are the equivalents in Flutter.
  • Android views can be directly updated, however, developers using Flutter need to modify the states of widgets.
  • You use XML in Android to write layouts in Android, whereas you will use widget trees to write them in Flutter.
  • Developers add or remove a child view from the parent view, to add or remove components from their layout. In Flutter, programmers need to pass functions to widgets.
  • Programmers can create animations using XML in Android, however, in Flutter, they need to use the animation library.

This is not an exhaustive list. Read “Flutter for Android developers” for more details.

iOS vs Flutter mapping:

If you are an iOS developer, make a note of the following before you develop an app with Flutter:

  • iOS developers use view objects belonging to the “UIView” class to create their UI. As you know by now, Flutter uses widgets.
  • Updating views in iOS is like how it’s done in Android, however, developers need to modify the state of the widget in Flutter.
  • iOS programmers use “Storyboard” files to organize their views, whereas widget trees help in achieving this objective in Flutter.
  • “addSubview” or “removeFromSuperview” is what iOS developers‘ use, for adding or removing child views. As I have mentioned above, they need to pass functions in Flutter to achieve this.

Read “Flutter for iOS developers” more guidance.

Make a mobile app using Google’s Flutter

Let‘s go step-by-step, and develop an app with Flutter.

Install Google Flutter and Dart: Step #1

You need the Google Flutter SDK, which already includes the Dart SDK. I recommend you use Git for this project. It’s a reputed tool for source code management, build management and deployment. Download Git from here.

An advantage of having Git is that you can just clone the Flutter SDK from their GitHub repository. In this guide, I will use “Google Flutter – what is it, and how to use it for cross-platform app creation”, written by Jessica Thornsby, to refer to commands. Let‘s call is the ’reference article‘.

Click “Clone or download”. Copy the URL. Open a command prompt and enter a ’Git clone‘ command, using that URL. Use the relevant commands to add Flutter to your path. Run the ’Flutter doctor‘ command to check for any missing dependencies.

If the messages on the terminal show that your Flutter installation is old, then run the ’Flutter upgrade’ command. Check the ’reference article‘ for details of the commands.

Add Flutter to Android Studio: Step #2

I have earlier mentioned how development can be easier if you use the Flutter and Dart plugins for ’Integrated Development Environments’ (IDEs) like Android Studio. Assuming you will use Android Studio, follow these steps:

  1. Select ’Preferences‘ from the Android Studio toolbar.
  2. There‘s a left-hand menu. Select ’Plugins‘ there, and click on ’Browse repositories‘.
  3. Search for Flutter, and install it.
  4. Install the Dart plugin when prompted. Restart Android Studio.

Find the sample “Hello World” code in Flutter: Step #3

When you installed Flutter and added it to your Android Studio, it came with sample projects with code. Let’s use one of those samples to create a basic “Hello World” application.

Open your Android Studio toolbar, and click on ’New‘. Subsequently, select ’New project‘. You now need to select ’Flutter application‘, and then click on ’Next‘. Specify a name for your first project, also specify where you want to store it.

On your Android Studio screen, point to the Flutter SDK and navigate to your Flutter folder. Click ’Open’, enter a domain name of your choice, and click ’Finish’. Now, open the ’Flutter_app/java/main.dart’ file. You will find plenty of sample code, however, let’s only choose the “Hello World” related code for the time being. Consult the ’reference article‘ for guidance with the code snippets and commands.

Create your “Hello World” app using Flutter, and run it: Step #4

Since you have used the sample code that your Flutter installation came with, you don‘t have much coding at hand now. Remove all other code. The ’reference article‘ provides sample code. Use that to replace the unnecessary code in the ’main.dart‘ file.

Now, you need to run your app. You can launch an ’Android Virtual Device‘ (AVD), or attach a physical Android device to your laptop. Open the Flutter device selection menu, and select your device. Navigate to the Android Studio toolbar, and select ’Run‘, and subsequently, select ’main.dart‘.

Do you have bigger plans to create more powerful Flutter apps?

The above “Hello World” app was a simple one. You might have great app ideas, and you may want to create more complex Flutter apps. Remember that at that time you will need a ’Mobile Backend as a Service‘ (MBaaS) provider. MBaaS providers address the backend aspects like infrastructure, storage, database, security, API integration, and user management. You can check our guide “How to choose the best mobile backend as a service (MBaaS)?”.

Depending on the complexity of your app, you might also need to work with a development company. Check our guide “How to find the best software development company?”, which will help you with the due diligence.

Download Our Project Specification Template

Aran Davies

Blockchain Expert | Developer | Writer | Photographer
Aran Davies

Latest posts by Aran Davies (see all)