Summary - Provider

Combine Provider, ChangeNotifier and watch to build a theme.

Summary - Provider

In this section you learned three things: with Provider you provide state to the tree; with ChangeNotifier you make a listenable model and call notifyListeners on change; with context.watch you listen to the model and trigger rebuild.

final theme = context.watch<ThemeModel>();
Text(theme.dark ? 'Dark' : 'Light')

Combining these, you build a theme toggle screen.

Exercise Build a theme toggle screen

Make TemaModeli extend ChangeNotifier with a karanlik bool and a degistir method. Provide the model with ChangeNotifierProvider<TemaModeli>. In Ekrani, read the theme with context.watch<TemaModeli>() and call context.read<TemaModeli>().degistir() on the button. In main, call print('tema uygulaması').

Show example solution

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

void main() {
  print('tema uygulaması');
  runApp(MyApp());
}

class TemaModeli extends ChangeNotifier {
  bool karanlik = false;
  void degistir() {
    karanlik = !karanlik;
    notifyListeners();
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<TemaModeli>(
      create: (_) => TemaModeli(),
      child: MaterialApp(
        home: Ekrani(),
      ),
    );
  }
}

class Ekrani extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final tema = context.watch<TemaModeli>();
    return Scaffold(
      appBar: AppBar(title: Text('Tema')),
      body: Center(child: Text(tema.karanlik ? 'Karanlık' : 'Aydınlık')),
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.read<TemaModeli>().degistir(),
        child: Icon(Icons.lightbulb),
      ),
    );
  }
}

Test yourself

Which class should the model extend in a theme toggle app?
- ChangeNotifier
- StatelessWidget
- StatefulWidget
- InheritedWidget
Show answer

ChangeNotifier — The theme model extends ChangeNotifier; the toggle method flips the dark value and notifies listeners with notifyListeners.

Extend TemaModeli from ChangeNotifier

class TemaModeli ____ {
  bool karanlik = false;
  void degistir() {
    karanlik = !karanlik;
    notifyListeners();
  }
}

Show answer

class TemaModeli extends ChangeNotifier {
  bool karanlik = false;
  void degistir() {
    karanlik = !karanlik;
    notifyListeners();
  }
}

Provider section parts

Provider

Package providing state to tree
ChangeNotifier

Model class that notifies of changes
notifyListeners

Rebuilds listening widgets
context.watch

Listens model and triggers rebuild

Next lesson: What is Riverpod?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies