Bloc Nedir?

Bloc (Business Logic Component), Flutter’da yaygın olarak kullanılan bir mimaridir ve uygulamaların iş mantığını yönetmek için kullanılır. Bloc, veri akışını yönetir, durumu günceller ve kullanıcı arayüzüyle etkileşimi sağlar. Bu makalede, Bloc’un ne olduğunu, çalışma mantığını ve nasıl kullanılması gerektiğini anlatacağım.

Bloc’un temel amacı, veri akışını yönetmek ve uygulama durumunu güncellemektir. İki temel bileşeni vardır: State (Durum) ve Event (Olay). State, uygulamanın mevcut durumunu temsil ederken, Event, durumu değiştirecek eylemleri temsil eder. Kullanıcı etkileşimleri veya diğer veri kaynaklarından gelen olaylar, durumu güncellemek için Bloc’a iletilir.

Bloc, State ve Event arasındaki ilişkiyi yöneten bir akış şeması kullanır. Eventler, Bloc’a gönderildiğinde, Bloc bunları işler, durumu günceller ve yeni bir State yayınlar. Bu, kullanıcı arayüzünün Bloc tarafından sağlanan yeni durumu dinlemesini ve güncellenen duruma göre yeniden render etmesini sağlar.

Bloc’un kullanımı için flutter_bloc paketi kullanılabilir. İlk adım, gerekli paketi projeye eklemektir. Daha sonra, Bloc sınıfını oluşturmalı ve Event ve State sınıflarını tanımlamalısınız. Bloc’un iş mantığını bu sınıflarda uygulayabilirsiniz.

Bloc, genellikle kullanıcı arayüzü ile birlikte StateWidget veya BlocProvider gibi bir widget kullanılarak kullanılır. Bu widget, Bloc’un durumunu izleyen ve Bloc ile etkileşime geçen diğer widgetlere Bloc’u sağlar.

Bloc kullanırken dikkat edilmesi gereken bazı noktalar vardır. Örneğin, Bloc’un tek sorumluluğa sahip olması önemlidir. Ayrıca, Bloc’un sadece iş mantığını yönetmesi ve UI ile bağımsız olması gerekmektedir.

Sonuç olarak, Bloc, Flutter’da iş mantığını yönetmek ve veri akışını kontrol etmek için güçlü bir araçtır. Bloc mimarisi, uygulamalarınızı modüler, ölçeklenebilir ve test edilebilir hale getirerek daha iyi bir kod organizasyonu sağlar.

Kod Örneği Üzerinden ilerleyelim

Öncelikle Event Sınıfımızı Oluşturuyoruz

// Event sınıfı
abstract class CounterEvent {}

class IncrementEvent extends CounterEvent {}

class DecrementEvent extends CounterEvent {}

// State sınıfı
class CounterState {
  final int count;
  
  CounterState(this.count);
}

// Bloc sınıfı
class CounterBloc extends Bloc<CounterEvent, CounterState> {
  CounterBloc() : super(CounterState(0));
  
  @override
  Stream<CounterState> mapEventToState(CounterEvent event) async* {
    if (event is IncrementEvent) {
      yield CounterState(state.count + 1);
    } else if (event is DecrementEvent) {
      yield CounterState(state.count - 1);
    }
  }
}

Ana Sınıfımızda Widget Treemizin En Üstünde Bloc Provider İle Sarmalıyoruz

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bloc Counter',
      home: BlocProvider(
        create: (context) => CounterBloc(),
        child: CounterPage(),
      ),
    );
  }
}

Daha Sonra Widgetımıza Bunu Entegre ediyoruz

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final CounterBloc counterBloc = BlocProvider.of<CounterBloc>(context);
    
    return Scaffold(
      appBar: AppBar(
        title: Text('Bloc Counter'),
      ),
      body: Center(
        child: BlocBuilder<CounterBloc, CounterState>(
          builder: (context, state) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  'Count:',
                  style: TextStyle(fontSize: 24),
                ),
                Text(
                  state.count.toString(),
                  style: TextStyle(fontSize: 48),
                ),
              ],
            );
          },
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: () {
              counterBloc.add(IncrementEvent());
            },
            child: Icon(Icons.add),
          ),
          SizedBox(height: 16),
          FloatingActionButton(
            onPressed: () {
              counterBloc.add(DecrementEvent());
            },
            child: Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}