Beginners Guide to Flutter SDK – Create Simple Mobile App with Flutter

Flutter SDK

Flutter is a free and open-source SDK provided by Google, it uses a unique language called Dart ( which was developed by Google). With Flutter, a developer can have an easy way to build an application with the same code base on both android and iOS.

Why Flutter SDK?

One code for 2 platforms

You may have to spend time building your app on both android and iOS(setting environments, write your app to make it compatibles with wanted platform). But for now, with Flutter, you can use the same idea, same code to compile on both android and iOS, and upload your app to App Store and Google Play Store.

Fast development

“hot reload” provides a faster and dynamic way for a developer to change the code, no need to rebuild so it will save developers a lot of time.

Flexible UI

Flutter provides a flexible way to customizes widgets include features like icons, scrolling, fonts

Good community support

Flutter is an open-source framework, you can find a lot of Flutter documentation and it is very detailed with easy examples for basic use cases. When you have a problem in your code, you’re able to check the documentation and get the support from here

Difference between Flutter / React Native / Angular Ionic

We will compare the top three best platform mobile app development framework. Which one should you learn? I chose 9 metrics to compare these technologies.

Flutter Comparision

It’s not easy to choose a development framework and say which framework is best. It’s depending on your environment, your purpose, and you should consider all things like budget, application size, time, platform,…

For more understanding, I will show you how can we build “Hello world” application in 3 different frameworks.

*React native*

  • export default class App extends Component: defines the classes that extend the React Component.
  • View: a container that supports the layout accessibility controls.
  • Text: a React component for displaying text.

*Angular ionic*

  • ion-navbar: the navigational toolbar, contain a ion-title
  • ion-title: set the title of the Toolbar to “ Hello World”
  • ion-card-content: our hello text

*Flutter*

In Flutter, we always use widgets. We have a variety of widgets: buttons, tables, input fields, lists, tab bars, …In this example, we’re importing material.dart library which provides a set of material widgets. The body consists of a Center widget containing a Text child widget with “Hello World”.

Recommended Reading – React Native Tutorial

Simple web app and Mobile app in flutter

Install required packages (in Linux)

Follow this site: https://flutter.dev/docs/get-started/install to install on another operating system.

Setup an android emulator

1. Download and install latest android studio: https://developer.android.com/studio

2. Android Studio > Tools > Android > AVD Manager > Create Virtual Device.

3. Follow the instruction to finish creating an android emulator

4. Start this emulator

Create a simple mobile app

1. Create “myflutter” app from terminal

2. Make sure the emulator device is running

3. Modify the content of lib/main.dart

4. Run your application

Run Flutter Apllication

When you modify the content in “main.dart” file, you just need to press “r” to perform hot reload mode, your modification will be updated on this emulator.

Create a simple Flutter web app

1. Create “myflutter_web” from terminal

2. Run following commands to use the latest version of Flutter and enable web support

3. Restart your IDE and run this command to make sure you have a Chrome browser

4. Modify the content of lib/main.dart

Flutter Demo 5. Run your application

How to convert Flutter App to Flutter Web

We use “myflutter” mobile app from 4.3 to convert to Flutter app

5.1. Install required packages to run Flutter web

5.2. Upgrade your Flutter and make sure the version is higher than 1.5

5.3. Install and update webdev

5.4 Modify “myflutter/pubspec.yaml”

Add some contents as below at the end of pubspec.yaml”:

5.5. Create “myflutter/web/index.html”

5.6. Create “myflutter/web/main.dart”

5.7. Run below commands and see results

Conclusion

As you can see, it’s quite easy to get started with Flutter. I would like to mention some important points below:

1. Web app only runs on Chrome browser

2. Make sure you’ve started at least one device (real devices or emulator devices) before running mobile apps

Hope this article will help you to write your first app with Flutter. Let me know if you have any questions or suggestions in the comments.

One Comment
  1. tiago tamaro
    January 17, 2020 | Reply

Add a Comment

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