Experience of Learning Flutter Development
Tags: beginners, tutorial, flutter
Published: 2022-12-12 07:51:13

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. The basics you can learn from this repository [here](https://github.com/Nemo21/Dart-Practice/blob/main/dartpractice.dart), you can also refer the docs for dart [here](https://dart.dev/guides).

- 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q6jmwqgq0kj7voqmjn60.jpg)

The resources you can follow are:

- Initially the flutter official flutter Docs.
- Then [Flutter Tutorial for Beginners](https://github.com/iamshaunjp/flutter-beginners-tutorial)
and you can find the same on [Youtube](https://www.youtube.com/playlist?list=PL4cUxeGkcC9jLYyp2Aoh6hcWuxFDX6PBJ)
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](https://www.youtube.com/watch?v=mEPm9w5QlJM) and [here](https://www.youtube.com/watch?v=F6P0hve2clE)

My Initial Flutter Apps:

-[Random WordPair Generator](https://github.com/Nemo21/Random-Word-Pair-Generator)

-[To Do App](https://github.com/Nemo21/To-Do-App-In-Flutter)

How I develop Flutter Apps:

- Download Flutter

- Open Visual Studio code.

- Install these two extensions

![This is Dart Extension for language support](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yjb7fadg7h0419jngydl.PNG)

![This is Flutter Extension which enables to run Flutter Apps](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7hsd3fvrk3e3htvlg4n.PNG)

- 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qbumbonze8qxww3vzfz9.jpg)

![You can create application ,module ,package and much more](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qsxojoecifei1hnzht0c.jpg)

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


![App name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tlaupfrs5cmw513lzivt.jpg)

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

![Sample App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0863erpa1bjukx181h24.PNG)

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

![Run Command](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ltearcnucnuao3082m6r.PNG)

- Now you will be seeing a running sample app.

![Sample Running App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mmossfprowubeoxnvrjr.PNG)

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