flutter 显示从图库中选取的图像

Question

我只是想选择一个图像并将其显示在我的应用程序中。为此，我正在使用 Flutter Image Picker 。我添加了所有依赖项，我可以选择图像，但无法显示它...

这是我尝试过的:

class _AddMemoryPageState extends State<AddMemoryPage> {
  final picker = ImagePicker();
  late Future<PickedFile?> pickedFile;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.secondary,
      body: SafeArea(
        child: Column(
          children: [
            Row(
              children: [
                Padding(
                  padding: EdgeInsets.only(
                    top: 15,
                    left: 25,
                  ),
                  child: IconButtonWithExpandedTouchTarget(
                    onTapped: () {
                      Navigator.pop(context);
                    },
                    svgPath: 'assets/icons/down.svg',
                  ),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                IconButtonWithExpandedTouchTarget(
                  onTapped: () async {
                    pickedFile = picker
                        .getImage(
                          source: ImageSource.camera,
                        )
                        .whenComplete(() => {setState(() {})});
                  },
                  svgPath: 'assets/icons/camera.svg',
                ),
                SizedBox(
                  width: scaleWidth(50),
                ),
                IconButtonWithExpandedTouchTarget(
                  onTapped: () async {
                    pickedFile = picker
                        .getImage(
                          source: ImageSource.gallery,
                        )
                        .whenComplete(() => {setState(() {})});
                  },
                  svgPath: 'assets/icons/gallery.svg',
                ),
              ],
            ),
            FutureBuilder(
              future: pickedFile,
              builder: (context, data) {
                if (data.hasData) {
                  return Container(
                    height: 200.0,
                    child: Image.file(
                      data.data as File,
                      fit: BoxFit.contain,
                      height: 200.0,
                    ),
                    color: Colors.blue,
                  );
                }
                return Container(
                  height: 200.0,
                  color: Colors.blue,
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

但是这不起作用:

LateInitializationError: Field 'pickedFile' has not been initialized.

我在这里缺少什么？处理这个问题的正确方法是什么？我找不到任何关于此的最新教程/文档。如果您需要更多信息，请告诉我!

Answer 1

您基本上忘记了在文件中转换 de PickerFile 并初始化变量 PickFile late Future<PickedFile?> pickedFile = Future.value(null); .

要转换文件中的 PickerFile，您只需执行以下操作:

File(data.data!.path)

我对您的代码进行了一些修改，现在可以显示图像:

  final picker = ImagePicker();
  late Future<PickedFile?> pickedFile = Future.value(null);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey,
      body: SafeArea(
        child: Column(
          children: [
            Row(
              children: [
                Padding(
                  padding: EdgeInsets.only(
                    top: 15,
                    left: 25,
                  ),
                  child: IconButton(
                    onPressed: () {
                      Navigator.pop(context);
                    },
                    icon: Icon(Icons.download_rounded),
                  ),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                IconButton(
                  onPressed: () async {
                    pickedFile = picker.getImage(source: ImageSource.camera).whenComplete(() => {setState(() {})});
                  },
                  icon:Icon(Icons.add)
                ),
                SizedBox(
                  width: 100,
                ),
                IconButton(
                  onPressed: () async {
                    pickedFile = picker
                        .getImage(
                      source: ImageSource.gallery,
                    )
                        .whenComplete(() => {setState(() {})});
                  },
                  icon:Icon(Icons.photo_camera_back),
                ),
              ],
            ),
            FutureBuilder<PickedFile?>(
              future: pickedFile,
              builder: (context, snap) {
                if (snap.hasData) {
                  return Container(
                    child: Image.file(
                      File(snap.data!.path),
                      fit: BoxFit.contain,
                    ),
                    color: Colors.blue,
                  );
                }
                return Container(
                  height: 200.0,
                  color: Colors.blue,
                );
              },
            ),
          ],
        ),
      ),
    );
  }