Özet - Bloc temel

Cubit, BlocProvider ve BlocBuilder'ı birleştirerek sayaç yaparsın.

Özet - Bloc temel

Bu bölümde üç şey öğrendin: Cubit ile basit state yönetimi yaparsın; BlocProvider ile Cubit'i ağaca sağlarsın; BlocBuilder ile state'i dinleyip arayüzü yeniden çizersin.

BlocProvider<SayacCubit>(
  create: (_) => SayacCubit(),
  child: BlocBuilder<SayacCubit, int>(
    builder: (context, state) => Text('$state'),
  ),
)

Bunları birleştirerek sayaç ekranı yaparsın.

Uygulama Sayaç ekranı yap

SayacCubit sınıfını Cubit<int>'ten türet, artir metodu emit(state + 1) çağırsın. BlocProvider<SayacCubit> ile kökü sar. Ekrani'de BlocBuilder<SayacCubit, int> ile state'i göster, butonda context.read<SayacCubit>().artir() çağır. main içinde print('sayaç açıldı') çağır.

Örnek çözümü göster

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

class SayacCubit extends Cubit<int> {
  SayacCubit() : super(0);
  void artir() => emit(state + 1);
}

void main() {
  print('sayaç açıldı');
  runApp(MyApp());
}

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

class Ekrani extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: BlocBuilder<SayacCubit, int>(
          builder: (context, state) => Text('$state'),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.read<SayacCubit>().artir(),
        child: Icon(Icons.add),
      ),
    );
  }
}

Kendini test et

Sayaç ekranında Cubit'in state'ini ekranda göstermek için hangi widget kullanılır?
- Scaffold
- AppBar
- StatelessWidget
- BlocBuilder
Cevabı göster

BlocBuilder — Cubit'in state'ini ekranda göstermek için BlocBuilder kullanılır; builder fonksiyonu state'e göre widget döndürür.

Cubit'in başlangıç state'ini ayarla

class SayacCubit extends Cubit<int> {
  SayacCubit() : ____;
  void artir() => emit(state + 1);
}

Cevabı göster

class SayacCubit extends Cubit<int> {
  SayacCubit() : super(0);
  void artir() => emit(state + 1);
}

Bloc temel parçaları

Cubit

Basit state yöneten sınıf
BlocProvider

Cubit'i ağaca sağlar
BlocBuilder

State'i dinleyip arayüzü yeniden çizer
emit

Yeni state yayınlama yöntemi

Sıradaki ders: FutureBuilder nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler