Widgets in Flutter

Widget 


Widgets are the foundation of Flutter apps. A widget is a description of part of a user interface. 
Ex. we can have a container widget inside of which is an image widget.

Flutter comes with may pre-made, and custumizable widgets.
The package ecosystem also provides with an ever-expanding collection of community made libraries and widgets.
We can customize our widgets, use widgets from other packages, or just use the built-in ones.
The built in widgets includes the material components which make it straightforward to add themes and colors, layout the app, and add user interactions.

Actually everything is widget in flutter app : Themes, Animations, Layout, Gesture Detectors and even the app itself is a widget.



StatelessWidget 

An immutable widget. All its fields are final after creation. This means that all their fields have to be final when we initialize one at compile time.
We can pass custom properties when creating our widget such as a background color, Height, Width. But once created those properties can't change. Stateless widget are not interactive.
We instantiate each widget by parsing in some parameters, some are required while some are optional.

Example of StatelessWidget 
Let's take a look at a Container : a versatile widget which we can use to subdivide our app into sections, create various shapes, decorate existing widgets and more.

var container = Container(
    color: Colors.purple,    width: 300.0,    height: 400.0,    padding: EdgeInsets.all(16.0),    margin: EdgeInsets.all(16.0),    child: Text('Hello!'), // excepts only 1 child);
/*** * Column widgets accepts more childrens. */var column = Column(
  children: <Widget>[
    Text('Hello!'),    Text('Niran'),    Text('Jan')
  ],);
var container2 = Container(
  color: Colors.purple,  width: 300.0,  height: 400.0,  padding: EdgeInsets.all(16.0),  margin: EdgeInsets.all(16.0),  child: Column(
    children: <Widget>[
      Text('Hello!'),      Text('Niran'),      Text('Jan')
    ],  ););

Note: we are allowed to create a widget without a child, this is a default behavior so you don't have to specify that child equals null. 

The widgets and renderer are all in app, meaning that the building and rebuilding of widgets happen quickly and efficiently.

StatefulWidget 

A widget that creates a State object.









Comments

Popular Posts