격리를 사용하여 UI 버벅거림 방지 | Flutter 다중 처리

Flutter는 종종 메인 스레드라고 하는 단일 스레드에서 UI가 실행되는 곳에서 비동기적으로 실행된다는 것을 알고 계실 것입니다. 이제 무거운 계산 기능을 실행해야 할 때 앱이 해당 기능으로 바쁘기 때문에 정지되고 버벅거림을 발견하게 됩니다.

여기에서 Isolates가 작동합니다. 이것은 다트/플러터에서 스레드를 생성하고 메인 스레드가 중단되는 것을 방지하는 방법입니다.

Isolates는 약간 까다롭지만 상황이 왔을 때 유용하고 이것이 완벽한 상황이었습니다. 처리를 위해 이미지를 로드하고 API로 보내야 했습니다. 그것을 방지합니다.

compute 함수와 함께 isolates를 사용하는 가장 쉬운 방법 중 하나를 살펴보겠습니다.

실행할 함수

먼저 실행할 함수가 필요합니다. 이 함수는 이미지를 로드하고 http와 함께 API로 보냅니다.

Future<Uint8List?> requestImg(RequestInputs reqInputs) async {
  File file = File(reqInputs.filePath!);

  final http.MultipartRequest request = http.MultipartRequest(
    'POST',
    Uri.parse('server:uri'),
  );
  final Map<String, String> headers = <String, String>{'Content-type': 'multipart/form-data'};

  final img_proc.Image tmp = img_proc.decodeImage(await file.readAsBytes())!;
  final List<int> tosend = img_proc.encodeJpg(tmp);

  request.files.add(http.MultipartFile.fromBytes(
    'file',
    tosend,
    filename: 'aism_source',
    contentType: MediaType('image', 'jpeg'),
  ));

  request.headers.addAll(headers);
  request.fields.addAll(reqInputs.settings);
  final http.StreamedResponse res = await request.send();
  debugPrint('Request settings sent');

  Uint8List responseImage = await res.stream.toBytes();
  return responseImage;
}

이제 내 함수에는 둘 이상의 인수가 필요했지만 계산 함수는 하나의 함수만 허용하므로 이를 해결하기 위해 사용자 지정 클래스를 사용하여 모든 데이터를 전달합니다.

class RequestInputs {
  final String? filePath;
  final Map<String, String> settings;

  RequestInputs(this.filePath, this.externalPath, this.settings);
}

계산 기능

함수와 사용자 지정 클래스가 있습니다. 컴퓨팅을 사용하여 격리에서 실행하는 방법을 살펴보겠습니다.

// #1
compute<StickerRequestInputs, Uint8List?>(
  requestImg,
  StickerRequestInputs(
    imgPath,
    storage,
    settings,
  ),
// #2
).then((value) => setState(() {
      loading = false;
      if (value != null) {
        imgBytes = value;
        saveImage(value);
      } else {
        debugPrint('Error!');
      }
    }));

먼저 compute 문 #1에서 함수 입력 및 출력 유형을 선언해야 합니다. compute<Q,R> Q는 입력 유형이고 R은 반환 유형입니다.

그런 다음 실행할 함수와 입력을 전달합니다. 이 경우 선언한 사용자 지정 클래스를 인스턴스화합니다.

컴퓨팅은 반환 유형 R #2의 미래입니다. async 또는 .then을 사용하여 완료 후 작업을 수행할 수 있습니다. 이 경우 새 데이터로 상태를 업데이트하거나 실패하면 오류를 인쇄합니다.

모든 코드를 살펴보는 비디오를 시청하고 앱의 진행 상황을 보려면 구독하세요 :D


좋습니다. 그게 다입니다. 저는 계속해서 분리물과 함께 작업하고 우리가 그들로 무엇을 할 수 있는지 알아볼 것입니다.