3- Flutter | Widgets

Widgets in Flutter: Exploring Stateless vs. Stateful Widgets, Container Widget, Row and Column Widgets, ListView Widget, GridView Widget, and Image Widget

Widgets are the fundamental building blocks for creating user interfaces in Flutter. In Flutter, there are two types of widgets: Stateless and Stateful Widgets. In this article, we will explore these widget types and delve into some commonly used widgets, starting from basic ones and gradually progressing to more advanced ones.

Stateless vs. Stateful Widgets

In Flutter, Stateless Widgets cannot change their state, and their configuration remains unchanged. These widgets are typically used for displaying static content, such as text or images. Here’s an example of a simple Stateless Widget:

import 'package:flutter/material.dart';

class MyTextWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, World!');
  }
}

On the other hand, Stateful Widgets can change their state, and their configuration can be updated. These widgets are commonly used for displaying content that changes in response to user interactions. For example, you can use a Stateful Widget to create a counter application. Here’s an example of a simple Stateful Widget:

import 'package:flutter/material.dart';

class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

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

Container Widget

The Container widget is used to arrange, shape, and decorate other widgets. It allows you to set properties such as size, padding, and background color. Here’s an example of using a Container Widget:

import 'package:flutter/material.dart';

class MyContainerWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      color: Colors.blue,
      child: Text('Container Widget', style: TextStyle(color: Colors.white)),
    );
  }
}

Row and Column Widgets

Row and Column widgets are used for horizontal and vertical layouts, respectively. Row arranges its children in a horizontal manner, while Column arranges its children in a vertical manner. Here’s an example of Row and Column widgets:

import 'package:flutter/material.dart';

class MyRowColumnWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Icon(Icons.person),
        SizedBox(width: 10),
        Text('John Doe'),
      ],
    );

    // or

    return Column(
      children: <Widget>[
        Text('Title'),
        SizedBox(height: 10),
        Text('Content'),
      ],
    );
  }
}

ListView Widget

The ListView widget is used to create a scrollable list. You can dynamically add or remove items from the list. Here’s an example of using ListView widget:

import 'package:flutter/material.dart';

class MyListViewWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        ListTile(
          leading: Icon(Icons.camera),
          title: Text('Camera'),
        ),
        ListTile(
          leading: Icon(Icons.photo),
          title: Text('Photo'),
        ),
        ListTile(
          leading: Icon(Icons.video_library),
          title: Text('Video'),
        ),
      ],
    );
  }
}

GridView Widget

The GridView widget is used to create a grid view that arranges its children in rows and columns. You can specify the number of rows and columns for the grid. Here’s an example of using GridView widget:

import 'package:flutter/material.dart';

class MyGridViewWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 2,
      children: <Widget>[
        Container(color: Colors.red),
        Container(color: Colors.blue),
        Container(color: Colors.green),
        Container(color: Colors.yellow),
      ],
    );
  }
}

Image Widget

The Image widget is used to display an image. You can load images from various sources such as local files, network URLs, or memory. Here’s an example of using the Image widget:

import 'package:flutter/material.dart';

class MyImageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Image.network('https://example.com/image.jpg');
  }
}

In this article, we have explored the basics of widgets in Flutter and covered different types of widgets. We have discussed the differences between Stateless and Stateful Widgets and provided examples of Container, Row, Column, ListView, GridView, and Image widgets. These widgets provide great flexibility in building user-friendly and visually appealing interfaces for your Flutter applications.