Logo

dev-resources.site

for different kinds of informations.

What is Flutter, how do I get started ??!!!

Published at
10/13/2023
Categories
flutter
google
firebase
firestore
Author
dhanush17tech
Categories
4 categories in total
flutter
open
google
open
firebase
open
firestore
open
Author
13 person written this
dhanush17tech
open
What is Flutter, how do I get started ??!!!

Basics of Flutter

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

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
Enter fullscreen mode Exit fullscreen mode

terminal image

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

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

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

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

If you are already starting to love Flutter Check out my Video or Schedule a meeting with me

firestore Article's
30 articles in total
Favicon
Dev Video Review: Firestore Data Structure, Limitations, and IMHO
Favicon
Do you need a No Code tool for Firebase?
Favicon
Firebase: The Ultimate Backend for Your CMS
Favicon
NgSysV2-10.1: Firestore CRUD templates
Favicon
NgSysV2-3.3: A Serious Svelte InfoSys: Firebase D/b rules and Login
Favicon
NgSysV2-3.4: A Serious Svelte InfoSys: Rules-friendly version
Favicon
NgSysV2-3.5: A Serious Svelte InfoSys: Client-Server Version
Favicon
Dive into the world of serverless - GCP Edition
Favicon
Visualizing Firebase Data: Unlocking the Power of Real-Time Insights
Favicon
Implementing Batch Write Operations in Firestore with Express
Favicon
Enforcing Firebase App Check for Firestore with Initialization Configuration
Favicon
Retrieving User Roles from Firestore in a Next.js Application
Favicon
How to Keep Your Custom Claims in Sync with Roles Stored in Firestore
Favicon
Scheduling Events in Firebase Firestore with Server Timestamps
Favicon
Using Google Cloud Firestore with Django's ORM
Favicon
Firebase Realtime Database vs Cloud Firestore
Favicon
Real-Time Data Handling with Firestore: Tracking Pending Orders
Favicon
How to programmatically backup your Firestore database with simple steps
Favicon
Understanding Real-Time Data with Firebase Firestore in JavaScript
Favicon
Enabling Offline Capabilities in Firebase with IndexedDB Persistence
Favicon
Querying Firestore for Capital Cities with JavaScript
Favicon
Explorando o Firebase: Uma Plataforma Poderosa para Desenvolvimento de Aplicativos
Favicon
Using Firestore in Apps Script
Favicon
What is Flutter, how do I get started ??!!!
Favicon
How to Stream Data From Firebase to BigQuery Easily
Favicon
Retrieve a list of data under specific user collection in flitter
Favicon
Tentando não ficar pobre antes de ficar rico criando uma Startup de serviços de inteligência artificial
Favicon
Trying to Maintain a Workable Budget Creating a Chatbot Using GPT and Vector Database
Favicon
Uptime Monitoring with Firebase
Favicon
Firestore data modeling

Featured ones: