Lernen Updating State with ChangeNotifier

When building reactive Flutter apps, you need a way to update your UI whenever your data changes. This is where ChangeNotifier comes in. ChangeNotifier is a simple class that provides change notification to its listeners. It is commonly used in combination with Provider to manage app state and trigger UI updates.

The key method in ChangeNotifier is notifyListeners. When you call this method, all widgets listening to the notifier are rebuilt, reflecting the latest state. This pattern allows you to separate your UI from your business logic, making your code cleaner and easier to maintain.

main.dart


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

// The ChangeNotifier class that manages the counter state.
class CounterNotifier extends ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners(); // Notifies listeners to rebuild.
  }
}

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

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

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

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

  @override
  Widget build(BuildContext context) {
    // Listen to changes in CounterNotifier.
    final counter = context.watch<CounterNotifier>();

    return Scaffold(
      appBar: AppBar(title: const Text('Counter Example')),
      body: Center(
        child: Text(
          'Count: [1m${counter.count}[22m',
          style: const TextStyle(fontSize: 32),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counter.increment();
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

You use a CounterNotifier class that extends ChangeNotifier. The counter value is stored in a private variable, and you expose it with a getter. When the increment method is called, the counter is increased and notifyListeners is called. This triggers any widgets listening to CounterNotifier (like the CounterScreen) to rebuild and display the updated count.

The ChangeNotifierProvider is set up at the root of your app, making the notifier available to all descendant widgets. In the CounterScreen, you use context.watch<CounterNotifier>() to listen for changes. When you tap the floating action button, the increment method is called, and the UI updates automatically because notifyListeners was triggered.

Note

This approach ensures that your UI always reflects the current state, and you do not need to manually manage widget rebuilding. By using ChangeNotifier and notifyListeners, you keep your state logic separate from your UI, making your code more organized and maintainable.

War alles klar?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 4

Fragen Sie AI

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Swipe um das Menü anzuzeigen

main.dart


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

// The ChangeNotifier class that manages the counter state.
class CounterNotifier extends ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners(); // Notifies listeners to rebuild.
  }
}

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

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

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

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

  @override
  Widget build(BuildContext context) {
    // Listen to changes in CounterNotifier.
    final counter = context.watch<CounterNotifier>();

    return Scaffold(
      appBar: AppBar(title: const Text('Counter Example')),
      body: Center(
        child: Text(
          'Count: [1m${counter.count}[22m',
          style: const TextStyle(fontSize: 32),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counter.increment();
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

Note

War alles klar?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 4