Experiment-5:
a)Aim: To learn about stateful and stateless widgets.
Description:
In Flutter, everything is a widget, and widgets are either stateless or stateful:
A StatelessWidget is immutable — once built, it cannot change its appearance.
A StatefulWidget maintains a mutable state that can change during the widget’s
lifetime, and it rebuilds when that state changes.
This experiment illustrates both types of widgets with a side-by-side comparison.
Program:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Stateless vs Stateful',
home: HomeScreen(),
);
}
}
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Stateless vs Stateful Widget')),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Center(child: SimpleStatelessWidget()),
SizedBox(height: 30),
Center(child: SimpleStatefulWidget()),
],
),
);
}
}
// Stateless Widget
class SimpleStatelessWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text(
'I am Stateless',
style: TextStyle(fontSize: 20, color: Colors.blue),
);
}
}
// Stateful Widget
class SimpleStatefulWidget extends StatefulWidget {
@override
_SimpleStatefulWidgetStatecreateState() => _SimpleStatefulWidgetState();
}
class _SimpleStatefulWidgetState extends State<SimpleStatefulWidget> {
int count = 0;
@override
Widget build(BuildContext context) {
return Column(
children: [
Text(
'Stateful Count: $count',
style: TextStyle(fontSize: 20, color: Colors.green),
),
ElevatedButton(
onPressed: () {
setState(() {
count++;
});
},
child: Text('Increment'),
),
],
);
}
}
b)Aim: To implement state management using set State and Provider.
Description:
State management in Flutter handles how data changes in an app and reflects in the UI.
setState() is the simplest way for managing local state within a single widget.
Provider is a recommended and scalable state management solution for
shared/global state across multiple widgets.
This experiment demonstrates both techniques side-by-side.
Program:
Program Using setState() (Local State):
import 'package:flutter/material.dart';
void main() {
runApp(SetStateExampleApp());
}
class SetStateExampleApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'setState Demo',
home: SetStateCounter(),
);
}
}
class SetStateCounter extends StatefulWidget {
@override
_SetStateCounterStatecreateState() => _SetStateCounterState();
}
class _SetStateCounterState extends State<SetStateCounter> {
int count = 0;
void incrementCounter() {
setState(() {
count++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('setState Example')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Count: $count', style: TextStyle(fontSize: 22)),
ElevatedButton(
onPressed: incrementCounter,
child: Text('Increment'),
),
],
),
),
);
}
}
Program Using Provider (Global State):
First, add the provider dependency to pubspec.yaml:
dependencies:
flutter:
sdk: flutter
provider: ^6.0.5
Using Provider:
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() {
runApp(
ChangeNotifierProvider(
create: (_) =>CounterProvider(),
child: ProviderExampleApp(),
),
);
}
class CounterProvider with ChangeNotifier {
int _count = 0;
int get count => _count;
void increment() {
_count++;
notifyListeners(); // Tells UI to rebuild
}
}
class ProviderExampleApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Provider Demo',
home: ProviderHome(),
);
}
}
class ProviderHome extends StatelessWidget {
@override
Widget build(BuildContext context) {
final counter = Provider.of<CounterProvider>(context);
return Scaffold(
appBar: AppBar(title: Text('Provider Example')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Count: ${counter.count}', style: TextStyle(fontSize: 22)),
ElevatedButton(
onPressed: counter.increment,
child: Text('Increment'),
),
],
),
),
);
}
}
