Flutter Widgets is a modern framework that is inspired by React JS. Flutter's central idea is that build UI out of the widgets. Widgets describe how their view should appear based on their current configurations and state. Upon a change in a widget's state, the widget reconstructs its description. The framework then compares it with the previous description to identify the minimal adjustments required in the underlying render tree for transitioning from one state to another.

The minimal Flutter App simply calls the runApp() function with a widget.

import 'package:flutter/material.dart';

void main() {
  runApp(
    const Center(
      child: Text(
        'Dilshan`s Blog',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

The runApp() function designates the provided Widget as the root of the widget tree. In this specific scenario, the widget tree comprises two widgets: the Center widget and its child, the Text widget. The framework ensures that the root widget occupies the entire screen, resulting in the text "Dilshan`s Blog" being centered on the screen. It's important to note that in this case, the text direction must be specified. When using the MaterialApp widget, this aspect is automatically handled for you, as shown later on.

Based on those characteristics, flutter widgets are divided into two main categories.

• StatelessWidget

• StatefullWdiget

StatelessWidget

The Stateless widgets in Flutter are widgets that don’t maintain any mutable state. They are designed to be immutable and rebuild each time the framework needs to update the UI. They are suitable for static, unchanging views or simple animations. They can be created using the StatelessWidget class and have a single build method that returns a widget tree. here is the example for StatelessWidget.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
    const MyApp({Key? key}) : super(key: key);

    @override
    Widget build(BuildContext context) {
        return Container(
            child: Text("This is a Stateless Widget"),
        );
    }
}

StatefullWdiget

A stateful widget is dynamic for instance, it may change its look in reaction to events created by user input or data input. Stateful widgets include Checkbox, Radio, Slider, InkWell, Form, and TextField.

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
    const MyApp({Key? key}) : super(key: key);

    @override
    _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

    @override
    Widget build(BuildContext context) {
        return Container(
            child: Text("This is a Statefull Widget"),
        );
    }
}

Basic Widgets of Flutter

Among the strong basic widgets that come with Flutter are the following ones that are frequently used:

• Text - You can create a run of stylized text within your application with the Text widget.

• Container - You can create a rectangular visual element using the Container widget. A BoxDecoration can be used to add a backdrop, border, or shadow to a container. Margin, padding, and size restrictions can also be imposed on a container. Furthermore, a matrix can be used to change a Container in three dimensions.

• Column & Row - You can create flexible layouts in both the vertical (Column) and horizontal (Row) orientations using these flex widgets. These objects' designs are based on the flexbox layout concept found on the internet.

• Stack - Widgets can be stacked on top of one another in paint order using a Stack widget instead of to being linearly oriented (horizontally or vertically). After that, you can reposition the children of a stack with respect to the left, top, right, or bottom edges of the stack by using the Positioned widget on those children. Stacks are built on the absolute positioning layout approach seen on the web.

Material Widgets

A collection of Flutter widgets known as Material Widgets use Material Design, Google's visual design language. They are made to have a unified appearance and feel across iOS and Android devices. Several typical Material Widgets consist of:

• Scaffold

• AppBar

• TextField

• Drawer

• SnackBar

• BottomNavigationBar

• IconButton

• RaisedButton

These widgets are commonly used in Flutter apps to provide a familiar look and feel that follows Material Design guidelines.

Cupertino widgets

A collection of Flutter widgets known as "Cupertino widgets" follow the style and feel of Apple's iOS user interface. They feature widgets like CupertinoButton, CupertinoAlertDialog, and CupertinoSlider and are made to have a unified appearance and feel across iOS and Android devices. When creating cross-platform apps that have to follow the iOS design guidelines, these widgets come in handy.