Widgets in Flutter: An Overview with Code Examples

Widgets are the building blocks of any Flutter app, and they are essential for creating visually appealing and interactive user interfaces. A widget is a reusable component that represents a visual element, an interaction, or both. In Flutter, everything is a widget, from simple text to complex animations. In this blog, we'll explore the different types of widgets available in Flutter and learn how to use them to build user interfaces.

1. StatelessWidget

A StatelessWidget is a widget that is immutable, meaning that its properties cannot be changed after it is created. StatelessWidgets are used to display information that is not affected by user interaction. A good example of a StatelessWidget is a text widget, which displays text on the screen.

class MyTextWidget extends StatelessWidget {

final String text;

MyTextWidget({this.text});

@override

Widget build(BuildContext context) {

return Text(text);

}

}

2. StatefulWidget

A StatefulWidget, on the other hand, is a widget that can change its properties after it is created. StatefulWidgets are used to display dynamic information that can change based on user interaction. For example, a text field is a StatefulWidget because the text it displays can change as the user types in the field.

class MyTextFieldWidget extends StatefulWidget {

final String initialText;

MyTextFieldWidget({this.initialText});

@override

_MyTextFieldWidgetState createState() => _MyTextFieldWidgetState();

}

class _MyTextFieldWidgetState extends State<MyTextFieldWidget> {

String _text;

@override

void initState() {

_text = widget.initialText;

super.initState();

}

@override

Widget build(BuildContext context) {

return TextField(

onChanged: (value) {

setState(() {

_text = value;

});

},

decoration: InputDecoration(

labelText: "Text",

hintText: "Enter text here",

),

);

}

}

3. Container Widget

The Container widget is one of the most basic widgets in Flutter and is used to create a rectangular box. The Container widget can be used to hold other widgets, add padding, and apply a border.

Container(

padding: EdgeInsets.all(16.0),

margin: EdgeInsets.all(16.0),

decoration: BoxDecoration(

border: Border.all(

width: 1.0,

color: Colors.black,

),

),

child: Text("Hello World"),

)

4. Column and Row Widgets

The Column and Row widgets are used to arrange widgets in a vertical or horizontal direction, respectively. These widgets are used to create layouts and are often used in combination with other widgets.

Column(

children: [

Container(

height: 100.0,

color: Colors.red,

),

Container(

height: 100.0,

color: Colors.green,

),

Container(

height: 100.0,

color: Colors.blue,

),

],

),

Row(

children: [

Container(

width: 100.0,

color: Colors.red,

),

Container(

width: 100.0,

color: Colors.green,

),

Container(

width: 100.0,

color: Colors.blue,

),

],

),

5. ListView Widget

The ListView widget is used to display a scrolling list of widgets. The ListView widget can be used to display a list of items, such as images, text, or other widgets.

ListView(

children: [

Container(

height: 100.0,

color: Colors.red,

),

Container(

height: 100.0,

color: Colors.green,

),

Container(

height: 100.0,

color: Colors.blue,

),

],

),

6. Button Widget

The Button widget is used to create buttons that the user can tap to interact with the app. The Button widget can be customized to change its appearance and behavior.

RaisedButton(

onPressed: () {

print("Button Pressed");

},

child: Text("Press Me"),

),

7. Image Widget

The Image widget is used to display images in a Flutter app. The Image widget can be used to display images from the network, from assets, or from other sources.

Image.network( "https://picsum.photos/200", fit: BoxFit.cover, )

In conclusion, Flutter provides a rich set of widgets that can be used to build visually appealing and interactive user interfaces. From simple text to complex animations, everything in Flutter is a widget, and they are essential for building Flutter apps. I hope this blog has given you a good overview of the different types of widgets available in Flutter and how to use them. Happy coding!