Flutter Bloc – Búsqueda básica

Flutter es una herramienta poderosa para desarrollar aplicaciones geniales para Android e iOS y mucho más como PWA a partir de una única base de código. En este artículo, lo guiaremos sobre cómo puede diseñar su arquitectura Bloc para el módulo de búsqueda.

OBJETIVO : Para empezar, intentaremos crear una aplicación con un campo de búsqueda que pueda tener páginas de búsqueda consecutivas y guardar todos los resultados.

requisitos previos:

• Debe tener un conocimiento básico de Lógica de Negocios y Gestión de Estado Global

Empecemos.

Implementación:

Lo primero es lo primero, implementemos un bloque básico llamado Búsqueda que está creando un archivo de bloque, un archivo de eventos, estados y un repositorio para obtener datos de forma local o remota.

import 'package:equatable/equatable.dart';
import 'package:flutter/material.dart';
import 'package:medcomp/models/med.model.dart';
 
class SearchEvent extends Equatable {
  @override
  List<Object> get props => [];
}
 
class SearchEventLoadData extends SearchEvent {
  final String str;
  SearchEventLoadData({@required this.str});
}

Este es el archivo de eventos que habrías creado en el primer intento después de tener un conocimiento básico de flutter, así que ahora lo que queremos que hagas es agregar una lista de List of str que almacenará todas las frases o strings buscadas anteriormente. Para guardar sus resultados y ahorrar tiempo al usuario, también puede crear una lista de su modelo de resultados para almacenarlos en su bloque. Llamémoslo Lista de modelo de resultados . Además, cree una clase más que extienda SearchEvent que se invocará cuando se abra una página de resultados en particular.

class SearchEventLoadData extends SearchEvent {
  final List strList;
  final List<DataModel> dataList;
  SearchEventLoadData({@required this.strList, @required this.dataList});
}
 
class SearchEventPopSearch extends SearchEvent {}

Dado que ahora hemos creado variables para almacenar nuestros elementos buscados anteriormente, es hora de implementar los estados. Aquí, el concepto básico es exponer la lista completa de datos al modelo de vista y representar el último elemento de la lista porque estamos usando la pila y los últimos datos enviados fueron la búsqueda reciente.

import 'package:equatable/equatable.dart';
 
class SearchState extends Equatable {
  @override
  List<Object> get props => [];
}
 
class SearchStateNotLoaded extends SearchState {}
 
class SearchStateLoading extends SearchState {}
 
class SearchStateLoaded extends SearchState {
  final List<String> strList;
  final List<ResultModel> dataList;
  SearchStateLoaded(this.strList, this.dataList);
}
 
class SearchStateError extends SearchState {
  final message;
  SearchStateError(this.message);
}

Ahora es el momento de agregar una capa de archivo de bloque para combinar estos componentes. Hemos creado un SearchRepo que será responsable de obtener los datos de la API o de las bases de datos locales y permitir que el archivo del repositorio funcione normalmente.

import 'package:bloc/bloc.dart';
import 'package:medcomp/events/search.event.dart';
import 'package:medcomp/models/search.model.dart';
import 'package:medcomp/repositories/search.repo.dart';
import 'package:medcomp/states/search.state.dart';
 
class SearchBloc extends Bloc<SearchEvent, SearchState> {
  @override
  SearchState get initialState => SearchStateNotLoaded();
 
  SearchRepo _searchRepo = SearchRepo();
 
  @override
  Stream<SearchState> mapEventToState(SearchEvent event) async* {
    if (event is SearchEventLoadData) {
      yield SearchStateLoading();
      try {
        ResultModel resultModel = await this._searchRepo.getDetails(event.strList.last);
        event.dataList.add(resultModel);
        if (search == null) {
          String error = this._searchRepo.message;
          yield SearchStateError(error);
        } else {
          yield SearchStateLoaded(event.strList, event.dataList);
        }
      } catch (e) {
        yield SearchStateError(e);
      }
    }
 
    if (event is SearchEventPopSearch) {
      try {
        if (state is SearchStateLoaded) {
          var oldState = (state as SearchStateLoaded);
          yield SearchStateLoading();
          oldState.strList.removeLast();
          oldState.dataList.removeLast();
          yield SearchStateLoaded(oldState.strList, oldState.dataList);
        } else {
          yield SearchStateError('state is SearchStateLaoded false');
        }
      } catch (e) {
        yield SearchStateError('Error in search remove $e');
      }
    }
  }
}