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

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 3. 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

Sveip for å vise menyen

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

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 3. Kapittel 2