Scribd
Upload
13 views6 pages

Setstate and Provider

Uploaded by

kakkarjahnvi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views6 pages

Setstate and Provider

Uploaded by

kakkarjahnvi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

SetState and Provider

1. Using setState

We'll start with a simple counter app using setState to manage the state locally within a
widget.

Program:

import 'package:flutter/material.dart';

void main() {

runApp(MyApp());

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

home: CounterScreen(),

);

class CounterScreen extends StatefulWidget {

@override

_CounterScreenState createState() => _CounterScreenState();

class _CounterScreenState extends State<CounterScreen> {

int _counter = 0;
void _incrementCounter() {

setState(() {

_counter++;

});

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: Text('Counter using setState')),

body: Center(

child: Text(

'Counter: $_counter',

style: TextStyle(fontSize: 24),

),

),

floatingActionButton: FloatingActionButton(

onPressed: _incrementCounter,

child: Icon(Icons.add),

),

);

2. Using Provider:

Next, let's refactor the code to use Provider for global state management. First, add
provider to your pubspec.yaml dependencies:
Program: yaml

dependencies:

flutter:

sdk: flutter

provider: ^6.0.5

Flutter project structure with the Counter model in its own file:

lib/

├── main.dart // Main app file

├── models/

│ └── counter.dart // Counter model file

└── screens/

└── counter_screen.dart // Counter screen file

step2: Then, create a new class for the Counter model, which will manage the state:

program: lib->Models-> Counter_model.dart

import 'package:flutter/material.dart';

class Counter with ChangeNotifier {

int _count = 0;

int get count => _count;

void increment() {

_count++;

notifyListeners();

}
}

Step3: Now, update the main file to use Provider to wrap the app and manage state
globally:

Program: Main Program

import 'package:flutter/material.dart';

import 'package:provider/provider.dart';

import 'counter.dart'; // Import the Counter class

void main() {

runApp(

MultiProvider(

providers: [

ChangeNotifierProvider(create: (_) => Counter()),

],

child: MyApp(),

),

);

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

home: CounterScreen(),

);

}
class CounterScreen extends StatelessWidget {

@override

Widget build(BuildContext context) {

final counter = Provider.of<Counter>(context);

return Scaffold(

appBar: AppBar(title: Text('Counter using Provider')),

body: Center(

child: Text(

'Counter: ${counter.count}',

style: TextStyle(fontSize: 24),

),

),

floatingActionButton: FloatingActionButton(

onPressed: counter.increment,

child: Icon(Icons.add),

),

);

Steps:

1. Create a new Flutter project by running: flutter create provider_example


2. Navigate into the project folder.
3. Install the Provider Package.
• Open the pubspec.yaml file and add the provider package under
dependencies.
• Save the file and run the following command in the terminal to install the
package:
flutter pub get
4. In the lib folder, create two new folders: models and screens.
5. In the models folder, create a new file named counter.dart.
6. In the screens folder, create a new file named counter_screen.dart.
7. Set up the main app file: Open lib/main.dart and write the main code.
8. Run the Application.

Explanation:

setState: In the first example, setState is used to update the _counter variable within the
widget, which rebuilds the widget to reflect the change.

Provider: In the second example, Provider manages the counter state outside of the
widget tree. The Counter class has an increment method that calls notifyListeners(),
informing all widgets using this state to rebuild when the count changes.

With this setup, Provider manages the state globally, which is helpful as your
app grows. This design allows other parts of the app to access and update the counter
without passing the state down through widget constructors.

You might also like