Flutter Basics in 3 Minute!
Tags: flutter, dart, android, programming
Published: 2021-04-05 10:34:33

To understand flutter you just need a brain and nothing else. Just like you learned your mother language by doing experience and listening from here and there, this is how simple is FLutter. Let's dive into Code.

1) import 'package:flutter/material.dart';

Let's discuss what is this...
   In simple words, a machine can not understand you if you directly communicate with it this scenario is similar to a language barrier that occurs when two people with different languages communicate.
   So, a compiler is a translator for you to communicate with the machine. Compiler converts your statement into machine language because a compiler understands both languages. Now back to the above line which states that in order to translate your code to machine language I need some prebuild libraries that contain all meaning related to your statements. 

Now let's take a technical look at this statement,

  'import' is a keyword that tells the compiler to use a prebuild library in order to understand my code.
  'package:flutter/material.dart' this statement is a path which refers the compiler to fetch this file and prepare yourself according to this because my codes contain things that described in it.
   ; this is a symbol that tells the compiler about my single statement ends here.

Let's jump toward the next milestone which is to run your program and for me, this is the interesting part.

Here is a sample of a code that I want to explain.

void main() {
  runApp(
    Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

For the compiler, there is a starting point from where the conversation starts, that starting point is the main().
    main() is a function or you can say a starting point of every program of communication because you will write your code in the main function as you can see in this coding example.
    'void' just shows that this main function is not giving anything to the system.
    {} these brackets are the scope or area for the developer to write what he wants to.
    runApp() is also a function that takes input that what should I run for you. it's like an Alladin for you that asks for your input and runs it for you.

Note: for input purpose, there is a syntax to write your input in these brackets () while for the output you need to write outside of the function name as the one with main(). This is the basic syntax for you to write code in the future.

   Just like runnApp() is taking input, the whole flutter is implemented on this syntax. Like a concept of hierarchy. 
   Center() is the starting part of our app where everything is visible for you. Center is a widget that takes input and places it in the center of it where it's situated. so we cant just put everything in these brackets () because some widgets take more than one parameter so for this purpose flutter provides a key values syntax to write your code.
   child: is a parameter of Center() that demands another widget to place in the center. so we write our child widget in front of this keyword with a colon like this: 

child: Text() 

Note: Anything you write in flutter is a widget. like Center(), Text() and so on.

Now you are probably thinking about Text() widget that contains no key but we are passing a value of the string, this is because some values are not optional so they have to be passed. In the case of Text() if you don't pass the string to text then what is the purpose of Text(), as Text() widget is nothing without a string i.e. the content that needs to be rendered on screen. There are lots of widgets with the same scenario, so no need to worry about it as you will be used to it.

Later we will discuss in more depth how to create beautiful apps UI in a flutter with simple coding.