Bloc - Exemplo | Flutter

• Bloc - Exemplo | Flutter

Estado

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

abstract class HomeState extends Equatable {
  @override
  List<Object?> get props => [];
}

class HomeInitialState extends HomeState {}

class HomeLoadingState extends HomeState {}

class HomeLoadedState extends HomeState {
  final PhotosModel? photosModel;

  HomeLoadedState({this.photosModel});

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

class HomeErrorState extends HomeState {}

Bloc

import 'package:api_service/api_service.dart';
import 'package:equatable/equatable.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

part 'home_event.dart';
part 'home_state.dart';

class HomeBloc extends Bloc<HomeEvent, HomeState> {
  HomeBloc({required this.apiService}) : super(HomeInitialState()) {
    on<HomeApiCallEvent>(_onHomeApiCallEvent);
  }

  final ApiService apiService;

  Future<void> _onHomeApiCallEvent(
    HomeApiCallEvent event,
    Emitter<HomeState> emit,
  ) async {
    try {
      emit(HomeLoadingState());
      final photosModel = await apiService.getPhotos();
      emit(HomeLoadedState(photosModel: photosModel!));
    } catch (e) {
      emit(HomeErrorState());
    }
  }
}

UI

import 'package:bloc_single_state_class_example/home/home.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

class HomeView extends StatelessWidget {
  const HomeView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home Page'),
        centerTitle: true,
      ),
      body: const _ScaffoldBody(),
    );
  }
}

class _ScaffoldBody extends StatelessWidget {
  const _ScaffoldBody();

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<HomeBloc, HomeState>(
      bloc: context.read<HomeBloc>(),
      builder: (context, state) {
        if (state is HomeLoadingState) {
          return const Center(child: CircularProgressIndicator());
        } else if (state is HomeLoadedState) {
          return Padding(
            padding: const EdgeInsets.all(8.0),
            child: GridView.builder(
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                crossAxisSpacing: 10.0,
                mainAxisSpacing: 10.0,
              ),
              itemCount: state.photosModel?.photos.length ?? 0,
              itemBuilder: (context, index) {
                return Container(
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: CachedNetworkImageProvider(
                        state.photosModel!.photos[index].url,
                      ),
                      fit: BoxFit.cover,
                    ),
                    borderRadius: BorderRadius.circular(20.0),
                  ),
                );
              },
            ),
          );
        } else if (state is HomeErrorState) {
          return const Center(
            child: Text('Something went wrong!'),
          );
        }
        return const SizedBox.shrink();
      },
    );
  }
}