Flutter FutureProvider is blocking UI until Future has finished

Question

I am trying to load an excel file in the background and then display its content to the user. I am using the excel package to load and read it and a FutureProvider for inserting the data into the widget tree. As the reading takes quite some time I am doing it asynchronously. However, whenever the App gets to the widget that contains the FutureBuilder, it freezes and only continues once the Future is done.

Reading the file:

Future<Excel> _readExcelFile(String path) async {
  ByteData data = await rootBundle.load(path);
  var bytes = data.buffer.asUint8List(data.offsetInBytes, data.lengthInBytes);
  var excel = Excel.decodeBytes(bytes);

  return excel;
}

The FutureBuilder

MultiProvider(
  providers: [
    FutureProvider(
      create: (context) async => MenuProvider().loadMenu(),
      lazy: false,
    ),
  ],
  child: MyApp(),
)

The MenuProvider().loadMenu() method calls the _readExcelFile(String path) method and parses the data. As I said, the app freezes on start and only continues rendering once the Future is complete. Is there a way to load and parse the excel file without blocking the UI thread? Or is my only option to show a splash screen until the data is ready?

Edit:

@override
Widget build(BuildContext context) {
  var weekMenu = Provider.of<List<DayMenu>>(context);

  if (weekMenu != null) {
    print(weekMenu[0].date.toString());

    return PageView(
      children: [
        // PageView children
      ],
    );
  } else {
    return Text("Loading data...");
  }
}

I assumed that you didn't need one. I have edited the question to include the part where I use the provider. — derivmug, Dec 02 '20 at 13:49
Does this answer your question? [What is a Future and how do I use it?](https://stackoverflow.com/questions/63017280/what-is-a-future-and-how-do-i-use-it) — nvoigt, Dec 02 '20 at 14:12
How can I get the future from the Provider? Can I just use weekMenu? — derivmug, Dec 02 '20 at 14:43
I think my problem is not that the Future is blocking my UI, but that the task of reading the excel file is just taking to long. As seen in the example here: https://flutter.dev/docs/cookbook/networking/background-parsing Unfortunately it doesn't seem like I can use compute() for it, as I am using more complex data types. — derivmug, Dec 02 '20 at 16:15

score 0 · Answer 1 · edited Jun 04 '23 at 16:12

If someone faces some Issues like this. Me helped the following article:

https://medium.flutterdevs.com/multithreading-in-flutter-aa07e2ae2971#:~:text=Multithreading%20allows%20for%20parallel%20execution,tasks%20at%20the%20same%20time.

Isolates should do the trick.

Or in my case, a Future was blocking my UI: I just wrapped it with "compute" function from package import 'dart:async';

Sample:

@override
Stream<List<CameraFrameModel>> encodeJpegBytes() async* {

  List<CameraFrameModel> empty = [];

  yield empty;

  List<CameraFrameModel> res = await compute(ImageConvertCustom().convertToJpegBytes, recordedData);

  yield res;
}

Flutter FutureProvider is blocking UI until Future has finished

1 Answers1