如何显示从图像选择器中选择的图像答案

【问题标题】：How can I display image picked from image picker如何显示从图像选择器中选择的图像
【发布时间】：2023-01-04 03:02:48
【问题描述】：

我有这个代码。我可以在我的图库中选择一张图片，但它没有显示。需要帮助，谢谢！

import 'dart:io';
import 'package:file_picker/file_picker.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:camera/camera.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:image/image.dart' as Im;
import 'package:path_provider/path_provider.dart';
import 'package:image_picker/image_picker.dart';
import 'package:uuid/uuid.dart';
import 'package:flutter_dev/home.dart';

class Add extends StatefulWidget {
  const Add ({super.key});

  @override
  State<Add> createState() => _AddState();
}

class _AddState extends State<Add> {

  File? imageFile;

  selectFile() async {
    XFile? file = await ImagePicker().pickImage(
    source: ImageSource.gallery, maxHeight: 1800, maxWidth: 1800);
    
    if (file != null) {
      setState(() {
        imageFile = File(file.path);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return FractionallySizedBox(
        heightFactor: MediaQuery.of(context).size.height * 0.00095,
        child: Center(
            child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (imageFile != null)
              Expanded(
              child : Container(
              child: Image.file(
                File(imageFile!.path),
                fit: BoxFit.cover,
              ),
             ),
            ),
            Column(
              children: [
                ElevatedButton(
                    onPressed: selectFile, child: const Text('Select file')),
                ElevatedButton(
                    onPressed: () {}, child: const Text('Open camera')),
                ElevatedButton(
                    onPressed: () {}, child: const Text('Upload file')),
              ],
            )
          ],
        )
      )
    );
   }
  }

【问题讨论】：

标签： flutter dart imagepicker

【解决方案1】：

试试这个：

而不是这个：

    child: Image.file(
            File(imageFile!.path),
            fit: BoxFit.cover,
          ),

替换为：

//...
    child: Image.file(
            imageFile!,
            fit: BoxFit.cover,
          ),

并改变这个：

        ElevatedButton(
                onPressed: selectFile, child: const Text('Select file')),

有了这个：

        ElevatedButton(
                onPressed: () async { await selectFile();}, child: const Text('Select file')),

【讨论】：

你是上帝谢谢
您的应用程序看起来很有趣，选择它作为正确答案将有助于有相同问题的人解决它
我们必须等待 5 分钟才能接受答案

【解决方案2】：

每个人。我也想使用 image_picker: ^0.8.3+2 来拍照并稍后使用，但看起来版本 0.8.3 没有任何作用......我花了 2 天时间弄清楚可能有什么问题，终于找到了.

适用于 image_picker: ^0.8.3+2 的代码如下：

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

class UserImagePicker extends StatefulWidget {
  const UserImagePicker({super.key});

  @override
  State<UserImagePicker> createState() => _UserImagePickerState();
}

class _UserImagePickerState extends State<UserImagePicker> {
  String _imagepath = '';
  final ImagePicker imgpicker = ImagePicker();
  Future getImage() async {
    try {
      var pickedFile = await imgpicker.pickImage(source: ImageSource.camera);
      if (pickedFile != null) {
        setState(() {
          _imagepath = pickedFile.path;
        });
      } else {
        print("No image is selected.");
      }
    } catch (e) {
      print("error while picking image.");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        CircleAvatar(
          radius: 40,
          backgroundImage: FileImage(File(_imagepath)),
        ),
        TextButton(
          onPressed: getImage,
          child: Row(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                margin: EdgeInsets.only(top: 5),
                child: Icon(
                  Icons.image,
                ),
              ),
              Container(
                padding: EdgeInsets.only(
                  top: 4,
                  left: 10,
                ),
                child: Text('Add profle picture'),
              ),
            ],
          ),
        )
      ],
    );
  }
}

【讨论】：