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.

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:

MyStatelessWidget(text: 'GeeksforGeeks')

Example:

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

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:

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.

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.

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.

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.

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.

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.

tinuthampi13

Follow

Improve

Article Tags :

• Dart
• Flutter