Setting Up Bloc in Flutter: A Comprehensive Guide to Reactive Programming

7.3.2 Setting Up Bloc in Flutter

In this section, we will delve into setting up Bloc in Flutter, a powerful state management solution that leverages reactive programming principles. Bloc (Business Logic Component) helps you separate business logic from UI, making your Flutter applications more manageable and scalable. We’ll cover everything from project structure to integrating Bloc with your UI, ensuring you have a solid foundation to build responsive and adaptive applications.

Project Structure for Bloc

Organizing your project structure is crucial for maintaining clarity and scalability in your Flutter applications. When using Bloc, it’s recommended to follow a structured approach to separate concerns effectively. Here’s a typical folder structure for a Bloc-based project:

lib/
│
├── blocs/
│   ├── login/
│   │   ├── login_bloc.dart
│   │   ├── login_event.dart
│   │   └── login_state.dart
│   └── ...
│
├── models/
│   └── user.dart
│
├── repositories/
│   └── user_repository.dart
│
├── screens/
│   ├── login_screen.dart
│   └── ...
│
└── main.dart

• blocs/: Contains all Bloc-related files. Each feature or domain has its own subdirectory (e.g., login/) with separate files for Bloc, events, and states.
• models/: Holds data models used across the application.
• repositories/: Includes classes that handle data fetching and storage, abstracting data sources.
• screens/: Contains UI components, typically one file per screen.
• main.dart: The entry point of the application.

Installing Dependencies

To get started with Bloc in Flutter, you need to add the necessary dependencies to your project. The primary packages are flutter_bloc and bloc. Here’s how you can add them:

1. Open your pubspec.yaml file.
2. Add the following dependencies:

dependencies:
  flutter:
    sdk: flutter
  flutter_bloc: ^8.0.0
  bloc: ^8.0.0

3. Run flutter pub get in your terminal to install the packages.

Creating Bloc Classes

Bloc classes are the core of the Bloc pattern, responsible for handling events and emitting states. Let’s break down the creation of Bloc classes into three main components: Event classes, State classes, and the Bloc class itself.

Event Classes

Event classes represent the various actions that can occur in your application. Start by creating an abstract event class and then implement specific events.

// login_event.dart
import 'package:equatable/equatable.dart';

abstract class LoginEvent extends Equatable {
  const LoginEvent();

  @override
  List<Object> get props => [];
}

class LoginButtonPressed extends LoginEvent {
  final String username;
  final String password;

  const LoginButtonPressed({required this.username, required this.password});

  @override
  List<Object> get props => [username, password];
}

• LoginEvent: An abstract class that extends Equatable for value comparison.
• LoginButtonPressed: A concrete event class with properties for username and password.

State Classes

State classes represent the various states of your application. Similar to events, start with an abstract state class and implement specific states.

// login_state.dart
import 'package:equatable/equatable.dart';

abstract class LoginState extends Equatable {
  const LoginState();

  @override
  List<Object> get props => [];
}

class LoginInitial extends LoginState {}

class LoginLoading extends LoginState {}

class LoginSuccess extends LoginState {}

class LoginFailure extends LoginState {
  final String error;

  const LoginFailure({required this.error});

  @override
  List<Object> get props => [error];
}

• LoginState: An abstract class for different login states.
• LoginInitial, LoginLoading, LoginSuccess, LoginFailure: Concrete state classes representing various states of the login process.

Bloc Class

The Bloc class maps incoming events to outgoing states. Here’s how you can create a Bloc class for a login feature:

// login_bloc.dart
import 'package:flutter_bloc/flutter_bloc.dart';
import 'login_event.dart';
import 'login_state.dart';

class LoginBloc extends Bloc<LoginEvent, LoginState> {
  LoginBloc() : super(LoginInitial());

  @override
  Stream<LoginState> mapEventToState(LoginEvent event) async* {
    if (event is LoginButtonPressed) {
      yield LoginLoading();

      try {
        // Simulate a network call
        await Future.delayed(Duration(seconds: 2));
        yield LoginSuccess();
      } catch (error) {
        yield LoginFailure(error: error.toString());
      }
    }
  }
}

• LoginBloc: Extends Bloc with LoginEvent and LoginState.
• mapEventToState: Asynchronous generator function that maps events to states.

Code Example

Let’s put it all together with a comprehensive code example demonstrating the creation of events, states, and a Bloc class for a simple login feature.

// main.dart
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'blocs/login/login_bloc.dart';
import 'screens/login_screen.dart';

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

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

// login_screen.dart
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../blocs/login/login_bloc.dart';
import '../blocs/login/login_event.dart';
import '../blocs/login/login_state.dart';

class LoginScreen extends StatelessWidget {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Login')),
      body: BlocListener<LoginBloc, LoginState>(
        listener: (context, state) {
          if (state is LoginFailure) {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text(state.error)),
            );
          }
        },
        child: BlocBuilder<LoginBloc, LoginState>(
          builder: (context, state) {
            if (state is LoginLoading) {
              return Center(child: CircularProgressIndicator());
            }

            return Padding(
              padding: EdgeInsets.all(16.0),
              child: Column(
                children: [
                  TextField(
                    controller: _usernameController,
                    decoration: InputDecoration(labelText: 'Username'),
                  ),
                  TextField(
                    controller: _passwordController,
                    decoration: InputDecoration(labelText: 'Password'),
                    obscureText: true,
                  ),
                  SizedBox(height: 20),
                  ElevatedButton(
                    onPressed: () {
                      BlocProvider.of<LoginBloc>(context).add(
                        LoginButtonPressed(
                          username: _usernameController.text,
                          password: _passwordController.text,
                        ),
                      );
                    },
                    child: Text('Login'),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}

Integration with UI

Integrating Bloc with your UI involves using BlocProvider, BlocBuilder, and BlocListener.

BlocProvider

BlocProvider is used to supply the Bloc instance to the widget tree. It ensures that the Bloc is available to all widgets within its subtree.

BlocProvider(
  create: (context) => LoginBloc(),
  child: LoginScreen(),
)

BlocBuilder and BlocListener

• BlocBuilder: Rebuilds UI components based on state changes.
• BlocListener: Reacts to state changes for side effects, such as showing a SnackBar.

BlocListener<LoginBloc, LoginState>(
  listener: (context, state) {
    if (state is LoginFailure) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text(state.error)),
      );
    }
  },
  child: BlocBuilder<LoginBloc, LoginState>(
    builder: (context, state) {
      if (state is LoginLoading) {
        return Center(child: CircularProgressIndicator());
      }

      // UI for LoginInitial and LoginFailure states
    },
  ),
)

Mermaid.js Diagrams

To visualize the interaction between UI events, Bloc handling, and state updates, consider using Mermaid.js sequence diagrams. Here’s an example diagram:

    sequenceDiagram
	    participant UI
	    participant Bloc
	    participant State
	
	    UI->>Bloc: LoginButtonPressed
	    Bloc->>State: Emit LoginLoading
	    Bloc->>State: Emit LoginSuccess or LoginFailure
	    State-->>UI: Update UI

Best Practices

• Single Responsibility: Each Bloc should handle a specific feature or domain to maintain clarity and manageability.
• Reusable Components: Create reusable Bloc components to avoid code duplication and enhance maintainability.

Implementation Guidance

• Include comments within code examples to explain key sections and logic.
• Provide a downloadable repository link for readers to access the complete Bloc setup.

Conclusion

Setting up Bloc in Flutter involves organizing your project structure, creating event and state classes, and integrating Bloc with your UI. By following the best practices and guidelines outlined in this section, you’ll be well-equipped to manage state effectively in your Flutter applications.

For further exploration, consider checking out the official Bloc documentation and exploring open-source projects that utilize Bloc for state management.

Quiz Time!