Lære 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),
        ),
      ),
    );
  }
}

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 1. Kapittel 2

Spør AI

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Suggested prompts:

Can you explain how to set up Provider in a new Flutter project?

What are some common use cases for Provider in real-world apps?

How does Provider compare to other state management solutions in Flutter?

Sveip for å vise menyen

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),
        ),
      ),
    );
  }
}

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 1. Kapittel 2