我有一个Flutter应用程序，我在GridView中显示一个图像库。GalleryModel类负责使用loadImagesFromDirectory（）方法从设备的存储中加载图像。然而，当我第一次导航到画廊屏幕时，应用程序冻结了一小会儿，变得没有React。我怀疑这种冻结是由GalleryModel的构造函数中所有图像的同步加载引起的。
为了解决这个问题并改善用户体验，我正在寻找关于如何处理图像的异步加载而不冻结应用程序的建议。我考虑过使用FutureBuilder或StreamBuilder小部件，但我不确定如何在此上下文中实现它们。此外，我会很感激任何关于这个问题的潜在原因和替代解决方案，以提高我的画廊的性能的见解。
gallery.dart:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../widgets/image_container.dart';
import '../models/gallery_model.dart';

class Gallery extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;

    return Padding(
      padding: EdgeInsets.all(12),
      child: Consumer<GalleryModel>(
        builder: (context, galleryModel, _) {
          return GridView.builder(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisSpacing: 10,
              mainAxisSpacing: 10,
              crossAxisCount: (width / 150).round(),
            ),
            itemCount: galleryModel.imageFiles.length,
            itemBuilder: (context, index) {
              final imageFile = galleryModel.imageFiles[index];
              return ImageContainer(
                imageSource: imageFile,
                borderRadius: 5,
              );
            },
          );
        },
      ),
    );
  }
}

gallery_model.dart：

import 'dart:io';
import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';

class GalleryModel extends ChangeNotifier {
  List<File> _imageFiles = [];
  List<File> get imageFiles => _imageFiles;

  GalleryModel() {
    loadImagesFromDirectory();
  }

  Future<void> loadImagesFromDirectory() async {
    Directory directory = await getApplicationDocumentsDirectory();
    List<FileSystemEntity> files = directory.listSync();
    _imageFiles = files
        .where((file) {
          return file is File && file.path.endsWith('.jpg');
        })
        .map((file) => File(file.path))
        .toList();
    notifyListeners();
  }

  Future<void> addImage(Uint8List imageData) async {
    final directory = await getApplicationDocumentsDirectory();
    final imageFile = File('${directory.path}/${DateTime.now().microsecondsSinceEpoch.toString()}.jpg');
    await imageFile.writeAsBytes(imageData);

    _imageFiles.add(imageFile);
    notifyListeners();
  }

  Future<void> deleteImage(File imageFile) async {
    await imageFile.delete();
    _imageFiles.remove(imageFile);
    notifyListeners();
  }
}

提前感谢您的帮助！