Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Image not displaying in the container using Future Function but is display when i use image Widget

The code is suppose to display a picture in the container but its not displaying anything! other than the text. I used Image.asser() and that works and displays an image in the container but when i use SelectedImage and store a picture in it using Future Function from gallery or camera that doesn’t work and won’t display any picture in the Container
when i provide SelectedImage directly i-e child: SelectedImage i get this error
The argument type ‘File?’ can’t be assigned to the parameter type ‘Widget?’

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:project1_test/theme/Textstyle.dart';
import 'package:project1_test/theme/colors.dart';

class ImageSelectionfunction extends StatefulWidget {
  const ImageSelectionfunction({super.key});

  @override
  State<ImageSelectionfunction> createState() => _ImageSelectionfunctionState();
}

class _ImageSelectionfunctionState extends State<ImageSelectionfunction> {
  @override
  Widget build(BuildContext context) {
    File? SelectedImage;
    Future<void> pickImage() async {
      final picker = ImagePicker();
      final pickedImage = await picker.pickImage(source: ImageSource.gallery);
      if (pickedImage != null) {
        setState(() {
          SelectedImage = File(pickedImage.path);
        });
      }
    }

    return Column(
      children: <Widget>[
        Center(
         //The below container is suppose to display the picture
          child: Container( 
            width: 220,
            height: 190,
            decoration: const BoxDecoration(color: Colors.white, boxShadow: [
              BoxShadow(
                color: Colors.grey,
                offset: Offset(0, 4),
                blurRadius: 5,
                spreadRadius: 5,
              )
            ]),
            child: SelectedImage != null
                ? Image.file(File(SelectedImage!.path))
                : const Text('Your Image here'),
          ),
        ),
        SizedBox(
          height: 35,
        ),

        ////////////////////////////
        //Image Selection Buttons
        //////////////////////////
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Container(
              width: 180,
              decoration: BoxDecoration(
                color: purpleColor,
              ),
              child: Row(
                children: [
                  const Padding(
                    padding: EdgeInsets.only(left: 8),
                    child: Icon(
                      FontAwesomeIcons.image,
                      color: Colors.white,
                      size: 17,
                    ),
                  ),
                  TextButton(
                    child: const Text(
                      'Pick From Gallery',
                      style: txtStyle,
                    ),
                    onPressed: () {
                      pickImage();
                    },
                  ),
                ],
              ),
            ),
            Container(
              width: 160,
              decoration: BoxDecoration(
                color: purpleColor,
              ),
              child: Row(
                children: [
                  const Padding(
                    padding: EdgeInsets.only(left: 8),
                    child: Icon(
                      FontAwesomeIcons.camera,
                      color: Colors.white,
                      size: 17,
                    ),
                  ),
                  TextButton(
                    child: const Text(
                      'Take a Picture',
                      style: txtStyle,
                    ),
                    onPressed: () {},
                  ),
                ],
              ),
            ),
          ],
        ),
        ////////////////////////
        //Buttons Area Ends Here
        ////////////////////////

        ///////////////////////
        //Prediction Button
        ///////////////////////
        SizedBox(
          height: 12,
        ),
        Container(
          width: 180,
          height: 60,
          color: purpleColor,
          child: Row(children: [
            Padding(
              padding: const EdgeInsets.only(left: 10),
              child: Icon(
                FontAwesomeIcons.magnifyingGlass,
                color: Colors.white,
                size: 18,
              ),
            ),
            SizedBox(
              width: 12,
            ),
            Text(
              'Start Prediction',
              style: txtStylemain,
            ),
          ]),
        )
        //////////////////////////////
        //Prediction Button Ends Here
        ////////////////////////////
      ],
    );
  }
}
Tags:

2

Answers


  1. 0 
    Image.file(File(SelectedImage!.path))

    I believe this should be changed to this since you are already assigning File type to SelectedImage variable

    Image.file(SelectedImage)
    Login or Signup to reply.
  2. 0

    In your code, you put SelectedImage declaration inside the build method. When you use setState, the build method will be recalled and SelectedImage will be redeclared with the initial value null.

    To fix it, move your SelectedImage variable outside the build method (put it in the widget state).

    class _ImageSelectionfunctionState extends State<ImageSelectionfunction> {
  File? SelectedImage;
  
  @override
  Widget build(BuildContext context) {
    // ...
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search