HomeFlutterGetting Started With Flutter

Getting Started With Flutter

Flutter is new tech by Google for mobile apps development. Main purpose of flutter is to allow for native ui experience, fast mobile apps and very good ui interface.

This is again a cross platform tech means same app can be deployed in android/ios

This is a direct competitor of React Native (Expo), so basically Facebook has React Native and google’s answer is Flutter.

In this series of blogs we will see how to get started with flutter and start to develop apps using it.

Flutter is written in language (Dart), although we are not going to learn Dart all. With just basic programming concepts we have of functions, loops, variables etc we will simply start to program in Flutter. Dart is designed to be a very easy to learn and simple language.

Read more about flutter here https://flutter.dev/

First steps is to install flutter on your system https://flutter.dev/docs/get-started/install depending on your operating system

I am using window’s system for these series of blogs. I was able to install flutter easy on my system, just follow there instructions to the dot.

Make sure to install “android studio” also on your system and then run “flutter doctor” it will automatically detect and set it up.

“flutter doctor” is a tool which helps to setup all required dependencies to run flutter properly

Next, step is to setup the editor https://flutter.dev/docs/get-started/editor?tab=vscode

I personally recommend using VS Code

After you installed if you do “CTRL + SHIFT + P” and type “flutter” you should this.

Next deploy the app. Before you deploy the app, its always better to connect it using android phone instead of using emulator. Emulator just makes your system very slow. So connect your phone to your laptop, turn on developer mode. Depending on your phone google how you can turn on developer mode in your phone and make to also enable “install app via usb” options.

Again both these things “developer mode” and “install app via usb” you will many many blogs online for doing these things.

Next open your terminal and write “flutter devices” this should show your device like this

If you get errors like “futter” command not found etc. Just google it, you need add flutter to your “PATH” variable. again too many blogs available online for me to write about it.

Next follow this https://flutter.dev/docs/get-started/test-drive?tab=vscode to run the first app on your phone.

If you follow the guide properly you will once the most important features of flutter i.e Hot Reload. This means you can make updates to your code and it will automatically update the mobile app in real time. This saves a lot of time in development and its very useful.

Also Hot Reload is only for small changes to your app. Suppose you have a major change like adding widgets or you get an error during development you need to do Hot Restart. This is present in your vs code options visible via CTRL + SHIFT + P when you deploy the app.

So important different when you first build the app, it will do lot of things like resolve dependency, gradle build etc etc these things take time but once deployment you need to just to hot restart/hot reload which is very quite and real time.

At this stage you should have a flutter app running on your phone in a very short period.

So main use of flutter is to get make app development faster/easier. So i you want to develop a MVP app or something quick with good design flutter is very good at that.

Flutter has a lot of pre-build UI widget e.g full material design widgets, buttons, text etc which provide a native experience for mobile apps. So all widgets here https://flutter.dev/docs/development/ui/widgets

These provide almost all the things you require to develop an app. On top this flutter has a very large community widget to add features on top of this https://pub.dev/flutter

Stay tuned for next series of blogs as well explore flutter in more detail

Leave a Reply

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

%d bloggers like this: