Lernen Why Provider Exists | Provider Essentials

As Flutter apps grow, basic tools like setState() and InheritedWidget start to show limitations.

Problems with setState()

Works only for local widget state
Hard to share data across distant widgets
Leads to prop drilling and tight coupling

Problems with InheritedWidget

Requires boilerplate code
Difficult for beginners
Not ideal for frequent updates or complex logic

Why Provider

Built on top of InheritedWidget but simpler to use
Makes shared state easy to expose and listen to
Helps keep state scalable, testable, and maintainable

main.dart


              12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
            
// main.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

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

class Counter extends ChangeNotifier {
  int value = 0;

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

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) {
    final counter = context.watch<Counter>();

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

The Counter class extends ChangeNotifier, encapsulating the state and logic for incrementing a value. By wrapping your app with a ChangeNotifierProvider, you make the Counter instance available to any widget in the subtree. Widgets can access and react to changes in the state by using context.watch<Counter>(), which rebuilds only the widgets that depend on Counter when the state changes. This approach avoids the manual wiring required with InheritedWidget and the excessive rebuilding that may occur with setState().

War alles klar?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 1

Fragen Sie AI

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

Suggested prompts:

Can you explain how to implement Provider in a simple Flutter app?

What are some best practices for using Provider in larger projects?

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

Swipe um das Menü anzuzeigen