Getting started in Flutter — Part 1: IDE Setup
This is a story/guide on how I started working with Flutter. This is by no means an extensive tutorial since there exists many ways of doing this.
In 2014, I wrote an Android app called AirCare that used open data to visualize air pollution in Macedonia. Since then, the app has expanded to 7 countries, has over 100k users and is stronger than ever!
A few months ago, I understood that in order to make sure my Android and iOS apps get the same features as quick as possible, I need to use a language that will allow me to do just that. Enter Flutter.
From this series:
What is Flutter?
Flutter is not a technically a programming language. It’s a UI toolkit built by Google in order to help devs write code once, and deploy to multiple platforms. It uses Dart, a C syntax style language (to me looks more like Javascript) that controls the business logic.
If you have heard of React Native, think of the same concept, but made by Google, with a few differences that in my opinion make it better to use. In general, both approaches use reactive programming.
Flutter can deploy to Android and iOS for the time being. A deployment to web is also in the works (as of the writing of this post), but it’s still in technical preview and not ready for production. You can follow the progress here. Once it’s complete, you can deploy your once codebase to 3 different platforms.
What to remember:
- Flutter controls the UI and visuals of the app
- Dart controls the business logic
- Flutter and Dart use reactive programming
- You can deploy to Android and iOS, web deployments are coming soon
Getting started
Here are the basic steps I followed to start using Flutter
- Download an IDE
Flutter works really well with Android Studio or VS Code. In my case, I already had Android Studio, so I stuck with that. - Install the Flutter SDK on
You can find all the instructions needed to install the Flutter SDK on Windows, Mac and Linux here. Remember, in order to build iOS apps, you need a Mac, so keep that in mind when deciding what machine to work on. - Install the IDE plugins
Both Android Studio and VS Code have Flutter plugins that you need to install. For Android Studio open the plugin preferences (Preferences > Plugins on macOS, File > Settings > Plugins on Windows & Linux), select Browse repositories, select the Flutter plugin and click Install and then restart the editor.
Trying the Flutter demo app
Now that you have Android Studio ready, let’s try to build and test our first Flutter app. Go to File > New > New Flutter Project… to get to this window:
For now, ignore the other 3 options, and select the Flutter Application one. On the next screen you can configure the standard options of project name (this will be the last part of your package name) and paths. After clicking Next there, you are greeted with the last screen:
Choosing a package name is the same as you would for normal app development. The more important parts are the AndroidX and Platform channel language sections.
- AndroidX is the next version of the Android Support Library, and a lot of plugins that you will use later on already have this dependency, so make sure to check that box.
- The platform channel languages tell the wizard what language you want the native apps to be built in. By default, Java is used for Android, and Swift for iOS. If you wish to work with Kotlin, then you can support this, but I discourage going to Objective-C for iOS since a lot of plugins now ask for Swift.
After this, click Finish and you are ready!
Android Studio layout
Android Studio will now generate some default code for you in Flutter that will let you get started with editing right off the bat. In my opinion, tinkering with something that already works is the best way to learn something new.
You will see the 3 most important parts of the UI, apart from the actual code window.
- #1: This is the Project Explorer, the part of the editor where you will see all the files that Flutter has generated. Some important files and folders to note are:
- android: This is the folder that houses all the generated Android code
- ios: This is the folder that houses all the generated iOS code
- lib: This is the folder where you’ll write all your Dart code
- pubspec.yaml: This is the configuration file for your project. Here you define app versions, asset locations and plugins you wish to import in your project. - #2: This is the Device Selector, where you can choose what device you wish to deploy your app on. If you connect a physical device to your machine, it will show up here, otherwise you can configure the Android Simulator / iOS Emulator.
- #3: This is the Device Controller, where you start, stop, hot reload and restart your app on the selected device from the Device Selector.
After plugging in a physical device, or configuring a virtual one, select it from the Device Selector, and press the green Play button on the Device Controller.
If all went well, you have now built your first demo Flutter app!
Stay tuned for Part 2 where we start going into details of changing the app, adding some plugins and building a demo version of AirCare — the app that visualizes air pollution around you!
