Provider: Consumer

Coddy'nin Flutter Journey'sinin Durum Yönetimi bölümünün bir parçası. Ders 12 / 27.

Burada sağlayıcı, MyApp'in kendi build metodu içinde oluşturulur ve aynı build hemen altında lambayı ister. Uygulama bir hata gösterir: context, sağlayıcının üstünde bulunan MyApp'e aittir ve bir widget yalnızca üstündeki sağlayıcıları bulabilir.

Consumer bunu çözer. Bir widget olduğundan sağlayıcının altında yer alır ve builder'ı yeni bir context ile modelin kendisini alır:

Consumer<Lamp>(
  builder: (context, lamp, child) {
    return Text(lamp.isOn ? 'On' : 'Off');
  },
)

Lamba, onu izleyen bir widget gibi, notifyListeners() çağırdığında builder yeniden çalışır. İçinde, modelin metotlarını doğrudan lamp üzerinde çağırabilirsin: onPressed: () => lamp.toggle().

Consumer yalnızca sardığı kısmı da yeniden oluşturur; bu nedenle değişen kısmı sarmak ekranın geri kalanını sabit tutar. Çoğu uygulamada context.watch'u kendi widget'ında kullanırsın; sağlayıcıyla aynı build içinde olduğundaysa Consumer'a başvurursun.

Görev

Orta

Uygulama bir hatayla açılıyor. Lambanın parçalarını bir Consumer içine yerleştir:

Column'ı bir Consumer<Lamp> içine al ve oluşturucusundan Column'ı döndür.
İçeride, simge, metin ve düğme için oluşturucunun lamp'ını kullan.

Kendin dene

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

class Lamp extends ChangeNotifier {
  bool _isOn = false;

  bool get isOn => _isOn;

  void toggle() {
    _isOn = !_isOn;
    notifyListeners();
  }
}

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => Lamp(),
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          appBar: AppBar(title: const Text('Lamp')),
          body: Center(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(
                  context.watch<Lamp>().isOn ? Icons.lightbulb : Icons.lightbulb_outline,
                  size: 96,
                  color: context.watch<Lamp>().isOn ? Colors.amber : Colors.grey,
                ),
                Text(context.watch<Lamp>().isOn ? 'The lamp is on' : 'The lamp is off'),
                const SizedBox(height: 16),
                ElevatedButton(
                  onPressed: () => context.read<Lamp>().toggle(),
                  child: const Text('Switch'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}