What are Widgets Available in Flutter?

Flutter is a mobile app development framework that allows developers to create beautiful and responsive user interfaces with ease. This is made possible through the use of Flutter widgets, which are the building blocks of every Flutter application. In Flutter, widgets are the fundamental building blocks of the user interface. They are a collection of reusable user interface elements that can be combined to create complex layouts and interactions. The power of Flutter widgets lies in their ability to be customized, composed, and animated to create visually stunning and responsive user interfaces.

There are two main types of Flutter widgets – stateful and stateless. Stateless widgets are those that don’t change their properties over time and are therefore static. They are typically used for displaying simple information such as text or images. On the other hand, stateful widgets can change their properties and be rebuilt based on those changes. They are typically used for displaying dynamic information and for adding interactivity to the user interface.

Example:

The Layout Tree of the basic app screen using Stateless Widgets.

Dart

import 'package:flutter/material.dart';

class MyStatelessWidget extends StatelessWidget {
  final String text;

  MyStatelessWidget({this.text});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(text),
    );
  }
}

To use this widget in your app, you can simply create an instance of it and pass in the desired text:

Dart

MyStatelessWidget(text: 'GeeksforGeeks')

Example:

The Layout Tree of the basic app screen using Stateful Widgets.

Dart

import 'package:flutter/material.dart';

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int counter = 0;

  void incrementCounter() {
    setState(() {
      counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Counter: $counter'),
        RaisedButton(
          child: Text('Increment'),
          onPressed: incrementCounter,
        ),
      ],
    );
  }
}

To use this widget in your app, you can simply create an instance of it:

Dart

MyStatefulWidget()

These are some of the most commonly used Flutter widgets:

1. Container Widget

The Container widget is used to create a box-shaped element that can be used to contain other widgets. It can be customized with properties such as padding, margin, border, and background color.

Dart

Container(
  padding: EdgeInsets.all(18.0),
  margin: EdgeInsets.symmetric(vertical: 18.0),
  decoration: BoxDecoration(
    border: Border.all(color: Colors.black),
    borderRadius: BorderRadius.circular(9.0),
    color: Colors.green,
  ),
  child: Text('GeeksforGeeks'),
)

2. Text Widget

The Text widget is used to display text in a Flutter application. It can be customized with properties such as font size, font weight, color, and alignment.

Dart

Text(
  'GFG',
  style: TextStyle(
    fontSize: 26.0,
    fontWeight: FontWeight.bold,
    color: Colors.black,
  ),
)

3. Image Widget

The Image widget is used to display images in a Flutter application. It can be used to display both local and network images. The Image widget can also be customized with properties such as size, fit, and alignment.

Dart

Image.asset(
  'assets/images/image.png',
  width: 175.0,
  height: 175.0,
  fit: BoxFit.cover,
)

4. Row and Column Widgets

The Row and Column widgets are used to create horizontal and vertical layouts, respectively. They can be used to combine multiple widgets into a single row or column and are useful for creating complex user interfaces. The Row and Column widgets can also be customized with properties such as main-axis alignment and cross-axis alignment.

Dart

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text('Hello'),
    SizedBox(width: 16.0),
    Text('World'),
  ],
)

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text('Hello'),
    SizedBox(height: 16.0),
    Text('World'),
  ],
)

5. ListView Widget

The ListView widget is used to create a scrollable list of widgets. It’s commonly used to display large amounts of data in a Flutter application. The ListView widget can be customized with properties such as scroll direction, padding, and item builder.

Dart

ListView.builder(
  itemCount: items.length,
  itemBuilder: (BuildContext context, int index) {
    return ListTile(
      leading: Icon(Icons.star),
      title: Text(items[index]),
    );
  },
)

These are just a few examples of the many types of Flutter widgets available for creating beautiful and responsive user interfaces.