60 Days of Flutter : Day 1 - Creating the App

Photo by Kelly Sikkema on Unsplash

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

• 60 Days Of Flutter : Building a Messenger from Scratch
• 60 Days of Flutter : Day 1 : Creating the App
• 60 Days of Flutter : Day 2 : Setting Up A CI With Flutter
• 60 Days of Flutter : Day 3–4 : Building a Chat Screen in Flutter
• 60 Days of Flutter : Day 4–5 : Widget Testing With Flutter
• 60 Days of Flutter : Day 6–7 : Implementing a Slideable Widget Using Bottomsheet in Flutter
• 60 Days of Flutter : Day 8 : Changing The Launcher Icon and Implementing GestureDetector
• 60 Days of Flutter : Day 9–10–11 : Creating Awesome Register Screen in Flutter
• 60 Days of Flutter : Day 12–14 : Understanding BLoC Pattern in Flutter
• 60 Days of Flutter : Day 15–17 : Implementing Registration Screen using ‘flutter_bloc’
• 60 Days of Flutter : Day 18–19 : Unit Testing in Flutter using ‘ mockito’
• 60 Days of Flutter : Day 20–21 : Unit Testing a Bloc in Flutter
• 60 Days of Flutter : Day 22–23 : Building a Modern Contacts Page in Flutter
• 60 Days of Flutter : Day 24–26 : Building a Animated Progress Fab and the Contacts Bloc in Flutter
• 60 Days of Flutter : Day 27–29 : Sending and Retrieving Messages from Firebase using BLOC
• 60 Days of Flutter : Day 30–32 : Firebase Chat UI using Stream and Bloc
• 60 Days of Flutter : Day 33–35 : Paginating data from Firestore using Firebase Queries
• 60 Days of Flutter : Day 36–38 : Seamlessly Upload Files to Firebase Storage
• 60 Days of Flutter : Day 39–41 : One UI Inspired Attachments Showcase Page
• 60 Days of Flutter : Day 42–45 : Creating the Home Page & Quick Peek BottomSheet for Messages
• 60 Days of Flutter : Day 45–47 : Adding Dark Mode to a Flutter App
• 60 Days of Flutter : Day 48–50 : Creating the Settings Page using Bloc
• 60 Days of Flutter : Day 51–54 : Unit Testing Firebase Providers with Mockito
• 60 Days of Flutter : Day 55–56 : Deploying Firestore Security Rules using Firebase CLI
• 60 Days of Flutter : Day 60 : Wrapping It Up

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!