Can't load an image from gallery with image_picker fails in Flutter

Question

I'm quite newbie in Flutter, I have wrote a simple app which opens the gallery, so the user will pick an image, but both on emulator and physical device i get the same error:

════════ Exception caught by image resource service ════════

following assertion was thrown resolving an image codec: Unable to load asset: /data/user/0/com.example.upload_image_example/cache /image_picker915145764706640017.jpg

Image provider: AssetImage(bundle: null, name: "/data/user/0/com.example.upload_image_example/cache/image_picker915145764706640017.jpg") Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#c486d(), name: "/data/user/0/com.example.upload_image_example/cache/image_picker915145764706640017.jpg", scale: 1.0)

I have checked the path, the photo indeed exists in this path.

I have updated the pubspec.yaml for using other images in my assets directory. but the problem arrives when i pick a photo with the image picker:

var photo = await ImagePicker.pickImage(source: ImageSource.gallery);
  setState(() {
      imageFile = photo;
    });

Widget _ImageView() {
    if (imageFile == null) {
      return CircleAvatar(
        radius: 80.0,
        backgroundImage: AssetImage('assets/images/avatar_blank.jpeg'),
      );
    } else {
      return CircleAvatar(
        radius: 80.0,
        backgroundImage: AssetImage(imageFile.path), // <---- HERE I receive the ERROR!!
      );
    }
  }

What am I doing wrong?

Does anybody have some suggestion?

Answer 1

You can copy paste run full code below
You need FileImage

code snippet

return CircleAvatar(
        radius: 80.0,
        backgroundImage: FileImage(imageFile),
      );

working demo

full code

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget { 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(      
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  File imageFile;

  void _incrementCounter() async{
    var photo = await ImagePicker.pickImage(source: ImageSource.gallery);
    setState(() {
      imageFile = photo;
    });

    setState(() {     
      _counter++;
    });
  }

  Widget _ImageView() {
    if (imageFile == null) {
      return CircleAvatar(
        radius: 80.0,
        backgroundImage: AssetImage('assets/images/avatar_blank.jpeg'),
      );
    } else {
      return CircleAvatar(
        radius: 80.0,
        backgroundImage: FileImage(imageFile),
      );
    }
  }

  @override
  Widget build(BuildContext context) {   
    return Scaffold(
      appBar: AppBar(        
        title: Text(widget.title),
      ),
      body: Center(       
        child: Column(          
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _ImageView(),
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), 
    );
  }
}

Answer 2

The problem is that Flutter interprets the images of the storage differently than the assets, you can solve it like this:

Widget _ImageView() {
if (imageFile == null) {
  return CircleAvatar(
    radius: 80.0,
    backgroundImage: AssetImage('assets/images/avatar_blank.jpeg'),
  );
} else {
  return CircleAvatar(
    radius: 80.0,
    backgroundImage: FileImage(imageFile), // storageImage
  );
}
}

Answer 3

This Worked for me: https://stackoverflow.com/a/60368338/8168140

simplified code is:

image: new DecorationImage(
      image: FileImage(_image),
      fit: BoxFit.cover,
),