To start any flutter project you’ll need to setup the Flutter SDK and also choose an editor. For this series I’ll be using Android Studio with Flutter Plugin installed on Linux.

Making Sure It Works

Once you have installed the SDK and Android Studio, Run flutter doctor . This will check for all the necessary installations, and throws an error if anything’s missing.

Creating the App

You can create the app by running

flutter create --org com.app.messio --description 'Messio is a modern messaging app' messio

Here,

— org : defines the applicationId for the app (PRODUCT_BUNDLE_IDENTIFIER in case of iOS).

— description : adds a brief description of the app to the pubspec.yaml file.

You can also create the project using the Android Studio GUI.

Android Studio->File->New->New Flutter Project->Flutter Application

All your code will reside in the lib folder and your tests will reside in the test folder. At this point the basic setup is complete and we’re ready to start.

Running The Demo App

For this series we’ll be building the app only for android. You can setup the build environment for iOS using this guide. I’ll be using a real device for running the app. You can also setup a virtual emulator if you wish to.

To run the project click the run button inside Android Studio

or flutter run from the terminal

The result should be something like this.

Flutter supports something called hot reload . This really cool feature lets you hot-swap your code changes without the need to build and run again and again.

Cleanup & Playing With Hot Reload

Let’s clean up the pre-generated code now.

I’ve removed the floating action button and also the content of the body tag. I’ve replaced it with a centered “Hello World!” text. Press CTRL+S ( CMD+S on OS X) to see the changes getting reflected on the device.

The void main() function inside main.dart is the starting point of any flutter project. It instantiates a MyApp object and runs it. Do note that Dart, for all it’s similarities with java, omits the new keyword for object creation.

Hmmm.. Interesting…

Let’s also play around with the theme using hot reload while we’re at it. Change the primarySwatch to Colors.yellow, Colors.green and Colors.cyan followed by CTRL+S each time. You’ll see the theme of the app change in realtime without the need to build the app again.

Hot reloading in action

And that’s it for today !

Tomorrow I’ll setup a CI for the project and also update the test for the main.dart file.

Code Changes

#1 Init

How Can You Contribute?

Open issues with suggestion of better approaches or ideas for the app.

Connect with me on Twitter or Linkedin or Instagram.

Star the Github repository.

Share the series on Twitter.

Follow me on Github.

Posts In This Series

Show Your Support

Press the clap button below if you liked reading this post. The more you clap the more it motivates me to write better!