在小部件 Flutter 中预加载先前保存的图像

如何解决在小部件 Flutter 中预加载先前保存的图像

我有一组来自 API 的图像，正在检索 var listing。本质上，我希望能够预加载从 initState() 方法中列出的图像并在小部件中显示加载的图像，但我也允许用户访问从图库上传图像。我不知道如何把所有东西放在一起。

所以我的问题是从 API 中提取的图像需要 image.network() 才能工作，而图库中的图像需要 image.file() 显示。

所以我认为一个更好的主意是能够在 initState 上将图像加载到小部件，而不是尝试从构建中的 Api 检索图像，因为重建可能会发生很多次。

这是我当前的代码。任何帮助都会很有帮助。

class FourthPage extends StatefulWidget {
  var listing;
  var isImageComingFromApi = true;
  FourthPage({this.listing});
  @override
  _FourthPageState createState() => _FourthPageState();
}

class _FourthPageState extends State<FourthPage> {
  bool fromAPI = false;
  List<String> listOfImagesFromAPI = [];
  List<File> listOfImagesFromDevice = [];
  List<Image> myApiImages = [];

  @override
  void dispose() {
    super.dispose();
  }

  void _convertStringsToFile() {
    fromAPI = true;
    for (int i = 0; i < widget.listing.imageDetails.length; i++) {
      if (widget.listing.imageDetails[i] != null) {
        listOfImagesFromAPI.add(widget.listing.imageDetails[i].toString());
      }
    }
    images = listOfImagesFromAPI.map((e) => File(e)).toList();
  }

  @override
  void initState() {
    setState(() {
      _convertStringsToFile();
    });
    super.initState();
  }

  // save the result of gallery fileUserOptions
  File galleryFile;

  @override
  Widget build(BuildContext context) {
    //display image selected from gallery
    imageSelectorGallery() async {
      fromAPI = false;
      widget.isImageComingFromApi = false;
      galleryFile = await ImagePicker.pickImage(
          source: ImageSource.gallery,imageQuality: 20);
      if (images.length < 5) {
        // fromAPI = false;
        listOfImagesFromDevice.add(galleryFile);
        images.add(galleryFile);
      } else {
        // fromAPI = false;
        listOfImagesFromDevice.add(galleryFile);
        listOfImagesFromDevice.removeLast();
        images.removeLast();
        images.add(galleryFile);
      }
      setState(() {});
    }

    return new SingleChildScrollView(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(bottom: 7),child: Text(
              "Upload Picture",style: TextStyle(fontFamily: "Montserrat Medium",fontSize: 20),),Padding(
            padding: const EdgeInsets.only(bottom: 20),child: Text(
              "Lorem ipsum dolor sit amet,consectetur",style: TextStyle(
                  fontFamily: "Montserrat Regular",color: sankaraGreyColor,fontSize: 12),new RaisedButton(
            child: new Text('+'),onPressed: imageSelectorGallery,SizedBox(height: 20),new Container(
            height: 2000,child: GridView.count(
              crossAxisSpacing: 6,mainAxisSpacing: 6,crossAxisCount: 3,children: List.generate(images.length,(index) {
                return Column(children: <Widget>[
                  // Container(
                  //     height: 90,//     width: 80,//     decoration: BoxDecoration(
                  //       borderRadius: BorderRadius.circular(10),//     ),//     child: ClipRRect(
                  //       borderRadius: BorderRadius.circular(400),//       child: Image.network(images[index].path.toString(),//           fit: BoxFit.cover),//       // borderRadius: BorderRadius.circular(10),//     )),Container(
                      height: 90,width: 80,decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),child: ClipRRect(
                        borderRadius: BorderRadius.circular(400),child: Image.network(listOfImagesFromAPI[index],fit: BoxFit.cover),// borderRadius: BorderRadius.circular(10),)),GestureDetector(
                    onTap: () {
                      setState(() {
                        // images.removeAt(index);
                      });
                    },child: Padding(
                      padding: const EdgeInsets.all(0.0),child: Align(
                        alignment: Alignment.bottomRight,child:
                            Icon(Icons.cancel,color: Colors.black,size: 20),widthFactor: 3.8,heightFactor: 0.25,]);
              }),)
        ],);
  }

  Widget displaySelectedFile(File file) {
    return new SizedBox(
      height: 200.0,width: 300.0,//child: new Card(child: new Text(''+galleryFile.toString())),//child: new Image.file(galleryFile),child: file == null
          ? new Text('Sorry nothing selected!!')
          : new Image.file(file),);
  }
}