Learn Creating and Registering Providers

When you register a provider, you make data available to the widget subtree below the provider. In the example above, the ChangeNotifierProvider is placed at the root of the app, which means any widget in the app can access the Counter instance. Widgets can access the provided data using methods like Provider.of<T>(context), context.watch<T>(), or context.read<T>(). This allows widgets to listen for changes and rebuild only when necessary, making your app more efficient and responsive.

main.dart


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

// A simple ChangeNotifier class for demonstration
class Counter extends ChangeNotifier {
  int value = 0;

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

void main() {
  runApp(
    // Registering the ChangeNotifierProvider at the root of the app
    ChangeNotifierProvider(
      create: (context) => Counter(),
      child: const MyApp(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Provider Demo',
      home: const CounterScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    // Accessing the provided Counter instance
    final counter = Provider.of<Counter>(context);

    return Scaffold(
      appBar: AppBar(
        title: const Text('Counter Example'),
      ),
      body: Center(
        child: Text(
          'Value: [${counter.value}[',
          style: const TextStyle(fontSize: 24),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: counter.increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 2

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

Can you explain the difference between `context.watch<T>()` and `context.read<T>()`?

How does `ChangeNotifierProvider` work with multiple providers?

Can you give an example of how to update the provided data?

Swipe to show menu

main.dart


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

// A simple ChangeNotifier class for demonstration
class Counter extends ChangeNotifier {
  int value = 0;

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

void main() {
  runApp(
    // Registering the ChangeNotifierProvider at the root of the app
    ChangeNotifierProvider(
      create: (context) => Counter(),
      child: const MyApp(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Provider Demo',
      home: const CounterScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    // Accessing the provided Counter instance
    final counter = Provider.of<Counter>(context);

    return Scaffold(
      appBar: AppBar(
        title: const Text('Counter Example'),
      ),
      body: Center(
        child: Text(
          'Value: [${counter.value}[',
          style: const TextStyle(fontSize: 24),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: counter.increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 2