Widgets in Flutter

Introduction

In Flutter, everything is a widget. The central idea is that you build your UI out of widgets. Widgets describe what their view should look like given their current configuration and state. In Flutter a widget is either stateless or stateful. A widget is stateful when it can change for instance when a user interacts with it. On the other hand, a stateless widget never changes. Such widgets are for example Icon and IconButton. A stateful widget is dynamic and it can change its appearance in response to events triggered by user interactions or when it receives data from different sources. Examples are Slider, TextField and Checkbox. When the widget’s state changes, the state object calls setState(), telling the framework to redraw the widget.

Basic widgets

Flutter comes with a suite of powerful basic widgets, of which the following are commonly used:

Text

The Text widget lets you create a run of text within your application.

Row, Column

These flex widgets let you create flexible layouts in both the horizontal (Row) and vertical (Column) directions. The design of these objects is based on the web’s flexbox layout model.

Stack

Instead of being linearly oriented (either horizontally or vertically), a Stack widget lets you place widgets on top of each other in paint order. You can then use the Positioned widget on children of a Stack to position them relative to the top, right, bottom, or left edge of the stack. Stacks are based on the web’s absolute positioning layout model.

Flutter app

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
    //Flutter provides a number of widgets that help you build apps that follow Material Design. A 
    //Materialapp starts with the MaterialApp widget, which builds a number of useful widgets at the root of 
   //your app
      title: 'Flutter Demo App',
      theme: ThemeData(
        // This is the theme of your application.
        primarySwatch: Colors.green,
      ),
      home: const HomeWidget(),
    );
  }
}
//Implementation of stateful widget
//A stateful widget is implemented by two classes: a subclass of StatefulWidget and a subclass of State.
//
//this is a subclass of [StatefulWidget]
class HomeWidget extends StatefulWidget {
  const HomeWidget({super.key});

  @override
  State<HomeWidget> createState() => _HomeWidgetState();
}

// this is a subclass of [State] 
//it stores the mutable data that can change over the lifetime of the widget

class _HomeWidgetState extends State<HomeWidget> {
  int _ages = 0;

  void _increaseAges() {
    setState(() {
      // This call to setState tells the Flutter framework
      // that something has changed in this State, which
      // causes it to rerun the build method below so that
      // the display can reflect the updated values. If you
      // change _ages without calling setState(), then
      // the build method won't be called again, and so
      // nothing would appear to happen
      _ages++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Age'),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Text(
          'I am $_ages years old',
          style: Theme.of(context).textTheme.headline4,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _increaseAges,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}