Everything in flutter is a widget and every widget is an object, i.e the app itself is a widget, the app bar, the text inside the app bar, the buttons inside the app bar, the buttons in the home screen. 

To master flutter you need to master the art of building Widget trees, understanding how to put different widgets inside each other, and passing data around in order to achieve the required result on the screen.

This sounds harder than it actually is, but with practice, you can do some really fancy stuff by understanding what each widget does and how you can utilize them inside other widgets to your advantage.

 

Let's start with a blank main.dart file and try to create an app for the very first time.

 

We don't want to reinvent the wheel and write every code from scratch, thus we should utilize flutter code provided to us which covers the bulk of common components in app development, to do this we have to import material.dart which is provided by flutter.

 

import 'package:flutter/material.dart';

 

and remember we always need a main() function in every dart file because that will be the first thing that gets executed in a dart app.

but before that let's create an app object.

 

class MyApp extends StatelessWidget {

  Widget build(BuildContext context){
    return MaterialApp(
      home: Text('Hello World'),
    );
  }

}

 

stateless widgets always need a build method which is a function that returns a Widget, in the example above our build method returns a Material App.

Then we pass this to the main function and inside the main function, we call runApp which again is provided by flutter.

import 'package:flutter/material.dart';


void main(){
  runApp(MyApp());
}


class MyApp extends StatelessWidget {

  Widget build(BuildContext context){
    return MaterialApp(
      home: Text('Hello World'),
    );
  }

}

 

you may also see arrow functions "=>" which are used for functions with exactley one line of expression such as void main() => runApp(myApp());

void main() => runApp(MyApp());

 

arrow functions will not work if you have more than one line of expressions!

 

and you may see the decorator @override which states we are deliberately overriding a class method, all flutter widgets will inherit either stateful or stateless widgets and both of these objects have a build method inside them which flutter forces you to modify and override, so keep the code clean and make sure we are not overriding anything by accident we this decorator. 

 

 

import 'package:flutter/material.dart';


// void main(){
//   runApp(MyApp());
// }


void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home: Text('Hello World'),
    );
  }

}

 

There you go, that's your first simple app which basically just renders "hello World" on the screen nonetheless it's still an app and you can build on top of it to do more fancy stuff which is exactly what we are going to do in the following tutorials.

 

So we know to compose a user interface we need to mix and match different widgets in Flutter to have a nice looking application, this is called the art of creating a widget tree.

 

let's look at a basic example for the same app above.

 

we start by adding a scaffold to our materialApp, scaffold is a widget class provided by Flutter, as its name suggest this will be the scaffold of your app where you can add appbar, body, background color, and tons of other used name arguments

 

import 'package:flutter/material.dart';

// void main(){
//   runApp(MyApp());
// }

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(

      ),
    );
  }
}

 

Scaffold takes in many arguments but let's try the app bar first:

 

 
import 'package:flutter/material.dart';

// void main(){
//   runApp(MyApp());
// }

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('My Title'),
        ),
        body: Text('This is the body of the app'),
      ),
    );
  }
}

 

 

in the code above the appBar argument of scaffold is taking an AppBar widget, AppBar widget is also provided by flutter.

and the body argument of scaffold is taking a text but your options are endless with flutter, you can pass in row, columns, both.

 

 

 

Widgets:

There are 2 types of widgets in Flutter:

1. visible widgets like Text(), RaisedButton(), and anything that you can physically see, these are very important because this is ultimately what the end-user will interact with.

 

2. Invisible Widgets like Row(), Column(), and ListView(), are examples of invisible widgets, the end-user does not see these widgets directly but they are responsible for controlling the layout of the app and how the visible widgets are laid out. we use the layout widgets to pass multiple widgets to a widget for example or to add padding to a widget.

 

you can have both invisible and visible widgets like Container() which is invisible but you can style it to make it visible.