Build Your First Beautiful App Today With Flutter

Last updated: June 12, 2020

At IT BOOST Australia, we want to help you build your first beautiful and natively-compiled mobile application using the portable UI toolkit from Google called Flutter.

Introduction

As the popularity of mobile apps continues to rise, developers need to stay current and learn modern mobile development tools. Flutter is such a tool that has gained a lot of reputation and admiration since its release. Stay tuned to learn everything you need to know about this state of art mobile, web, and desktop development framework.

What is Flutter used for?

Built and maintained by Google, Flutter is a modern open-source mobile UI framework created with performance and portability in mind. In a few words, Flutter allows you to create a native mobile application for both Android and iOS only with a single codebase. You can also use Flutter to create desktop apps (Alpha) and web application (Beta).

This means that you won’t have to learn a different programming language for each platform or hire programmers with different skills. In other words, you can use a programming language and one codebase to develop apps for both Android and iOS devices instead of creating two different apps. This is a really big news for both programmers and startups, and certainly an amazing time and money saver for the DevOps.

In addition to mobile apps, you can compile your Flutter source code to a native macOS desktop app. For that, you only need Flutter SDK and XCode, and converting your code to a beautiful native app is completed in a few seconds.

Flutter also supports the generation of interactive web pages compatible with standard Web technologies such as HTML, CSS, and JavaScript. It also supports almost every advanced Web feature like Canva, DOM manipulation and, Progressive Web Applications (PWA). However, as of May 2020, rendering web content in the Flutter is still in the Beta development phase.

What language is Flutter?

Flutter apps make use of a programming language called Dart to build and control user interface (UI) for any platform, created by Google too. It has borrowed many advanced features form other programming languages but it is easy to learn and implement.

Dart uses a syntax similar to JavaScript (or if you prefer a C-style syntax). So, whether you are coming from web or mobile development or you are just a newcomer to the world of programming, you can learn Dart and use it in your programming projects in a relatively short time.

According to Google, Dart is a language optimised for building user interfaces, fast compilation, and run as well as product development which is implemented by Hot Reload feature which allows you to edit your Flutter and see the effect on the running in a fraction of second and is very important when you’re iterating on the UI design and need to see how your app looks instantly.

This has translated into better development experience, less time, and boosted productivity. Developers confess that Flutter programming is one of the best programming experiences they have ever had. This is accomplished with the help of Ahead of Time (AOT) Compilation method. Flutter watches and re-compiles your source every time you make a change in your app.

However, the native code generated by AOT is not optimised for performance in the real devices. Hence, Flutter comes with Just in Time compilation feature that is used for rendering native machine codes optimised for your target platform. Flutter is the only mainstream programming language that is shipped with both AOT and JIT.

As Peter Rojas, Co-founder of Engadget and Gizmodo put it: “In my opinion, the future of mobile is the future of everything”. Flutter is one of the game-changers in the mobile cross-development frameworks and its programming language Dart is the fastest growing language in 2019, according to GitHub. So, we think that it is a great time for you to start learning this mobile development tool.

What you need to know about Flutter framework

The key benefit of cross-platform mobile app development is that you can use a single programming language rather than using different tools for each platform. Apart from native app development tools such as Java for Android or Swift for iOS, some platform-independent mobile frameworks gained in popularity among DevOps.

For example, since a few years ago React Native and Xarmin.Forms have been used for making apps for different platforms using a single codebase. The Flutter framework (Dart programming language) was the fastest-growing framework in this category that has obtained a lot of reputation for performance and user-friendliness. That gives us a good reason to answer one of your most asked questions, which is: Is Flutter good for beginners?

Is Flutter good for beginners?

Compared to traditional mobile development frameworks like React Native, Flutter is easier to learn and use. Flutter uses UI building blocks named widgets which turns creating a UI into a simple and fun task. All you need is to build an eye-catching app that comes in the form of widgets. The best is that Flutter widgets are platform-independent and automatically get compiled to the native elements of the platform. This means you should not worry about the features of different platforms.

Only you need to focus on your code and let Flutter do the cumbersome task of translating your code to different operating systems and platforms. Because Flutter follows platform-specific conventions and behaviors, Flutter apps look and feel native on both Android and iOS.

For example, after building with Flutter, on iOS, you get a native bounce effect when you overscroll a page, while on Android, scrolling will stop when you reach the end of the content and you get a material splash effect.

Installing Flutter on Mac, Windows, or Linux is as simple as a pie, which is described at the bottom of this article. Google has provided Flutter installation bundles for all supported platforms. You can even try Dart on your browser in DartPad or Google Codelabs before downloading the full package. To figure out how much Flutter is beginner-friendly, compare this with other cross-platform development environments such React Native that has no pre-built installation package.

If you want to be a mobile developer and you are new, you can start with tones of Flutter tutorials on Codelabs, Flutter Website, Youtube, and other websites (resources). During the process of learning, you will get the concept and syntax of Dart in addition to the framework features.

Next, you can assign yourself a real cross-platform project and try to build your own app. This puts the Flutter on the top of the list of novice programmers who are looking for free and high-quality learning resources.

On the other hand, if you don’t come from a programming background and thought, you are not familiar with the Object-Oriented Programming (OOP), writing advanced codes in Dart could be difficult for you. Because the documentation assumes the prior knowledge of OOP and it references concepts of other languages, some Dart tutorials seem to be a little hard for beginners.

Anyway, don’t let this fact stop you from learning one of the most on-demand cross-platform languages. You can learn OOP principles form a myriad of free resources available online for free. For example, check this YouTube video from Mosh Hamedani that explains OOP just in 7 minutes:



And the last recommendation for beginners: if you get overwhelmed you should know that the same thing happened for any programmers around the world. Just post your question or issue on StackOverFlow and there is always someone to help you get out of the situation.

Do you need to learn Dart to learn Flutter

Not necessarily. If you come from an Object-Oriented programming language, especially from the C-like language family including Java, JavaScript, PHP, and C++ you can work immediately in Dart. Although the syntax of Dart is very similar to its ancestor, C++, understanding the basics of Dart will be useful.

It only takes a day or two for an experienced programmer to go over the syntax and data structures in Dart. Here is the Dart Cheatsheet to start with. Google has also provided an excellent Flutter getting start guide for Android, iOS, React Native, Web, and Xaramin.Forms developers.

Is Flutter only for UI?

Flutter is not just a framework that you can build great UI with, it also can be used for creating powerful backend and fullstack apps. Google uses Flutter to make some of its applications like Stadia. Other companies like the New York Times build their apps with Flutter and they are entirely built with the Flutter framework. You can even build complex backend apps like HTTPS servers or app endpoints using Flutter and Dart.

Is Flutter a frontend or backend?

The answer is both and none! Flutter solves the conflict between Front and End development. It uses platform-free widgets that translate to Dart programming language. All positioning and styling are done using Dart. Later, Flutter compiles Dart source codes to the native platform codes.

Dart makes my heart Flutter. This is from our Flutter Super-Hero profile named Rémi Rousselet who helped a lot of Flutter devs on StackOverflow and ranks as top 0.01% this year. When it comes to portability, developer experience (hot loading), and documentation, Flutter shines like a star. So, it is the number one choice for those who want to craft beautiful and performant apps that run on a variety of devices.

Getting started with Flutter

As described above, Flutter is a free and open-source mobile UI framework created by Google which allows you to create a native mobile application with only one codebase. This means that you can use one programming language and one codebase to create two different apps (for iOS and Android).

How to Install Flutter on Windows?

Minimum System Requirements:
Operating Systems: Windows 7 or later [64-bit]
Disk Space: 400 MB
Tools: Git for Windows

Download the Flutter SDK
Download Latest Flutter SDK here: Flutter SDK Releases
1. Select the Windows OS
2. Extract the downloaded zip to C:\src\flutter
3. Locate flutter_console.bat inside the flutter directory and start it by double-clicking.

Update your path
If you wish to run Flutter commands in the regular Windows console, take these steps to add Flutter to the PATH environment variable:
· From the Start search bar, type ‘env’ and select Edit environment variables for your account
· Under user variables check if there is an entry called Path:
· If the entry does exist, append the full path to flutter\bin using ; as a separator from existing values.
· If the entry does not exist, create a new user variable named Path with the full path to flutter\bin as its value.

Run flutter doctor
From a console window that has the Flutter directory in the path, run the command flutter doctor to see if there are any platform dependencies you need to complete the setup:
In flutter_console.bat type flutter doctor. This command will check your environment and displays a report of the status of your Flutter installation. Check the output carefully for other software you might need to install or further tasks to perform.

How to Install Flutter on MacOS

Minimum System Requirements
· Operating Systems: macOS (64-bit)
· Disk Space: 2.8 GB (does not include disk space for IDE/tools)
· Tools: Git for macOS

Download the Flutter SDK
Download Latest Flutter SDK here: Flutter SDK Releases

1. Extract the file in the desired location e.g. cd ~/development
$ unzip ~/Downloads/flutter_macos_v1.5.4-hotfix.2-stable.zip[M1]

2. Add the flutter tool to your path. To do this, open your bash profile from your terminal (might need sudo)
$ sudo vim ~/.bash_profile

3. Add your flutter path to the $PATH variable in bash_profile. E.g. If you extracted flutter in your Applications folder, your path will be /Applications/flutter/bin. Add this to the existing $PATH variable by using : in between two paths. Once added, save and close the bash_profile. Run terminal again and check the $PATH by running.
$ echo $PATH
You should see your Flutter path added to the $PATH.

4. Run flutter precache in the terminal.
Run flutter doctor
Run the following command to see if there are any dependencies you need to install to complete the setup (for verbose output, add the -v flag):
$ flutter doctor

This command checks your environment and displays a report to the terminal window. The Dart SDK is bundled with Flutter; it is not necessary to install Dart separately. Check the output carefully for other software you may need to install or further tasks to perform (shown in bold text).

Set up an editor

Install Android Studio
1. Download and install Android Studio.
2. Start Android Studio and go through the ‘Android Studio Setup Wizard’. This installs the latest Android SDK, Android SDK Command-line Tools, and Android SDK Build-Tools, which are required by Flutter when developing for Android.

Install Flutter and Dart plugins 1. Start Android Studio.
2. Open plugin preferences (File > Settings > Plugins).
3. Select browse repositories, select the Flutter plugin and click Install.
4. Click yes, when prompted to install the Dart plugin.
. Click restart when prompted.

Write your first Flutter app

Create a project
To create a new application project, you will first need to open android studio and select Start a new Flutter project. Chose Flutter Application as the project type. Then create a name for your project, leaving all other options with default values.

To start developing an application in Flutter, you will need to learn the Dart language. You can learn more about this language by checking out dart.dev.

Introduction to widgets

What are widgets?
Flutter is all about collections of widgets. If you're familiar with other programming languages like React Native, Android, or Ionic, then you will understand that widgets are pieces of your user interface. everything you make is a widget; Buttons, Tabs, ListView, Drawer, GridView, etc., are all widgets.

Once you understand that widgets are almost anything that affects how the UI looks and behaves, then it makes sense that there are a lot more widgets than just structural elements like buttons, text, and images. For example, padding is a widget. Layout columns are widgets. Styles are widgets. Even gesture detectors are widgets.

What types of widgets are there?
There are 2 broader types of widgets: StatefulWidget and StatelessWidget.

Stateless widgets are used to display static data, like text and images. Data that does not need to be dynamically changed whenever you update any value bound to it. For example, if you want to make a button whose name doesn't need to change dynamically, then you can create a separate widget for a button as a Stateless widget.

Stateful widgets are just the opposite of Stateless widgets. This means when you want to make something that you want to change dynamically according to how a user interacts with it, then you can use the Stateful widget. For example, if you want to change the background colour of the app on click of a button, you could use a Stateful widget.