---
title: Flutter. Bloc counter.
tags: DAW, Flutter
---

<div style="width: 30%; margin-left: auto;">


</div>


<a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Llicència de Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a><br />Aquesta obra està subjecta a una llicència de <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Reconeixement-CompartirIgual 4.0 Internacional de Creative Commons</a>

# Tutorial del comptador BLoc.
Aquest és el primer dels tutorials que es poden trobar a la documentació oficial de la pàgina de la biblioteca __flutter_bloc__; el podeu trobar en aquest __[link](https://bloclibrary.dev/tutorials/flutter-counter/)__

## Breu dissecció del codi.
### lib/main.dart

import 'package:bloc/bloc.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_counter/app.dart';
import 'package:flutter_counter/counter_observer.dart';

void main() {
  Bloc.observer = const CounterObserver();
  runApp(const CounterApp());
}

El nostre fitxer d'accés a l'app només conté la declaració del Bloc.observer i el runApp.

### lib/app.dart

import 'package:flutter/material.dart';
import 'package:flutter_counter/counter/counter.dart';

/// {@template counter_app}
/// A [MaterialApp] which sets the `home` to [CounterPage].
/// {@endtemplate}
class CounterApp extends MaterialApp {
  /// {@macro counter_app}
  const CounterApp({super.key}) : super(home: const CounterPage());
}

Implementació de la classe CounterApp que hereta de MaterialApp on es declara la home page que serà una instància de CounterApp.
Cal notar que fem un import del fitxer counter.dart que només conté declaracions de la resta de fitxers que caldrà importar.

### lib\counter\view\counter_page.dart
Malgrat la seva senzillesa, és una de les peces clau del codi, ja que és aquí on es materialitza el BlocProvider que per una banda crea el CounterCubit que implementa l'estat de l'app i per altra crea la CounterView que descriu la vista.

### lib\counter\cubit\counter_cubit.dart

import 'package:bloc/bloc.dart';

/// {@template counter_cubit}
/// A [Cubit] which manages an [int] as its state.
/// {@endtemplate}
class CounterCubit extends Cubit<int> {
  /// {@macro counter_cubit}
  CounterCubit() : super(0);

  /// Add 1 to the current state.
  void increment() => emit(state + 1);

  /// Subtract 1 from the current state.
  void decrement() => emit(state - 1);
}

Hereta de Cubit\<int\>, el constructor inicialitza l'estat a 0 es declaren els mètodes que modifiquen aquest estat.

### lib\counter\view\counter_view.dart

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

/// {@template counter_view}
/// A [StatelessWidget] which reacts to the provided
/// [CounterCubit] state and notifies it in response to user input.
/// {@endtemplate}
class CounterView extends StatelessWidget {
  /// {@macro counter_view}
  const CounterView({super.key});

  @override
  Widget build(BuildContext context) {
    final textTheme = Theme.of(context).textTheme;
    return Scaffold(
      body: Center(
        child: BlocBuilder<CounterCubit, int>(
          builder: (context, state) {
            return Text('$state', style: textTheme.displayMedium);
          },
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            key: const Key('counterView_increment_floatingActionButton'),
            child: const Icon(Icons.add),
            onPressed: () => context.read<CounterCubit>().increment(),
          ),
          const SizedBox(height: 8),
          FloatingActionButton(
            key: const Key('counterView_decrement_floatingActionButton'),
            child: const Icon(Icons.remove),
            onPressed: () => context.read<CounterCubit>().decrement(),
          ),
        ],
      ),
    );
  }
}

Aquesta classe és la responsable de dibuixar i mantenir actualitzada la vista de la nostra app. El cor de la vista és un BlocBuilder\<CounterCubit, int\> que permet respondre a canvis de l'estat del Cubit.
Hem de parar especial atenció a la manera en que es criden els mètodes que modifiquen l'estat del Cubit, podem accedir-hi des de qualsevol widget del nostre arbre de widgets a través de la funció read del context.