如何显示Image_picker和dart:io中的图像?

euoag5mw  于 2023-07-31  发布在  其他
关注(0)|答案(1)|浏览(123)

我目前正在开发一个程序,用户可以选择一个图像来分析图像中的文本,并在尝试在以下代码块中显示所选图像时不断出现以下错误:

InkWell(
            onTap: () => optionsDialog(context),
            child: Image(
              height: 200,
              width: 200,
              image: filePath == null ? AssetImage('images/ocr.png') : FileImage(filePath), 
              fit: BoxFit.fill,
            ),
          ),

字符串

  • error -参数类型“File?'无法分配给参数类型'File'

错误信息:
x1c 0d1x的数据

这是我目前为止

import 'dart:io';

import 'package:flutter/material.dart';
import '../utils/text_style.dart';
import 'package:image_picker/image_picker.dart';
//import '../services/photo_picker.dart';

class ScanTextPage extends StatefulWidget {
  @override
  State<ScanTextPage> createState() => _ScanTextPageState();
}

class _ScanTextPageState extends State<ScanTextPage> {
  File? filePath;

  optionsDialog(BuildContext context){
    return showDialog(
      context: context,
      builder: (context) {
        return SimpleDialog(
          children: [
            SimpleDialogOption(
              onPressed: () => pickImage(ImageSource.gallery),
              child: Text(
                'Photo Gallery',
                style: textStyle(20, Colors.black, FontWeight.w300),
              ),
            ),
            SimpleDialogOption(
              onPressed: () => pickImage(ImageSource.camera),
              child: Text(
                'Camera',
                style: textStyle(20, Colors.black, FontWeight.w300),
              ),
            ),
            SimpleDialogOption(
              onPressed: () => Navigator.pop(context),
              child: Text(
                'Cancel',
                style: textStyle(20, Colors.black, FontWeight.w800),
              ),
            ),
          ],
        );
      },
    );
  } 

  // TODO refactor this to exist in seperate file
pickImage(ImageSource source) async{
    final image = await ImagePicker().pickImage(source: source);
    setState(() {
      filePath = File(image!.path);
    });
    Navigator.pop(context);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.copy, size: 28),
        backgroundColor: Color(0XFFEC360E),
      ),
      backgroundColor: Color(0XffF8F9FB),
      body: SingleChildScrollView(
        child: Container(
          alignment: Alignment.center,
          child: Column(
            children: [
              SizedBox(
                height: 50, // + MediaQuery.of(context).viewInsets.top,
              ),
              Text(
                'Text Recognition',
                style: textStyle(35,Color(0xFF1738EB).withOpacity(0.6), FontWeight.w800),
              ),
              SizedBox(height: 30,), 
              InkWell(
                onTap: () => optionsDialog(context),
                child: Image(
                  height: 200,
                  width: 200,
                  image: filePath == null ? AssetImage('images/ocr.png') : FileImage(filePath),
                  fit: BoxFit.fill,
                ),
              ),
              SizedBox(
                height: 30,
              ),
              //TODO Add parsed text dynamically
              Text(
                "Lorem Ipsu",
                style:textStyle(25, Color(0xFF1738BE).withOpacity(0.6), FontWeight.w600),
              ),
            ],
          ),
        ),
      ),
    );
  }
}


我尝试了不同的解决方案,并不断得到一些不同的错误,其中一个解决方案是使用Image.file(pickedImage!) as ImageProvider<Object>Image.file(pickedImage!) as ImageProvider,但这带来了不同的错误(从图库中选择图像后出现红色屏幕):

  • 类型“image”不是类型强制转换中类型“imageprovider”的子类型

我也尝试过改变类型转换,但似乎没有什么区别,得到的结果是一样的。

rxztt3cl

rxztt3cl1#

InkWell(
              onTap: () => optionsDialog(context),
              child: filePath == null
                  ? const Image(
                      image: AssetImage('assetName'),
                      fit: BoxFit.contain,
                    )
                  : Image(
                      image: FileImage(filePath!),
                      fit: BoxFit.contain,
                    )),

字符串
//希望这可能是您正在寻找的解决方案

相关问题