Bloc: API polling causes Android emulator to lag

[samuelobe]

Hi Felix! I'm working on a Flutter shuttle tracking app for my school using the BLoC pattern. I am utilizing the flutter_map widget to load my map. There is an API that contains info such as routes, stops, and locations of shuttles which is where I get my data from. For now I can't use websockets so I must resort to polling. With my current implementation, I can poll every 5 seconds and display the correct info on my map. However, the android emulator progressively gets very laggy. How can I optimize my implementation to prevent this?

MapPage.dart

class MapPage extends StatefulWidget {
  @override
  _MapPageState createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  ShuttleBloc shuttleBloc;

  @override
  void initState() {
    super.initState();
    shuttleBloc = BlocProvider.of<ShuttleBloc>(context);
    shuttleBloc.add(GetShuttleMap());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child:
            BlocBuilder<ShuttleBloc, ShuttleState>(builder: (context, state) {
          if (state is ShuttleInitial) {
            print('state is initial');
            return buildInitialState();
          } else if (state is ShuttleError) {
            print('state has error');
            return buildErrorState(state.message);
          } else if (state is ShuttleLoaded) {
            print('state is loaded');
            shuttleBloc.add(RefreshShuttleMap());
            return buildLoadedState(state.routes, state.location, state.stops,
                state.updates, state.mapkey);
          }
          print('state is loading');
          return buildLoadingState();
        }),
      ),
    );
  }
}

shuttle_bloc.dart

class ShuttleBloc extends Bloc<ShuttleEvent, ShuttleState> {
  /// Initialization of repository class
  final ShuttleRepository repository;

  /// ShuttleBloc named constructor
  ShuttleBloc({this.repository});

  @override
  ShuttleState get initialState => ShuttleInitial();

  @override
  Stream<ShuttleState> mapEventToState(
    ShuttleEvent event,
  ) async* {
    var routes = <Polyline>[];
    var location = <Marker>[];
    var updates = <Marker>[];
    var stops = <Marker>[];
    var mapkey = <Widget>[];
    if (event is GetShuttleMap) {
      yield ShuttleLoading();
      try {
        routes = await repository.getRoutes;
        stops = await repository.getStops;
        location = await repository.getLocation;
        updates = await repository.getUpdates;
        mapkey = repository.getMapkey;
        yield ShuttleLoaded(routes, location, updates, stops, mapkey);
      } catch (e) {
        yield ShuttleError(message: e.toString());
      }
    } else if (event is RefreshShuttleMap) {
      await new Future.delayed(const Duration(seconds: 5));
      try {
        routes = await repository.getRoutes;
        stops = await repository.getStops;
        location = await repository.getLocation;
        updates = await repository.getUpdates;
        mapkey = repository.getMapkey;
        yield ShuttleLoaded(routes, location, updates, stops, mapkey);
      } catch (e) {
        yield ShuttleError(message: e.toString());
      }
    }
  }

}

[felangel]

Hi @samuelobe 👋
Thanks for opening an issue!

Are you able to use the dev-tools to profile the application on a real device? You can check out the docs for instructions on how to do that and it might help pin-point the underlying issue. In general, polling isn't ideal but I would highly recommend profiling on real devices instead of using the emulator as a reference 👍

[samuelobe]

Okay I'll try that. Thank you!

[felangel]

Closing for now but feel free to comment with additional questions and I’m happy to continue the conversation 👍

[samuelobe]

I actually figured out the issue. It had nothing to do with BLoC I was just dummy. The layers on the map are contained in lists and I never implemented a way to maintain the list size. Thus, I had 100's of layers on my map which caused it to lag. Thanks for the fast response though!