Why does my asynchronous function freeze the UI? - macos

Question

I'm building a Flutter app to send MIDI SysEx messages using a plugin called flutter_midi_command. It uses a binding to a Swift class to send MIDI messages via CoreMIDI on MacOS and iOS. The overall process in the app is the following:
User selects MIDI device -> User selects file -> File is sent via MIDI.
These steps are implemented in separate screens. The file is read in the update_select widget and passed into the updater widget. There's a LinearProgressIndicator to display feedback to the user.
My problem is, that the progress indicator of the updater screen is not shown while the data is sent. In my understanding, I have to start sending the data after the widget is built because the progress needs to be updated. I think the sending function must be asynchronous because the UI would freeze otherwise. But for some reason the UI still freezes. What am I missing here?
updater.dart (there's the problem)
import 'dart:async';
import 'dart:developer' as dev;
import 'dart:io';
import 'dart:typed_data';
import 'package:flutter/scheduler.dart';
import 'package:flutter/material.dart';
import 'package:flutter_midi_command/flutter_midi_command.dart';
import 'oxi_one.dart' as oxiOne;
import 'package:oxi_companion_flttr/common/oxi_theme.dart';
class Updater extends StatefulWidget {
#override
_UpdaterState createState() => _UpdaterState();
}
class _UpdaterState extends State<Updater> {
MidiCommand _midiCommand = MidiCommand();
double _progress = 0;
#override
void initState() {
super.initState();
WidgetsBinding.instance?.addPostFrameCallback((_) async {
final Uint8List _syxData = ModalRoute.of(context)?.settings.arguments as Uint8List;
send(_syxData).then((value) => null).whenComplete(() => Navigator.of(context).pushNamedAndRemoveUntil('/update_succeeded', (_)=>(false)));
});
void dispose() {
_midiCommand.disconnectDevice(oxiOne.OxiOne().device);
super.dispose();
}
Future<void> send(Uint8List _syxData) async {
_midiCommand.connectToDevice(oxiOne.OxiOne().device);
int chunkSize = _syxData.indexWhere((element) => element == 0xf7) + 1;
int chunks = (_syxData.lengthInBytes % chunkSize == 0) ?
_syxData.lengthInBytes ~/ chunkSize :
_syxData.lengthInBytes ~/ chunkSize + 1;
for (int chunkCount = 1, start = 0, end = chunkSize; chunkCount <= chunks; chunkCount++ ){
if (chunkCount == chunks){
dev.log("sending last chunk: ");
_midiCommand.sendData(_syxData.sublist(start));
} else {
_midiCommand.sendData(_syxData.sublist(start, end));
dev.log("last byte of this chunk $chunkCount is ${_syxData[end-1]}");
}
start = chunkCount*chunkSize;
end = start+chunkSize;
sleep(Duration(milliseconds: 190));
if (chunkCount == chunks) {
return;
} else {
setState(() {
_progress = 100/chunks*chunkCount;
});
}
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: OxiAppBar(
title: Text(
"Installing update",
style: TextStyle(
fontWeight: FontWeight.w100,
fontSize: 24
),
),
disableNav: true
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
alignment: Alignment.center,
height: 80.0,
padding: const EdgeInsets.only(left: 40, right: 40),
child: LinearProgressIndicator(
value: _progress,
minHeight: 8,
),
),
Text(
"Update in progress, hold your breath!",
style: TextStyle(
fontSize: 12.0
),
)
],
),
),
);
}
}
update_select.dart (passes the data as Uint8List to the updater)
import 'dart:developer' as dev;
import 'dart:io';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:file_picker/file_picker.dart' as mobilePicker;
import 'package:file_picker_desktop/file_picker_desktop.dart' as desktopPicker;
import 'oxi_one.dart' as oxiOne;
import 'package:oxi_companion_flttr/common/oxi_theme.dart';
class UpdateSelect extends StatefulWidget {
#override
_UpdateSelectState createState() => _UpdateSelectState();
}
class _UpdateSelectState extends State<UpdateSelect> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: OxiAppBar(
title: Text(
"Install Update",
style: TextStyle(
fontWeight: FontWeight.w100,
fontSize: 24
),
),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
children: [
Container(
alignment: Alignment.center,
height: 80.0,
child: Text("Your Oxi One firmware is up2date!"),
)
],
mainAxisAlignment: MainAxisAlignment.center,
),
Row(
children: [
TextButton(
onPressed: _selectUpdate,
child: Text(
"I feel adventurous!",
style: TextStyle(
fontSize: 12.0
),
)
)
],
mainAxisAlignment: MainAxisAlignment.center,
)
],
),
)
);
}
void _selectUpdate() async {
Uint8List? syxData;
if (Platform.isLinux || Platform.isMacOS || Platform.isWindows) {
desktopPicker.FilePickerResult? result = await desktopPicker.pickFiles(
dialogTitle: "Select update file",
allowedExtensions: ["syx"],
type: desktopPicker.FileType.custom,
withData: true
);
if (result != null) {
syxData = result.files.first.bytes as Uint8List;
} else {
Navigator.of(context).pushNamedAndRemoveUntil('/update_file_fail', (_)=>(false));
}
} else {
mobilePicker.FilePickerResult? result = await mobilePicker.FilePicker.platform.pickFiles(
type: mobilePicker.FileType.any,
withData: true
);
if (result != null) {
syxData = result.files.single.bytes as Uint8List;
} else {
Navigator.of(context).pushNamedAndRemoveUntil('/update_file_fail', (_)=>(false));
}
}
Navigator.of(context).pushNamedAndRemoveUntil('/updater', (_)=>(false), arguments: syxData);
}
}