Flutter Essentials For Beginners

6 min readNov 2, 2020

Flutter was first announced at the Dart Developer summit in the year 2015. So it was kind of clear what google intended to do with Flutter. They wanted a common code base for both Android and iOS compatibility.

Later in 2017 Google released an alpha version and in 2018 they announced Flutter Release Preview-1. Well, this was just the beginning of flutter.

Why you should learn flutter over react native?

Flutter is faster than react native, which is the biggest advantage of flutter. React native uses Javascript bridge to communicate with native whereas Flutter doesn't need any.
Flutter has organized documentation and CLI support for setup and configuration. So you don't have to go here and there for any support.
Flutter has great resources of UI libraries or APIS whereas React Native mostly dependant on third-party libraries.
Flutter provides great support for integration and UI level testing while React-Native lacks.

Common facts about Flutter

It’s a cross-platform framework backed by google and many applications like Tencent, google assistants were built in flutter.
It provides you high performance and productivity than other frameworks.
It doesn’t have any dependency on javascript. Flutter is fully supported by dart and dart compiles it to binary code that’s why it can run into the native environment.
The best feature for flutter is it does not have any separation between the view and your code. So everything works faster than ever, for example, games respond faster and load faster.
Just like virtual DOM flutter renders UI widgets only when it necessary.
And as a bonus feature flutter has hot-reload which allows us to quickly view the UI and code changes.

Before starting with flutter you need to have knowledge of the dart programming language. Just like android works with java and Kotlin, whereas in flutter, you will work with dart language concepts. It’s a programming language that follows OOP concepts and most of the syntax will be quite familiar if you have knowledge of any prior programming language. So it will be good if you just have some basics about dart.

Essentials

Every UI thing is a widget. Like Center, Text, Padding, Row/Column etc.these are examples of the widget. Flutter also has a so-called Widget tree which is like adding widgets one inside another.
Widgets are distinguished by two different segments.
StateLess — Stateless widgets cannot change their state during the runtime of the app, which means the widgets cannot be redrawn while the app is in action.
StateFul — Every StateFul widget has its own state which is initiated by calling the createState() method. A subclass of State can override initState to do work that needs to happen just once.

Note [A StateLess widget can hold the StateFul widget as its children while the Parent state still is the StateLess.]

Performance-wise, a StatelessWidget is almost identical to a StatefulWidget with an empty State. Although, there indeed is a small gain when using StatelessWidget here. But it’s ridiculously small:

The difference between them can be summarized as calling an empty function vs not calling it. It’s something but absolutely doesn’t matter.

The reason being, internally the implementation of StatefulWidget and StatelessWidget is almost the same.

StatelessWidget does have all the extra life-cycles that StatefulWidget possesses. It has an “initState”/”dispose”. Even a setState! They are just not part of the public API.

StatelessWidget

In Stateless widget, The “build” method can be called only ONCE while the app is in action, which is responsible for drawing the widgets onto the device screen. [Note: If you want to redraw the Stateless Widget, then you will need to create a new instance of the widget.]

TIPS: You can quickly build a Stateless Widget in VS Code or Android Studio by using the shortcut “stl”.

Stateless widgets are useful when the part of the user interface that we are describing does not depend on anything other than the configuration information in the object itself and the BuildContext in which the widget is inflated.

Some examples of Stateless widgets are as follows:

An example of a Stateless widget looks like:

class MyApp extends StatelessWidget {
  @override
 Widget build(BuildContext context) {
  return MaterialApp(
   title: "Student List",
   debugShowCheckedModeBanner: false,
   theme: ThemeData(primarySwatch: Colors.indigo),
   home: StudentList(),
  );
 }
}

The last one to mention here is that you will always see that a StatelessWidget will always have a build method that takes the BuildContext as param and in return, it provides the application UI.

StatefulWidget

In some simple words, it’s a kind of widget that does require some kind of state or mutable state. This is the simplest answer and you will find many other things about what stateful widgets are.

This widget can change its state multiple times. The code structure kind of looks like

class StudentList extends StatefulWidget {
 @override
 State<StatefulWidget> createState() {
  //widget state
  return StudentListState();
 }
}
class StudentListState extends State<StudentList> {
 @override
 Widget build(BuildContext context) {
 }
}

You can see the difference between stateless and stateful widgets in these two examples.StatelesWidget has a build() method directly inside but StatefulWidget requires a createState() method which provides the mutable state. I have attached a widget tree for a stateful widget you can find it beneath.

Some of the StatefulWidgets are,

Dispose method

Subclasses should override this method to release any resources retained by this object (e.g., stop any active animations).

You can find a demo usage in the demo below.

Demo implementation of dispose method

@override
void dispose() {
 nameController.dispose();
 dobController.dispose();
 fathersNameController.dispose();
 mothersNameController.dispose();
}

Dispose kind of works like onDestroy() in native android development. Those who are learning flutter having experience in mobile application development can learn flutter easily. I am not saying those who have no experience in any mobile development can not learn flutter easily, I am just saying in real-life usage perspective.

Important widgets to use:

Well, you can imagine that everything in flutter is a widget. Following are some of the most used and effective widgets in flutter along with the link, I have collected those widgets from the flutter official youtube channel. Although I have included the top 31 most used flutter widgets that will get the job done. You will find most of the widget implementation here.

So that was it. I was planning to make this for my own purpose, later I thought that I can share with all of you and help you guys to understand the flutter and dart concepts.

And if you feel that you learned something from this doc, you can follow me on GitHub, and don’t forget to give me a star in this repo. And for better understanding, you can visit the links that were given in the references section.