Flutter

Posted on

When you plan to make a cross platform mobile development, Google Flutter is one of your best choice. As 4th December 2018 at Flutter Live!, Google announced the stable release of Flutter 1.0. It is very overwhelming for the community. As we know, Flutter could make a beautiful and amazing native apps for multiple platforms that allow you to build fluid and customized sophisticated UIs. Flutter is created by Google. It allows you to develop native apps on both iOS and Android at the same time. It also have a hot reload features that allows you to make changes while apps running in real time which speed up troubleshooting process immensely. Flutter also has plenty of beautiful customizable widgets that help you build interfaces in minutes. That sounds nice for us, developers, to have it and make iOS and Android app development more convenient and easy to manage the source code.

How can Flutter this powerful?

We are going to dive in to why Flutter is so powerful. As noted in Google Developers YouTube channel, these are summary of how Flutter works.

  • Firstly, in Flutter all UI components or widgets, as you can see above, we have a widget, which is a button.
  • Secondly, you take these widgets and you compose them together to create complex UIs. So we’re gonna create it repeatedly to what we call the widget tree and that’s literally how we’re building these together.
  • Thirdly and most importantly, Flutter will manages the relationship between state and UI. It will only rebuilds those widgets. When their state changes and it will do that task itself without relying on you. For example here, when we call state on the greeting widget, it’s going to automatically redraw UI itself.

How fun it is to develop with Flutter

So now, we are going to develop an app. What should we prepared? As in FlutterGetting Started” official page, you can chooose to what your environment has. This tutorial will cover in Windows.

System requirements to develop with Flutter

To install and run Flutter, your development environment must meet these minimum requirements:

  • Operating Systems: Windows 7 SP1 or later (64-bit)
  • Disk Space: 400 MB (does not include disk space for IDE/tools).
  • Tools: Flutter depends on these tools being available in your environment.

Windows PowerShell 5.0 or newer (this is pre-installed with Windows 10)

Git for Windows, with the Use Git from the Windows Command Prompt option.

If Git for Windows is already installed, make sure you can run git commands from the  command prompt or PowerShell.

Get the Flutter SDK

Download the following installation bundle to get the latest stable release of the Flutter SDK:

  1. Flutter SDK version 1.0
  2. For other release channels, and older builds, see the SDK archive page.  
  3. Extract the zip file and place the contained flutter in the desired installation location for the Flutter SDK (eg. C:\src\flutter; do not install Flutter in a directory like C:\Program Files\ that requires elevated privileges).
  4. Locate the file flutter_console.bat inside the flutter directory. Start it by double-clicking.

You are now ready to run Flutter commands in the Flutter Console!

If you have already have an existing Flutter installed, please follow this upgrading Flutter guide to upgrade.

Update Environment Path

If you want to use Flutter command with your regular Windows command line interface console, add this to your PATH environments 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.
  • Note that you will need to close and reopen any existing console windows for these changes to take effect.

Run Flutter Doctor

Flutter Doctor command will check whether you have all dependencies required to develop apps with Flutter. It will show you what you need to do to resolve dependencies.

To resolve “Android license status unknown.”, fix it by type this command: flutter doctor --android-licenses.

If you have resolve it, you can start to develop apps with Flutter.

Flutter Tutorial

Now we are going to learn make a working app. We will make a “Hello World!” app. Wait… what. No, we are not going to make a mainstream simple app. You can make it with several click through Android Studio wizard yourself alone. Let’s make a little bit challenging app.

The tutorials will cover some implementation of Flutter features and device API. Here is the list:

  1. Making Flutter Firebase Chat App
  2. Flutter Camera App

Leave a Reply

Your email address will not be published. Required fields are marked *