What is Flutter, how do I get started ??!!!
Tags: flutter, google, firebase, firestore
Published: 2023-10-13 22:01:32


[![Basics of Flutter](https://raw.githubusercontent.com/dhanush17-tech/Profinity-Dectector-and-Image-Moderator/master/Untitled%20design(1).png)](http://www.youtube.com/watch?v=s4VScWsR5OY"Basics of Flutter in one Shot")

Flutter is gaining a lot of hype now, but **what is it in the first place, is it hard to learn, is it worth the learning???** Don't worry, I've got you 

Flutter is a cross-platform development toolkit, basically, you only need to code once but you'll have an app ready to ship for both Android and IOS mainly!! Well, that's amazing but what about the performance? Performance is not even a doubt, Flutter gets really close to native app performance and renders apps at 60fps, that's just as smooth as butter!!🧈🧈


## Now let's get coding

![coding gif](https://media0.giphy.com/media/mcsPU3SkKrYDdW3aAU/200w.gif?cid=6c09b952tuubri34slkr2o1hx8qb6xfhli0xgnp4d58xs7v3&ep=v1_gifs_search&rid=200w.gif&ct=g)

**Everything in Flutter is a widget, in fact, the screen itself is a widget**. Now let's create our first app in Flutter

Go to your terminal and hit 

```
flutter create counter_app
```
![terminal image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ffmqklm9kuxknsc7s8i.png)

Now that you've created the Flutter project, drag and drop the folder in VS Code.

Navigate to **main.dart** in the **lib** folder and run the project on an emulator


![counter app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79851y30twdsczz6dkb4.png)


Now I know the code looks very intimidating, but that's why I'm here to help you out.

The first thing you should notice is the **StatelessWidget** and **StatefulWidget** in the code. To put it in a simple way, StatefulWidget is used when the content on the screen needs to be dynamic or in other words the state needs to be altered. StatelessWidget is used when you don't want any change in the screen's content. Yes, it's as simple as that!!!

If you want to create a StatefulWidget, just type `stf` and your code editor will generate the code for you. If you want a StatelessWidget, you should type `stl`.

Now you see you have a function called `_incrementCounter`  which has `setState` in it. Now what on earth is that?!!!

![function image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ufbakvte0o2y3ifev9r2.png)

As the name says `setState` is used to **set the state** of a variable. In this app, we want to increment the state of the counter variable every time we hit the increment button hence we are using `setState` to change the state of the `_counter`.

Now let's take a look at the other crazy stuff we have in our app

As I told you before, **everything in Flutter is a widget** the `MyHomePage` screen itself is a widget. Inside the `MyHomePage` widget/screen, we need to add more widgets to display content on the screen. Starting with the `Scaffold`

- Scaffold: This widget basically provides you a canvas to place all the other widgets you need in an app. For example, if you are going to a Supermarket to get some snacks for your weekend Netflix, you will definitely need a bag to place all your snacks. The bag here is your Scaffold and the other snacks you'll want inside the bag can be the other widgets. These snacks will be placed inside the `body` property of your `Scaffold`

- Text: As the name itself says, a Text widget will help you place text on the screen

But what should I do to place these widgets in the order I want??!!! That's why we've got the **Layout Widgets**.

We have Column, Row, Stack, and many more...


![widgets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ch3ioacnbalwfzvs4hnl.png)

But what are `children` and `child` that I can see in these Layout Widgets??!!!

`children` is just a property that takes a **list of widgets** that needs to be placed in a Layout Widget.
`child` is a property that takes a **single widget** that needs to be placed in a Layout Widget.

Now you know everything that you need to start **dashing** with **Flutter**

**That's it guys, you've nailed this!!!**

There is a bucket load of widgets that Flutter offers you, check them out at [Flutter Widget Catalog](https://docs.flutter.dev/reference/widgets) 

If you are already starting to love Flutter **[Check out my Video](https://www.youtube.com/watch?v=s4VScWsR5OY&t=1258s)** or **[Schedule a meeting with me](https://topmate.io/dhanush_vardhan)**