in this post I will introduce you to the world of flutter widgets and how to start with some basic widgets

as we all know flutter takes inspiration from React in which we build our app based on component tree but here in flutter we build a widget tree app instead

we know that flutter runApp() method is the  starting point inside main , this method needs a root widget as top level widget tree

a simple example to get started is :

import 'package:flutter/material.dart';

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

the root widget tree here is Center and it takes as argument a child which can be any other flutter widget in this example we put Text as child and takes as argument text and textDirection

we can create many widgets and any one has it’s own properties more described in flutter docs

so the purpose of flutter is not to know all widgets but the concepts matters and when we start making our apps we will set a widget tree and search for the widget based on our needs that will be sufficient

in this post I will give you some widgets to get started , for more details you will have to visit the official doc

Scaffold : this is a basic material visual layout structure we will use it a lot to build our apps it implements a basic visual layout and takes  arguments such as appBar, body, FloatingActionButton ,Drawer, snackBar

Text : The Text widget lets you create a styled text within your application

Row : These flex widget let you create flexible layouts in both the horizontal direction

Column : These flex widget let you create flexible layouts in the vertical direction.

Container :this widget lets you create a rectangular visual element and  can be decorated with a BoxDecoration, such as a background, a border, or a shadow.

it can have also margins, padding, and constraints applied to its size. In addition, a Container can be transformed in three dimensional space using a matrix.

lets build a sample example to understand more :

lets start create main.dart file in our lib folder :

to use flutter built in widgets we will need to import material.dart package

import 'package:flutter/material.dart';

our main starting method

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

lets create our stateless widget class called MyApp:

class _MyApp extends StatelessWidget {
@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Sample app'),
        ),
        body: Center(
          child: Text(
            'Hello, everybody!',
            textDirection: TextDirection.ltr,
          ),
        ),
      ),
    );
  }
}

and the this is the result :