Flutter: 使用 pickImage 后,Image.file(File(path)) 在 errorBuilder 后不会刷新图像。

huangapple go评论62阅读模式
英文:

Flutter: Image.file(File(path)) does not refresh the image after errorBuilder using pickImage

问题

我的应用程序允许用户从图库选择图像并将其保存到之前创建的文件夹中,然后将该图像的路径保存到数据库中。当我进入应用程序页面时,我有一个函数从数据库中读取路径,然后我使用该路径显示图像,使用Image.file(File(path))。一切都运行正常,但如果用户意外删除文件夹中的图像,我会收到异常,所以我只是使用errorBuilder来向用户显示找不到图像。问题是,当我在显示errorBuilder后选择图像时,图像不会刷新,直到我退出页面并返回它,而当没有图像时,选择图像后会立即更改。选择器函数:

  Future _pickerLogo() async {
    final XFile? image = await _picker.pickImage(source: ImageSource.gallery);
    File imageFile = File(image!.path);
    imageName = path.basename(imageFile.path);
    localImage = await imageFile.copy('${f.imageAppDir}/$imageName');
   setState(() {
      print(localImage);
      dbPath = localImage.toString();
      cleanPath = dbPath.replaceAll("File: '", "").replaceAll("'", "");
      dbPath = cleanPath;
      print('cleanPath when picker $cleanPath');
      print('dbpath when picker $dbPath');
    });
  }

Image.file:

                 Container(
                    color: Colors.grey.shade100,
                    height: 200,
                    width: 200,
                    child: dbPath != ''
                        ? Image.file(
                            File(dbPath),
                            errorBuilder: imageNotExist,
                            fit: BoxFit.fill,
                          )
                        : Image.asset('assets/logo.png'),
                  ),

errorBuilder Widget:

  Widget imageNotExist(context, exception, stackTrack) {
    print('exception: $context');
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        const Icon(
          Icons.error,
          color: Colors.orange,
        ),
        Text(
          AppLocal.loc.imageNotExist,
          style: const TextStyle(color: Colors.redAccent),
          textAlign: TextAlign.center,
        )
      ],
    );
  }
英文:

My app let the user to pick an image from gallery and save it to a folder that I created before, then save the path of that image to the database, and when I enter to the page of my application I have a function to read the path from the database and then I use that path to display the image using Image.file(File(path)) every thing works fine but if the user delete the image by accident from the folder I got an exception so I just use errorBuilder to show the user that image not found. The problem is when I pick the image after the errorBuilder shown the image does not refresh until I exit the page and return to it while when there is no image and when I pick the image its change directly.

picker function:

  Future _pickerLogo() async {
    final XFile? image = await _picker.pickImage(source: ImageSource.gallery);
    File imageFile = File(image!.path);
    imageName = path.basename(imageFile.path);
    localImage = await imageFile.copy('${f.imageAppDir}/$imageName');
   setState(() {
      print(localImage);
      dbPath = localImage.toString();
      cleanPath = dbPath.replaceAll("File: '", "").replaceAll("'", "");
      dbPath = cleanPath;
      print('cleanPath when picker $cleanPath');
      print('dbpath when picker $dbPath');
    });
  }

Image.file:

                 Container(
                    color: Colors.grey.shade100,
                    height: 200,
                    width: 200,
                    child: dbPath != ''
                        ? Image.file(
                            File(dbPath),
                            errorBuilder: imageNotExist,
                            fit: BoxFit.fill,
                          )
                        : Image.asset('assets/logo.png'),
                  ),

errorBuilder Widget:

  Widget imageNotExist(context, exception, stackTrack) {
    print('exception: $context');
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        const Icon(
          Icons.error,
          color: Colors.orange,
        ),
        Text(
          AppLocal.loc.imageNotExist,
          style: const TextStyle(color: Colors.redAccent),
          textAlign: TextAlign.center,
        )
      ],
    );
  }

答案1

得分: 0

未能在不使用`setState`的情况下使其正常工作,所以我添加了一个if语句,如果图像的名称存在于数据库中,那么我会更改数据库路径(`dbPath`),但除非我将其放在`setState`中,否则它不起作用。
英文:

After many attempts and found that if I select another image the Image.file refreshed the widget, so I did an if statement that if the name of image exist in database then I change the database path which is dbPath and its not working unless I put it in setState.

Future _pickerLogo() async {
    final XFile? image = await _picker.pickImage(source: ImageSource.gallery);
    File imageFile = File(image!.path);
    imageName = path.basename(imageFile.path);
    //solution begin here
    if (path.basename(imageFile.path) == path.basename(dbPath)) {
      print('dbPath : $dbPath');
      setState(() {
        dbPath = '1';
      });
      print('dbPath : $dbPath');
    } else {
      print('not exist');
    }
    //end solution
    localImage = await imageFile.copy('${f.imageAppDir}/$imageName');

    setState(() {
      print(localImage);
      dbPath = localImage.toString();
      cleanPath = dbPath.replaceAll("File: '", "").replaceAll("'", "");
      dbPath = cleanPath;
      print('cleanPath when picker $cleanPath');
      print('dbpath when picker $dbPath');
    });
  }

huangapple
  • 本文由 发表于 2023年6月8日 23:22:41
  • 转载请务必保留本文链接:https://go.coder-hub.com/76433404.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定