Flutter — это мощная платформа для создания кроссплатформенных приложений, которая в сочетании с библиотеками управления состоянием, такими как Bloc, становится еще более эффективной. В этой статье мы рассмотрим различные методы создания приложения-счетчика с использованием Flutter и библиотеки Bloc. Мы предоставим примеры кода для каждого метода, что позволит вам выбрать подход, который лучше всего соответствует вашим потребностям.

Метод 1: базовое приложение-счетчик
Первый метод предполагает создание базового приложения-счетчика с использованием библиотеки Bloc. Этот метод подходит новичкам, которые хотят понять основы интеграции Bloc в приложение Flutter.

// Import the necessary packages
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
// Define the events
enum CounterEvent { increment, decrement }
// Define the Bloc
class CounterBloc extends Bloc<CounterEvent, int> {
  CounterBloc() : super(0);
  @override
  Stream<int> mapEventToState(CounterEvent event) async* {
    switch (event) {
      case CounterEvent.increment:
        yield state + 1;
        break;
      case CounterEvent.decrement:
        yield state - 1;
        break;
    }
  }
}
// Define the main app widget
class CounterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Counter App')),
        body: BlocBuilder<CounterBloc, int>(
          builder: (context, count) {
            return Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('Count: $count'),
                  SizedBox(height: 16),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      FloatingActionButton(
                        onPressed: () =>
                            context.read<CounterBloc>().add(CounterEvent.increment),
                        child: Icon(Icons.add),
                      ),
                      SizedBox(width: 16),
                      FloatingActionButton(
                        onPressed: () =>
                            context.read<CounterBloc>().add(CounterEvent.decrement),
                        child: Icon(Icons.remove),
                      ),
                    ],
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}
// Run the app
void main() {
  runApp(CounterApp());
}

Метод 2: приложение-счетчик с StateBuilder
Второй метод использует виджет StateBuilderиз библиотеки Bloc для упрощения кода пользовательского интерфейса. Этот метод подходит разработчикам, предпочитающим более декларативный подход.

// Import the necessary packages
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
// Define the events and the Bloc
// (same as Method 1)
// Define the main app widget
class CounterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Counter App')),
        body: BlocProvider(
          create: (context) => CounterBloc(),
          child: StateBuilder<CounterBloc, int>(
            builder: (context, state) {
              return Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text('Count: $state'),
                    SizedBox(height: 16),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        FloatingActionButton(
                          onPressed: () =>
                              context.read<CounterBloc>().add(CounterEvent.increment),
                          child: Icon(Icons.add),
                        ),
                        SizedBox(width: 16),
                        FloatingActionButton(
                          onPressed: () =>
                              context.read<CounterBloc>().add(CounterEvent.decrement),
                          child: Icon(Icons.remove),
                        ),
                      ],
                    ),
                  ],
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}
// Run the app
void main() {
  runApp(CounterApp());
}

Метод 3: приложение-счетчик с Cubit
Третий метод использует класс Cubitиз библиотеки Bloc, который представляет собой облегченную версию шаблона Bloc. Этот метод подходит для небольших приложений или когда вам не нужна вся мощь библиотеки Bloc.

// Import the necessary packages
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
// Define the Cubit
class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);
  void increment() => emit(state + 1);
  void decrement() => emit(state - 1);
}
// Define the main app widget
class CounterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Counter App')),
        body: BlocBuilder<CounterCubit, int>(
          builder: (context, count) {
            return Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('Count: $count'),
                  SizedBox(height:16),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      FloatingActionButton(
                        onPressed: () => context.read<CounterCubit>().increment(),
                        child: Icon(Icons.add),
                      ),
                      SizedBox(width: 16),
                      FloatingActionButton(
                        onPressed: () => context.read<CounterCubit>().decrement(),
                        child: Icon(Icons.remove),
                      ),
                    ],
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}
// Run the app
void main() {
  runApp(CounterApp());
}

В этой статье мы рассмотрели различные методы создания приложения-счетчика с использованием Flutter и библиотеки Bloc. Мы рассмотрели базовое приложение-счетчик с использованием библиотеки Bloc, приложение-счетчик с виджетом StateBuilderи приложение-счетчик с использованием класса Cubit. Каждый метод обеспечивает разный уровень сложности и гибкости, что позволяет разработчикам выбрать подход, который лучше всего соответствует требованиям их проекта.