Introduction

Welcome to this tutorial on Widgets in Flutter! The goal of this tutorial is to introduce you to the concept of widgets in Flutter, understand how they work, and why they are so central to Flutter apps.

By the end of this tutorial, you will be able to:

• Explain what widgets are in Flutter
• Understand how widgets work in Flutter
• Build basic Flutter apps using different types of widgets

Prerequisites

• Basic knowledge of Dart programming language
• Flutter SDK installed on your machine
• An IDE that supports Flutter such as Visual Studio Code or Android Studio

Step-by-Step Guide

Widgets are the basic building blocks of a Flutter app's user interface. Each widget is an immutable declaration of part of the user interface. Widgets can either be stateless or stateful.

Stateless Widgets

A stateless widget describes part of the user interface which can depend on configuration information in the widget itself and in the widget’s parent but does not depend on any runtime state.

Stateless widgets are created, then drawn once and never redrawn. They are static and cannot change once rendered.

Stateful Widgets

Stateful widgets maintain state that might change during the lifetime of the widget. Implementing a stateful widget requires at least two classes: 1) a StatefulWidget class that creates an instance of 2) a State class.

Stateful widgets are dynamic. The user interface can change dynamically when the state changes.

Code Examples

Here are some code examples to help you understand widgets better:

Stateless Widget Example

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello Flutter'),
        ),
        body: Center(
          child: Text('Hello Flutter'),
        ),
      ),
    );
  }
}

In this code snippet:

• We import the flutter material package, which is a UI toolkit for building beautiful Flutter apps.
• We define a main function that runs our MyApp widget.
• MyApp is a StatelessWidget, which will be drawn on the screen once and will not redraw unless the configuration changes.
• MaterialApp, Scaffold, AppBar, and Text are all widgets.
• The Text widget has a property of 'Hello Flutter'.

When you run this code, it will display a simple app with an app bar and text in the center of the screen that says 'Hello Flutter'.

Stateful Widget Example

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Counter App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Counter App'),
        ),
        body: Center(
          child: Text('Counter: $counter'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: incrementCounter,
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

In this code snippet:

• MyApp is a StatefulWidget, which means it can redraw its UI when its state changes.
• _MyAppState is the state object for MyApp.
• The counter variable is the state that the widget maintains.
• The incrementCounter function changes the state. When the state changes, the build method is called again with the updated state, so the UI reflects the latest state.

When you run this code, it will display a simple counter app. The counter increases each time you press the floating action button.

Summary

In this tutorial, we covered:

• What widgets are in Flutter
• The difference between Stateless and Stateful widgets
• How to create Stateless and Stateful widgets

Next steps for learning:

• Explore more types of widgets in Flutter
• Learn how to use widget composition to build complex UI

Additional resources:

• Flutter documentation: https://flutter.dev/docs/development/ui/widgets

Practice Exercises

1. Create a Stateless widget that displays 'Welcome to Flutter' on the screen.
2. Create a Stateful widget that displays a counter. The counter should decrease each time a button is pressed.

Solutions and explanations for these exercises are left for you to try. Remember, practice is key to mastering Flutter widgets. Keep practicing and building awesome apps!