Image.file is not showing image, Link appearing at top left with choose file button

Question

I am trying to pick image clicking on the dummy image, It can browse the image but not able to show. Instead returning an extra button which i have not even made with link of the opened file.

import 'dart:io';

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

class PickedImageUser extends StatefulWidget {
  @override
  _PickedImageUserState createState() => _PickedImageUserState();
}

class _PickedImageUserState extends State<PickedImageUser> {
  File _image;
  final picker = ImagePicker();

  Future getImage() async {
    final pickedFile = await picker.getImage(source: ImageSource.camera);

    setState(() {
      if (pickedFile != null) {
        _image = File(pickedFile.path);
      } else {
        print('No image selected.');
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      child: GestureDetector(
        onTap: getImage,
        child: Column(children: <Widget>[
          _image == null ? Text('No image selected.') : Image.file(_image),
        ]),
      ),
    );
  }
}

Image file showing the src and not created button

Solved my problem using – Neelkant Newra Apr 17 '21 at 16:36 — Neelkant Newra, Apr 17 '21 at 16:36
how did you get rid of choose button? – Door D Uthpala Aug 18 '22 at 16:46 — Door D Uthpala, Aug 18 '22 at 16:46

score 0 · Accepted Answer · answered Apr 17 '21 at 16:39

Instead of using image_picker: ^0.7.4

use flutter_web_image_picker: ^0.0.2.

Example code

import 'package:flutter/material.dart';
import 'package:flutter_web_image_picker/flutter_web_image_picker.dart';

class ImagePickerPage extends StatefulWidget {
  @override
  _ImagePickerPageState createState() => _ImagePickerPageState();
}

class _ImagePickerPageState extends State<ImagePickerPage> {
  Image image;
  @override
  Widget build(BuildContext context) {
    return Material(
        child: Column(
      children: <Widget>[
        GestureDetector(
          onTap: () async {
            final _image = await FlutterWebImagePicker.getImage;
            setState(() {
              image = _image;
            });
          },
          child: InteractiveViewer(
            child: Container(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height * 0.6,
                child: image != null
                    ? image
                    : Image.asset('assets/images/dummy_image.webp')),
          ),
        ),
      ],
    ));
  }
}

Here I am using a dummy image as reference image where we can click and browse

Image.file is not showing image, Link appearing at top left with choose file button

1 Answers1