How can I display an image from Image_picker and dart:io?

Question

I'm currently working on a program where the user would be able to select an image to analyze the text in the image and keep getting the following error while trying to get display the selected image in the following code-block:

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

error - The argument type 'File?' can't be assigned to the parameter type 'File'

error message:

Here is what I have thus far

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),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

I've tried different solutions and keep getting some sort of error different from the other, one of the solution being using Image.file(pickedImage!) as ImageProvider<Object> and Image.file(pickedImage!) as ImageProvider but that brought about a different error (red screen after selecting image from gallery):

type 'image' is not a subtype of type 'imageprovider<object>' in type cast

I've also tried changing the type cast but that does not seem to make a difference, yielding the same result.

score 0 · Answer 1 · answered Jul 10 '23 at 01:14

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

//Hopefully this might be the solution you are looking for

How can I display an image from Image_picker and dart:io?

1 Answers1