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
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
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
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?!!!
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
bodyproperty of yourScaffoldText: 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...
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