Bloc Pattern for Data Retrieval in Flutter: Implementing WeatherBloc

5.4.2 Implementing Bloc for Data Retrieval

In this section, we delve into the practical implementation of the Bloc pattern for data retrieval in Flutter applications. We’ll guide you through defining events and states, implementing the WeatherBloc, and interacting with repositories to fetch and manage weather data. This comprehensive guide will equip you with the skills to efficiently manage state and data flow in your Flutter applications using Bloc.

Defining Events and States

In the Bloc pattern, events are the inputs that trigger state changes, while states represent the outputs or the current status of the application. For our weather application, we will define a set of events and states to handle weather data retrieval.

Event Classes

Events are actions that the user or system triggers. In our weather application, we need events to fetch and refresh weather data.

• FetchWeatherEvent: Triggered when the user requests weather data for a specific city.
• RefreshWeatherEvent: Triggered when the user wants to refresh the current weather data.

Here’s how you can define these event classes:

abstract class WeatherEvent {}

class FetchWeatherEvent extends WeatherEvent {
  final String city;

  FetchWeatherEvent(this.city);
}

class RefreshWeatherEvent extends WeatherEvent {
  final String city;

  RefreshWeatherEvent(this.city);
}

State Classes

States represent the different states of the application during the data retrieval process. We will define the following states:

• WeatherInitial: The initial state before any data is fetched.
• WeatherLoading: Indicates that the weather data is currently being loaded.
• WeatherLoaded: Represents the state when weather data is successfully fetched.
• WeatherError: Represents an error state when data retrieval fails.

Here’s how you can define these state classes:

abstract class WeatherState {}

class WeatherInitial extends WeatherState {}

class WeatherLoading extends WeatherState {}

class WeatherLoaded extends WeatherState {
  final Weather weather;

  WeatherLoaded(this.weather);
}

class WeatherError extends WeatherState {
  final String message;

  WeatherError(this.message);
}

Implementing WeatherBloc

The WeatherBloc class is where the core logic of fetching and managing weather data resides. It listens for events and emits states based on the outcomes of those events.

Writing the WeatherBloc Class

The WeatherBloc class extends the Bloc class, taking WeatherEvent and WeatherState as type parameters. It uses event handlers to map events to state changes.

class WeatherBloc extends Bloc<WeatherEvent, WeatherState> {
  final WeatherRepository weatherRepository;

  WeatherBloc({required this.weatherRepository}) : super(WeatherInitial()) {
    on<FetchWeatherEvent>(_onFetchWeather);
    on<RefreshWeatherEvent>(_onRefreshWeather);
  }

  void _onFetchWeather(FetchWeatherEvent event, Emitter<WeatherState> emit) async {
    emit(WeatherLoading());
    try {
      final weather = await weatherRepository.getWeather(event.city);
      emit(WeatherLoaded(weather));
    } catch (e) {
      emit(WeatherError("Could not fetch weather"));
    }
  }

  void _onRefreshWeather(RefreshWeatherEvent event, Emitter<WeatherState> emit) async {
    emit(WeatherLoading());
    try {
      final weather = await weatherRepository.getWeather(event.city);
      emit(WeatherLoaded(weather));
    } catch (e) {
      emit(WeatherError("Could not refresh weather"));
    }
  }
}

Error Handling

Error handling is crucial in any application. In the WeatherBloc, we handle errors by emitting a WeatherError state with an appropriate error message when an exception occurs during data retrieval.

Interacting with Repositories

The WeatherBloc interacts with a WeatherRepository to fetch weather data. The repository pattern abstracts the data fetching logic, allowing the Bloc to focus on state management.

Injecting the WeatherRepository

The WeatherRepository is injected into the WeatherBloc through its constructor. This promotes loose coupling and makes the Bloc easier to test.

class WeatherBloc extends Bloc<WeatherEvent, WeatherState> {
  final WeatherRepository weatherRepository;

  WeatherBloc({required this.weatherRepository}) : super(WeatherInitial()) {
    on<FetchWeatherEvent>(_onFetchWeather);
  }
}

Repository Code Example

Here’s a simple example of what the WeatherRepository might look like:

class WeatherRepository {
  final WeatherApiClient weatherApiClient;

  WeatherRepository({required this.weatherApiClient});

  Future<Weather> getWeather(String city) async {
    return await weatherApiClient.fetchWeather(city);
  }
}

Asynchronous Programming

The Bloc pattern heavily relies on asynchronous programming to handle data fetching operations. In the WeatherBloc, we use async and await to manage asynchronous calls to the WeatherRepository.

Using Async and Await

The async keyword is used to define asynchronous functions, and await is used to pause the execution until a Future completes. This allows us to write asynchronous code that reads like synchronous code.

void _onFetchWeather(FetchWeatherEvent event, Emitter<WeatherState> emit) async {
  emit(WeatherLoading());
  try {
    final weather = await weatherRepository.getWeather(event.city);
    emit(WeatherLoaded(weather));
  } catch (e) {
    emit(WeatherError("Could not fetch weather"));
  }
}

Best Practices

When implementing the Bloc pattern for data retrieval, consider the following best practices:

• Separation of Concerns: Keep the Bloc focused on state management and delegate data fetching to repositories.
• Error Handling: Always handle exceptions and provide meaningful error messages to improve user experience.
• Testing: Write unit tests for your Bloc and repository to ensure they work as expected.
• Code Readability: Use descriptive names for events, states, and methods to make your code easy to understand.

Practical Example: Weather App

Let’s consider a practical example of a weather application using the Bloc pattern. This example will demonstrate how to integrate the WeatherBloc with a Flutter UI to fetch and display weather data.

Setting Up the UI

First, set up a basic Flutter UI with a text field for entering the city name and a button to fetch weather data.

class WeatherPage extends StatelessWidget {
  final WeatherBloc weatherBloc = WeatherBloc(weatherRepository: WeatherRepository());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Weather App')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              decoration: InputDecoration(labelText: 'Enter City'),
              onSubmitted: (city) {
                weatherBloc.add(FetchWeatherEvent(city));
              },
            ),
            SizedBox(height: 20),
            BlocBuilder<WeatherBloc, WeatherState>(
              bloc: weatherBloc,
              builder: (context, state) {
                if (state is WeatherLoading) {
                  return CircularProgressIndicator();
                } else if (state is WeatherLoaded) {
                  return Text('Temperature: ${state.weather.temperature}');
                } else if (state is WeatherError) {
                  return Text(state.message);
                }
                return Container();
              },
            ),
          ],
        ),
      ),
    );
  }
}

Integrating Bloc with UI

Use the BlocBuilder widget to rebuild parts of the UI based on the current state of the WeatherBloc. This ensures that the UI reflects the latest weather data or error messages.

Conclusion

Implementing the Bloc pattern for data retrieval in Flutter applications provides a robust and scalable solution for managing state and data flow. By defining clear events and states, interacting with repositories, and leveraging asynchronous programming, you can create responsive and maintainable applications.

Further Reading and Resources

• Bloc Library Documentation
• Flutter Official Documentation
• Dart Asynchronous Programming

By following these guidelines and best practices, you can effectively implement the Bloc pattern in your Flutter applications, enhancing both performance and user experience.

Quiz Time!