Stateful Vs Stateless Widgets

5. Stateful Vs Stateless Widgets

In this tutorial, we will explore the concepts of Stateful and Stateless widgets in Flutter. Understanding the distinction between these two types of widgets is crucial for developing dynamic and interactive user interfaces. We will provide examples of both Stateful and Stateless widgets to illustrate their usage.

Prerequisites:

Before you begin, ensure that you have Flutter and your development environment set up. If not, refer to the "Setting up Flutter Development Environment Tutorial" to get started.

What is a Widget in Flutter?

In Flutter, everything is a widget. A widget is a basic building block for constructing the user interface of your app. Widgets can be as simple as a piece of text or as complex as an entire screen. Flutter provides a wide range of built-in widgets that you can use to create your app's user interface.

Stateless Widgets:

Stateless widgets are widgets that do not maintain any mutable state. Once they are created, they cannot change. Stateless widgets are used for displaying static content or content that does not depend on changes in data or user interactions.

Example: Stateless Widget

Let's create a simple 'HelloWorld' Stateless widget that displays a static message:

1. Create a New Flutter Project: If you haven't already, create a new Flutter project as explained in the "Your First Flutter App Tutorial."

2. Open 'lib/main.dart': Open your project's 'lib/main.dart' file and define the 'HelloWorld' Stateless widget as follows:

import 'package:flutter/material.dart';

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

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

class HelloWorld extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      'Hello, World!',
      style: TextStyle(fontSize: 24),
    );
  }
}

3. Run the App: Run the app on an emulator or physical device using 'flutter run'.

Stateful Widgets:

Stateful widgets can change their appearance or behavior over time in response to data changes or user interactions. They maintain a separate state object that can be updated.

Example: Stateful Widget

Let's create a simple counter app using a Stateful widget:

1. Create a New Flutter Project: If you haven't already, create a new Flutter project as explained in the "Your First Flutter App Tutorial."

2. Open 'lib/main.dart': Open your project's 'lib/main.dart' file and define 'CounterApp' Stateful widget as follows:

import 'package:flutter/material.dart';

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

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

class CounterApp extends StatefulWidget {
  @override
  _CounterAppState createState() => _CounterAppState();
}

class _CounterAppState extends State {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          'Counter Value:',
          style: TextStyle(fontSize: 24),
        ),
        Text(
          '$_counter',
          style: TextStyle(fontSize: 48),
        ),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

In this code:

• 'CounterApp' is a Stateful widget that displays a counter value.
• '_CounterAppState' is the associated state class that manages the counter value.
• We use the 'setState' method to update the counter value when the "Increment" button is pressed.