DEV Community

Cover image for Experience of Learning Flutter Development
Pseudobish
Pseudobish

Posted on Edited on

Experience of Learning Flutter Development

So, to begin with why did I learn Flutter?

It was because of the fact that it came out recently and I had to get my hands dirty in a new technology. I also had interest in mobile apps and how they were made. So lets start with it.

What is Flutter?

So, Flutter is an open source framework by Google.

  • Mobile UI framework for creating native apps for IOS & Android, which means not only can you learn to develop apps for android devices but also for IOS devices.

  • As mentioned above that it can develop apps for both Android and IOS devices meaning it only requires single code-base(which is in Dart)which implies we only have to write our app once for multiple devices.

Now, the questions arises.

Why Use Flutter?

  • Only 1 code base

  • Very smooth and quick experience when running apps.

  • If you are looking to develop full stack apps with flutter , it works well with Firebase as a backend.

  • It uses an Object-Oriented Language known as Dart which is really easy language to pick up.You can refer the docs for dart here.

  • Uses Material Design out of the box.

  • It has great docs and guides on its official website.

So, now the question arises what should you know?

  • A basic to good understanding of programming principles which includes:
  1. Classes
  2. Functions and methods
  3. Variables
  4. Asynchronous code

Flutter Overview:

ITS ALL ABOUT WIDGETS.

So, what are Widgets?

Widgets are the bedrock of flutter applications because without them we cant create anything inside a flutter app.

At first, the root widget that surrounds everything you see on the screen.

Then, nested inside the root widget , we have appbar widget which is at the top.

Inside, the nested appbar widget exists a textbar widget, which has the title of the app.

So, this nesting results in a tree like structure known as the widget tree. The widget tree describes the structure of widgets inside your app.

This is the way a widget tree in flutter looks like

The resources you can follow are:

  • Initially the flutter official flutter Docs.
  • Then Flutter Tutorial for Beginners and you can find the same on Youtube This will be able to clear mostly all the concepts of Flutter and Dart.
  • After clearing the basics of Flutter and Dart, you can move ahead and try to develop some full-stack apps with flutter and Firebase from here and here

My Initial Flutter Apps:

-Random WordPair Generator

-To Do App

How I develop Flutter Apps:

  • Download Flutter

  • Open Visual Studio code.

  • Install these two extensions

This is Dart Extension for language support

This is Flutter Extension which enables to run Flutter Apps

  • Press Ctrl+Shift+P and choose the option of creating new flutter app, then name your flutter app and you will have a sample app opened in your editor

Create flutter App

You can create application ,module ,package and much more

  • Then select the location where you want to create the app and name your app.

App name

  • You will be seeing a sample flutter app, with main.dart file

Sample App

  • Open terminal and run the command flutter run choose your emulator and run your app.

Run Command

  • Now you will be seeing a running sample app.

Sample Running App

With all this you should be good to go with the basics of Flutter Development.

Top comments (2)

Collapse
 
piyushraj profile image
Piyush Raj •

Thanks for the guide, this is really helpful!

Collapse
 
inderpreet02 profile image
Inderpreet singh •

very helpful