flutter 如何显示从图像拾取器中拾取的图像

pkln4tw6 于 2023-01-06 发布在 Flutter

关注(0)|答案(2)|浏览(204)

我有这个代码。我可以选择我的画廊，但它不显示图像。需要帮助，谢谢！

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

来源：https://stackoverflow.com/questions/74415865/how-can-i-display-image-picked-from-image-picker

2条答案

按热度按时间

nkoocmlb1#

试试这个：
而不是这样：

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')),

赞(0）回复(0）举报 2023-01-06

z2acfund2#

我还想使用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'),
              ),
            ],
          ),
        )
      ],
    );
  }
}

赞(0）回复(0）举报 2023-01-06

我来回答

flutter 如何显示从图像拾取器中拾取的图像

2条答案

相关问题

热门标签

最新问答