![Image Image Image
Text('Counter: $counter'),
ElevatedButton(
onPressed: () {
setState(() {
counter++;
});
},
child: Text('Increment'),
),
],
);](https://image.slidesharecdn.com/module41-250128153013-a2ba6e9c/85/MODULE-4-1-pptx-flutter-dart-programming-7-320.jpg)
![children: [
Text('Counter: $counter'),
ElevatedButton(
onPressed: incrementCounter,
child: Text('Increment'),
),
],
);
}
}](https://image.slidesharecdn.com/module41-250128153013-a2ba6e9c/85/MODULE-4-1-pptx-flutter-dart-programming-11-320.jpg)
MODULE 4 (1).pptx flutter dart programming
- 4. State management is a critical concept in Flutter development. It involves maintaining and updating the state of an application in response to user interactions or external changes while ensuring that the UI reflects the current state. What is a State? â—Ź State refers to data or information that can change during the lifetime of the application. â—Ź Example of state: â—‹ The current user input in a text field. â—‹ Whether a checkbox is checked or not. â—‹ The current screen/page in a navigation flow.
- 5. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem ipsum has been industry’s standard dummy text ever since the 1500s, when an unknown printer took a gallery of ty. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem ipsum has been industry’s standard dummy text ever since the 1500s, when an unknown printer took a gallery of type. Image ● Stateless Widget: Has immutable state. Its state does not change once created. class MyStatelessWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Text('I am stateless'); } } Stateless vs Stateful Widgets
- 6. Stateful Widget: Has mutable state that can change during its lifecycle. class MyStatefulWidget extends StatefulWidget { @override _MyStatefulWidgetState createState() => _MyStatefulWidgetState(); } class _MyStatefulWidgetState extends State<MyStatefulWidget> { int counter = 0; @override Widget build(BuildContext context) { return Column( children: [ Image
- 7. Image Image Image Text('Counter: $counter'), ElevatedButton( onPressed: () { setState(() { counter++; }); }, child: Text('Increment'), ), ], );
- 8. } } Why is State Management Important? ● Ensures a clear separation of UI and business logic. ● Provides a structured way to manage the application’s dynamic data. ● Makes the code easier to read, maintain, and debug. Types of State in Flutter a) Ephemeral (Local) State ● State that is specific to a single widget and is temporary. ● Example: Whether a checkbox is checked or not. ● Managed using StatefulWidget.
- 9. b) App-Wide (Global) State â—Ź State shared across multiple widgets or screens. â—Ź Example: User authentication status or theme settings. â—Ź Requires external state management solutions. Common State Management Approaches a) setState (Built-in State Management) â—Ź Simplest and most basic way to manage state. â—Ź Used for ephemeral state in StatefulWidget. class CounterApp extends StatefulWidget { @override _CounterAppState createState() => _CounterAppState();
- 10. } class _CounterAppState extends State<CounterApp> { int counter = 0; void incrementCounter() { setState(() { counter++; }); } @override Widget build(BuildContext context) { return Column(
- 11. children: [ Text('Counter: $counter'), ElevatedButton( onPressed: incrementCounter, child: Text('Increment'), ), ], ); } }
- 12. b) InheritedWidget and InheritedModel â—Ź Used for propagating state to descendant widgets. â—Ź Typically used for small-scale state sharing. class CounterProvider extends InheritedWidget { final int counter; final Function increment; CounterProvider({required this.counter, required this.increment, required Widget child}) : super(child: child); @override bool updateShouldNotify(InheritedWidget oldWidget) => true; static CounterProvider? of(BuildContext context) {
- 13. return context.dependOnInheritedWidgetOfExactType<CounterProvider>(); } } c) Provider (Recommended by Flutter) â—Ź A wrapper around InheritedWidget that makes state management simpler and more scalable. â—Ź Widely used for both ephemeral and global state management. import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; class Counter with ChangeNotifier { int value = 0;
- 14. void increment() { value++; notifyListeners(); } } void main() { runApp( ChangeNotifierProvider( create: (context) => Counter(), child: MyApp(), ), );
- 15. ); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: CounterScreen(), ); } }
- 16. class CounterScreen extends StatelessWidget { @override Widget build(BuildContext context) { final counter = Provider.of<Counter>(context); return Scaffold( appBar: AppBar(title: Text('Provider Example')), body: Center( child: Text('Counter: ${counter.value}'), ), floatingActionButton: FloatingActionButton( onPressed: counter.increment, child: Icon(Icons.add),
- 17. child: Icon(Icons.add), ), ); } } Hands-On Activities â—Ź Activity 1: Build a counter app using `setState`. â—Ź Activity 2: Create a to-do list app with Provider to manage the list of tasks. â—Ź Activity 3: Extend the to-do list to include filters (e.g., completed, pending tasks).
- 18. THANK YOU +91 78150 95095 [email protected] www.codemithra.com