Flutter Widget

Hey Everyone,

Today in this article we are going to learn about “Flutter Widget & It’s Use”

Introduction

In flutter everything is widget. Widgets are basically UI components used to create the UI of the application.

In framework work widgets are the central class hierarchy.

Flutter widget is immutable. We cannot change its fields because widgets themselves have no mutable state. All their fields must be final.

We can make custom widget when we want custom look of our user interface.

There is main two types of widgets are available.

• Stateless widget
• Stateful widget
  

Stateless widget:

A stateless widget is a widget that describes a portion of the user interface and creates a collection of other widgets that describe the user interface more clearly.

Stateless widgets should be used when you want to make the user interface, mostly when the UI doesn’t need to be updated.

Stateless widget not contain any state, so we can not change the user interface at run time.

“The stateless widget has a immutable state.”

Ex. All the things in Stateless widget are final (Icon, Icon Button, and Text).

Below is the coding example of stateless widget:

import 'package:flutter/material.dart';
 
void main() => runApp(
  MyApp(),
);
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(
        "Hello Word",
      );
    ),
  }
}

Stateful widget:

• Stateful widgets change dynamically.
• Stateful widgets change by the user’s input in application.
• Stateful widgets change user create any interaction like update profile picture or update their data etc.

Stateful widgets are those that change its properties during run-time.

Stateful widgets are useful when user interface that you are created on application can change dynamically, and also useful when you want to change your user interface during running application.

Ex. When a user updates their profile picture on an application, so at that time it changes the state of the application. (User input form, animation, Slider)

“The stateful widget has a mutable state.”

Below is the coding example of stateful widget:

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

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

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

  @override
  State< MyApp> createState() => _ MyAppState();
}

class _ MyAppState extends State< MyApp> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Stateful widgets are just as important as stateless widget. It is influential to understand where to use each one, as it will facilitate development.

If you want to change anything on runtime application then you should use mutable state of widget that is only available in stateful widget.

When widget state changes, the state object call setState(), for immediately change UI.

So that’s how you can use widget according to your user interface.

Hope you like this article and will help you to start working with Flutter Widget. If you have any doubts or questions do comment.

See you in the Next Article.