Widgets In Flutter is used for create the design/layout of application.

Each element on the screen of the Flutter app is a widget. Widgets in flutter help us to create the view with the given their configuration and state.

In flutter to rebuild the widgets, we need to set the state.

Set state function rebuilds the whole Widgets in the controller.

But set state makes the application slow. And widgets follow the tree structure to design the view.

You may also check our Flutter app development

Basic Widgets

Text->

Text widgets work as labels. we are using a text widget for labeling.

Text(
  ‘Hello',
  textAlign: TextAlign.center,
  overflow: TextOverflow.ellipsis,
  style: const TextStyle(fontWeight: FontWeight.bold),
)

Text(

‘Hello',

textAlign: TextAlign.center,

overflow: TextOverflow.ellipsis,

style: const TextStyle(fontWeight: FontWeight.bold),

)

Row/Column->

The row is used for creating the view in the horizontal direction.

Row(
children: [

      Container(height 100, color: Colors.red);
      Container(height 100, color: Colors.red);
      Container(height 100, color: Colors.red);
  ]
);

Row(

children: [

Container(height 100, color: Colors.red);

]

);

The column is used for creating the view in the vertical direction.

Column( 
   children: [ 
       Container(height 100, color: Colors.red); 
       Container(height 100, color: Colors.red); 
       Container(height 100, color: Colors.red); 
  ]  
);

Column(

children: [

Container(height 100, color: Colors.red);

]

);

So both make the easy to create the view in the horizontal and vertical directions.

Container->

The container is used to create the rectangular view.

And containers have a property to decorate the box.

So the help of a container we can set the margin and padding of view.

Because containers have color property we can set the background color of the view.

Container(
  constraints: BoxConstraints.expand(
    height: Theme.of(context).textTheme.headline4!.fontSize! * 1.1 + 200.0,
  ),
  padding: const EdgeInsets.all(8.0),
  color: Colors.blue[600],
  alignment: Alignment.center,
  child: Text('Hello World',
    style: Theme.of(context)
        .textTheme
        .headline4!
        .copyWith(color: Colors.white)),
  transform: Matrix4.rotationZ(0.1),
)

Container(

constraints: BoxConstraints.expand(

height: Theme.of(context).textTheme.headline4!.fontSize! * 1.1 + 200.0,

padding: const EdgeInsets.all(8.0),

color: Colors.blue[600],

alignment: Alignment.center,

child: Text('Hello World',

style: Theme.of(context)

.textTheme

.headline4!

.copyWith(color: Colors.white)),

transform: Matrix4.rotationZ(0.1),

)

Types of widgets

There are two types of widgets in a flutter.

1-> Stateless widgets

A stateless widget never changes. Icon, IconButton, and Text are examples of stateless widgets.

2-> Stateful widgets

A stateful widget is dynamic: for example, it can change its appearance in response to events triggered by user interactions or when it receives data. Checkbox, Radio, Slider, InkWell, Form, and TextField are examples of stateful widgets. Stateful widgets subclass StatefulWidget.

And thanks for reading this blog, for detail info please click here

For more blogs please click here.

So pls follow the above step and And if you have any issue or suggestion you can leave your message in the comment section I will try to solve this.

jitendra kumar 1 May 2023

. . .

Widgets In Flutter