5. a) Learn about stateful and stateless widgets.

Widgets in Flutter are the fundamental components that describe the UI of an app.
They define how elements should look and behave, but they don't store the UI’s
changing data. Widgets can be stateless (static, fixed appearance) or stateful
(dynamic, changing based on user interaction or other events).

NOTE: Stateful widgets do store data that can change over time, but the widget
itself still doesn't directly store that changing data. Instead, the changing data
(or "state") is stored in a separate State object, which is associated with the widget.
So, in a stateful widget:
 The widget itself is immutable, meaning its configuration doesn't change after
it's created.
 The mutable data (state) is stored in a separate State class, and this state is
what can change.
 When the state changes, the widget rebuilds to reflect the new state

Think of a stateless widget as a static picture that doesn't change.

A stateful widget is like a picture frame that can change its content depending on the data

Stateless Widget

A stateless widget is a widget that does not store any state (i.e., data that can
change over time). The UI is built once and is not affected by any changes in the
state of the widget after it's created. The content of a stateless widget is immutable
during its lifecycle.

 Key Characteristics:
o Its configuration is fixed.
o It doesn't need to manage or update its state.
o It is ideal for displaying static content that doesn’t change, like icons,
text, or a static button.
o Once created, the widget cannot rebuild itself based on user interaction
or internal changes.
 Example:

import 'package:flutter/material.dart';

//This function triggers the build process

void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: const Color.fromARGB(255, 230, 255, 201),
appBar: AppBar(
leading: const Icon(Icons.menu),
backgroundColor: Colors.green,
title: const Text(
"Stateless Widgets",
textAlign: TextAlign.start,
),
), // AppBar
body: const Center(
child: Text(
"Stateless Widget",
style: TextStyle(color: Colors.black, fontSize: 30),
),
), // Container
), // Scaffold
); // MaterialApp
}
}
2. Stateful Widget

A stateful widget is a widget that can change its state during its lifetime. The widget can
rebuild itself when the state changes, which is useful for dynamic content like user
interactions, animations, or data fetching. The state of the widget is encapsulated in a separate
class, allowing the widget to be rebuilt without losing its current state.

 Key Characteristics:
o It can change its appearance dynamically.
o The state of the widget can change over time, and the widget can rebuild when that
state changes.
o The state is held in a State object, which is mutable.
o It's used for components like forms, animations, counters, etc.

 Structure of a Stateful Widget:

 The StatefulWidget class is immutable and defines the widget.

  The State class is where the mutable state is stored, and it has a build method that
rebuilds the widget when the state changes.

Example 1:

import 'package:flutter/material.dart';

//This function triggers the build process

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

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

@override
// ignore: library_private_types_in_public_api
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Color.fromARGB(255, 200, 255, 201),
appBar: AppBar(
leading: const Icon(Icons.menu),
backgroundColor: Colors.lightBlue,
title: const Text(
"Staeful",
textAlign: TextAlign.start,
),
), // AppBar
body: const Center(
child: Text(
"StateFul Widget",
style: TextStyle(color: Colors.black, fontSize:
30),
),
), // Container
), // Scaffold
); // MaterialApp
}
}

Example 2 :

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Counter(),
);
}
}
class Counter extends StatefulWidget {
@override
_CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {

int _counter = 0;

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

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Stateful Widget Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
//style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}