Flutter Widgets

In Flutter, almost everything is a widget. In this tutorial, you will learn the concept of the widget, methods to use and create it, and types of widgets in the Flutter framework.

If you are building a user interface in Flutter, it will be using widgets. There are different kinds of widgets available on Flutter which has a different kind of purpose, you have to build an app out of those widgets. 

In an app, widgets are nested inside one another, even the outermost parent component of the app is also a widget and all inside the app are also widgets. See the tree diagram and the code below to understand the structure of the app using widgets. 

The above tree of widgets will look like below on code:

import 'package:flutter/material.dart';

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

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

class HomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(

       appBar: AppBar( //appbar widget inside Scaffold
         title: Text("Welcome to Flutter")
       ),

       drawer:  Drawer(), //drawer widget inside scaffold

       floatingActionButton: FloatingActionButton( //floating action button widget
         child: Icon(Icons.add), //Icon widget inside Floating action button widget
         onPressed: (){
            //gesture listiner action
         },
       ),
       body: Container(  //container widget on body of scaffold
          child: Column( //multi chidl widget 
            children: [
                Text("Column 1"),
                Text("Column 2"),
          ],)
       )
    );
  }
}

Types of Widgets:

There are two types of widgets in flutter according to their nature.

1. Visible Widgets (Input and Output)
2. Invisible Widgets (Layout and Control)

Visible Widgets:

Visible widgets are those widgets that are easily visible whenever we put them inside the widget tree. They are used for displaying information or to take information/input from users. Some of the visible widgets are Text, Button, Image, Icon, etc.

Invisible Widgets:

Invisible widgets are those widgets that are not visible in the widget tree but are used to format, sizing, and locating the visible widgets. Some of the invisible widgets are Scaffold, Row, Column, Padding, SizedBox, etc.