Introduction

Flutter apps are becoming increasingly common with UI developers because of their ability to allow code reuse across multiple platforms like Android and iOS. This article aims to explain how you can create your first Flutter app with ease and join the UI developers’ army using Flutter for their day to day UI development needs.

What is Flutter?

Flutter is a massively popular, cross-platform, UI toolkit designed for creating natively compiled web, desktop, and mobile applications using a single codebase. Developed by Google, Flutter’s coding ease, cross-platform usability, and the ability to build from a single codebase are making it increasingly popular with developers. It already supports Android and iOS, while the Flutter web app is in beta version. The macOS and Linux support for Flutter is still in the development stage.

Flutter vs. React Native

Choosing between Flutter framework and React Native in 2020 boils down to the following debate points:

1. Learning curve

Flutter is comparatively harder to learn than React Native as React Native uses the all too familiar JavaScript. However, learning Flutter can prove to be a walk in the park if you are familiar with Dart. Hence, React Native has the upper hand in the React Native vs. Flutter debate where learning is concerned.

2. Extra functionalities

React Native is inherently pretty basic and lacks the extra styling functionalities offered by Flutter. Everything is a widget with Flutter, and these widgets are easily customizable and adaptive across both Android and iOS.

3. Performance

Flutter is becoming extremely popular in 2020, not just because of its extra functionalities but also because of its performance. It is fast as it is compiled in native code, while React Native still has a JavaScript layer making it slower. Create fully functional custom components based on your own code. here you can check A Step-by-Step Guide to Convert Your Figma to Flutter

Also Read: React Native vs Flutter- Which is Better?

How to create your first app with Flutter Tutorial?

flutter app

Creating a flutter web app or a mobile app is a pretty straightforward process that comprises the following steps:

Pre-requisites

Using Google Flutter for app development requires you to have Android Studio installed on your computer and some experience in working with it. 

Installation

Method 1: Installing Flutter with snapd

You can use snapd to install Flutter on Ubuntu or similar distributions. 

1. Enter the following on your terminal:

sudo snap install flutter –classic

sudo snap install flutter –classic flutter 0+git.142868f from flutter Team/ installed

2. Launch Flutter using the command:

flutter

The Flutter framework now downloads to your computer and is initialized.

Method 2: Installing Flutter manually

If you are not using the Ubuntu distribution, or if you do not have snapd, you can download the required version of Flutter manually.

1. Download the required version of Flutter from this link. 

2. Open the .bashrc file in your home directory using the command below:

gedit ~/.bashrc &

3. Add the following to the end of the file:

export PATH=”$PATH:~/flutter/bin”

4. Save and close the file. If you extract Flutter somewhere other than the home directory, the Flutter SDK path will be different.

5. Close your terminal and open it again to reload your configuration. As an alternative, the configuration can be sourced using the command below:

. ~/.bashrc

Checking the Installation

To check if the installation is successful, run the following command:

flutter doctor -v

You can see the information about installed components using this command.

Installing IDE plugins

Install plugins in your chosen integrated development environment (IDE) to interface with Flutter SDK. Flutter can be used with IDEs like Android Studio, IntelliJ IDEA (Community Edition), and VS Code. This tutorial uses Android Studio as an example.

  1. Launch Android Studio.
  2. Navigate to Settings >> Plugins >> Marketplace.
  3. Enter Flutter in the search field. Click Install.
  4. Click Agree when you see an option to install the Dart plugin. If the option does not appear on the screen, install it by repeating the steps mentioned above.
  5. Check if all the required plugins are installed by rerunning the flutter doctor -v command in the terminal.

Creating your own Flutter App

  1. Navigate to New >> New Flutter project in your Android Studio IDE.
  2. Select Flutter Application in the Window that appears next.
  3. Name your project hello_world. You might also have to specify the path to the SDK.
  4. Enter the package name.

You have now created a Flutter project. Launch it on a device or use an emulator. To run your basic Flutter app on an Android emulator, follow the below-mentioned steps:

  1. Enable VM acceleration on your device.
  2. Launch Android Studio, and navigate to AVD Manager >> Create VirtualDevice.
  3. Select a device definition and select Next
  4. Select the system image for the Android version you want to emulate (x86 or x86_64 is recommended). Click Next.
  5. Select Hardware – GLES 2.0 under Emulated Performance.
  6. Verify if the AVD configuration is correct. Select Finish.
  7. Click Run in the Android Virtual Device Manager. The default canvas of your selected OS version and device appears on the screen. 

The Faster Way with Example 

argon pro flutter

You have successfully created your very first Flutter app. However, the process mentioned above is a fairly time-consuming one. There is a faster way how you can structure Flutter apps and use the Flutter framework. And here we are talking about Flutter templates. Check out this beautiful example:

Argon PRO Flutter allows you to create powerful mobile applications with ease. The usual Flutter components have been redesigned to make them easy to use and minimalistic, to save you the trouble of having to redesign the Flutter framework for your needs. The features of Argon PRO Flutter templates are:

  • Fully coded components like inputs, cards, buttons, and navigations.
  • All components can take variations in colour, which you can easily modify inside our theme file.
  • The ability to match together different widgets to put together a mobile app with ease.
  • The ability to jump-start development using onboarding screens, discover screens, or profile screens to quickly set up a basic Flutter mobile project.

If you want to give it a try, check out the free version on Creative Tim’s website

Conclusion

Flutter is a cool, easy, cross-platform solution to your web and mobile development needs. Because of its versatility and speed, it is here to stay. Creative Tim offers multiple Argon PRO Flutter app examples for you to choose from. If you want to make designing Flutter apps a walk in the park, try the cool Flutter templates by Creative Tim today!

Also Read: App Development Solutions That Won’t Break The Bank