Oppiskele Provider Pattern | State Management

Provider is a popular Flutter package that simplifies state management by making it easy to share data and logic across your widget tree. Unlike setState, which only updates state within a single widget, Provider allows you to expose shared state objects to many widgets, enabling consistent and efficient updates throughout your app. This is especially useful as your app grows and you need a scalable way to manage data that multiple widgets depend on.

counter_provider.dart


              1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
            
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

// A simple ChangeNotifier class for shared counter state
class Counter extends ChangeNotifier {
  int value = 0;

  void increment() {
    value++;
    notifyListeners();
  }
}

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (_) => Counter(),
      child: const MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @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: const Text('Provider Counter')),
      body: Center(
        child: Text(
          'Counter: counter.value}',
          style: const TextStyle(fontSize: 24),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: counter.increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}

Widgets can listen to changes in a Provider by accessing the provided object in the widget tree. In the ChangeNotifier example above, the CounterScreen widget uses Provider.of<Counter>(context) to obtain the shared Counter instance. When increment() is called, notifyListeners() triggers a rebuild of all widgets listening to the Counter, ensuring the UI stays in sync with the latest state.

counter_listener.dart


              1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
            
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class Counter extends ChangeNotifier {
  int value = 0;
  void increment() {
    value++;
    notifyListeners();
  }
}

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (_) => Counter(),
      child: const MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Provider Listener Example')),
        body: Center(
          child: Consumer<Counter>(
            builder: (context, counter, child) {
              return Text(
                'Value: [36m${counter.value}[0m',
                style: const TextStyle(fontSize: 32),
              );
            },
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () =>
              Provider.of<Counter>(context, listen: false).increment(),
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 1. Luku 2

Kysy tekoälyä

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Pyyhkäise näyttääksesi valikon

counter_provider.dart


              1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
            
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

// A simple ChangeNotifier class for shared counter state
class Counter extends ChangeNotifier {
  int value = 0;

  void increment() {
    value++;
    notifyListeners();
  }
}

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (_) => Counter(),
      child: const MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @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: const Text('Provider Counter')),
      body: Center(
        child: Text(
          'Counter: counter.value}',
          style: const TextStyle(fontSize: 24),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: counter.increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}

counter_listener.dart


              1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
            
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class Counter extends ChangeNotifier {
  int value = 0;
  void increment() {
    value++;
    notifyListeners();
  }
}

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (_) => Counter(),
      child: const MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Provider Listener Example')),
        body: Center(
          child: Consumer<Counter>(
            builder: (context, counter, child) {
              return Text(
                'Value: [36m${counter.value}[0m',
                style: const TextStyle(fontSize: 32),
              );
            },
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () =>
              Provider.of<Counter>(context, listen: false).increment(),
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 1. Luku 2