Image.file 未显示图像，Link 显示在左上角并带有选择文件按钮

Question

我正在尝试通过点击虚拟图片来选择图片，它可以浏览图片但无法显示。而不是返回一个额外的按钮，我什至没有用打开的文件的 link 制作。

import 'dart:io';

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

class PickedImageUser extends StatefulWidget {
  @override
  _PickedImageUserState createState() => _PickedImageUserState();
}

class _PickedImageUserState extends State<PickedImageUser> {
  File _image;
  final picker = ImagePicker();

  Future getImage() async {
    final pickedFile = await picker.getImage(source: ImageSource.camera);

    setState(() {
      if (pickedFile != null) {
        _image = File(pickedFile.path);
      } else {
        print('No image selected.');
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      child: GestureDetector(
        onTap: getImage,
        child: Column(children: <Widget>[
          _image == null ? Text('No image selected.') : Image.file(_image),
        ]),
      ),
    );
  }
}

Image file showing the src and not created button

Answer 1

而不是使用 image_picker：^0.7.4

使用 flutter_web_image_picker: ^0.0.2.

示例代码

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

class ImagePickerPage extends StatefulWidget {
  @override
  _ImagePickerPageState createState() => _ImagePickerPageState();
}

class _ImagePickerPageState extends State<ImagePickerPage> {
  Image image;
  @override
  Widget build(BuildContext context) {
    return Material(
        child: Column(
      children: <Widget>[
        GestureDetector(
          onTap: () async {
            final _image = await FlutterWebImagePicker.getImage;
            setState(() {
              image = _image;
            });
          },
          child: InteractiveViewer(
            child: Container(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height * 0.6,
                child: image != null
                    ? image
                    : Image.asset('assets/images/dummy_image.webp')),
          ),
        ),
      ],
    ));
  }
}

这里我使用了一张虚拟图片作为参考图片，大家可以点击浏览

Image.file 未显示图像，Link 显示在左上角并带有选择文件按钮

Image.file is not showing image, Link appearing at top left with choose file button

flutter

flutter-layout

flutter-web

flutter-image