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

How to return value from future function in flutter

i create function of upload image to the app. so i creted repeated button that share same onpressed() future function

class _HomePage5State extends State<HomePage5> {
  // This is the file that will be used to store the image
  File? _image;
  File? _image2;
  late String pickerType;
  // This is the image picker
  final _picker = ImagePicker();
  // Implementing the image picker
  Future _openImagePicker(String pickerType,File? pImage ) 

  async {
    
    XFile? pickedImage ;
    switch (pickerType) {
      case "gallery":

        /// GALLERY IMAGE PICKER
        pickedImage  = await _picker.pickImage(
            source: ImageSource.gallery);
        break;

      case "camera": // CAMERA CAPTURE CODE
        pickedImage  = await _picker.pickImage(
            source: ImageSource.camera);
        break;
    }
    if (pickedImage != null) {
      setState(() {
        debugPrint("SELECTED IMAGE PICK   $pickedImage");
        pImage = File(pickedImage!.path);
      });
    } else {
      print("You have not taken image");
    }

 }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
          child: Padding(
            padding: const EdgeInsets.all(35),
            child: Column(children: [
              Center(
                // this button is used to open the image picker
                child: ElevatedButton(
                  onPressed:  () {
                      _settingModalBottomSheet(context, _image);
                    },
                  child: const Text('Select An Image'),
                ),
              ),
              const SizedBox(height: 35),
              // The picked image will be displayed here
              Container(
                alignment: Alignment.center,
                width: double.infinity,
                height: 300,
                color: Colors.grey[300],
                child: _image != null
                    ? Image.file(_image!, fit: BoxFit.cover)
                    : const Text('Please select an image'),
              ),
              Center(
                // this button is used to open the image picker
                child: ElevatedButton(
                  onPressed:  () {
                      _settingModalBottomSheet(context , _image2);
                    },
                  child: const Text('Select An Image'),
                ),
              ),
              const SizedBox(height: 35),
              // The picked image will be displayed here
              Container(
                alignment: Alignment.center,
                width: double.infinity,
                height: 300,
                color: Colors.grey[300],
                child: _image2!= null
                    ? Image.file(_image2!, fit: BoxFit.cover)
                    : const Text('Please select an image'),
              )
            ]),
          ),
        ));
  }

i also create setting modal for repeated variable too, so i dont have to copy same function for every variable i have

void _settingModalBottomSheet(context , File? _imag) {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext bc) {
          return Wrap(
            children: <Widget>[
              ListTile(
                  title: const Text('Gallery'),
                  onTap: () => {
                        _openImagePicker("gallery", _imag),
                        Navigator.pop(context),
                      }),
              ListTile(
                title: const Text('Camera'),
                onTap: () => {
                  _openImagePicker("camera", _imag),
                  Navigator.pop(context)
                },
              ),
              
            ],
          );
        });
  }

but when i run the project, seems like future function didn’t return image file value so image container still null/empty

Tags:

2

Answers


  1. 0

    var value=await _openImagePicker();

    Login or Signup to reply.
  2. 0

    you got null because you are set wrong variable.

    • use _openImagePicker() as Future<File?> function.
    Future<File?> _openImagePicker(String pickerType) async { 
  XFile? pickedImage ;
  switch (pickerType) {
   case "gallery":
     /// GALLERY IMAGE PICKER
      pickedImage  = await _picker.pickImage(
          source: ImageSource.gallery);
        break;
      case "camera": // CAMERA CAPTURE CODE
        pickedImage  = await _picker.pickImage(
            source: ImageSource.camera);
        break;
    }
    if (pickedImage != null) {
      debugPrint("SELECTED IMAGE PICK   $pickedImage");
      final  tempImg = File(pickedImage!.path);
       return tempImg; 
    } else {
      print("You have not taken image");
    }
    return null;
 }

    show dialog is also a Future function. you can actually call the _openImagePicker() inside the dialog. but i prefer separate them.

    Future<String?> _settingModalBottomSheet(context) {
    return showModalBottomSheet(
        context: context,
        builder: (BuildContext bc) {
          return Wrap(
            children: <Widget>[
              ListTile(
                  title: const Text('Gallery'),
                  onTap: () => {
                        //  this will close dialog and return "galery"
                        Navigator.pop(context,"galery"),
                      }),
              ListTile(
                title: const Text('Camera'),
                onTap: () => {
                 // this will close dialog and return "camera"
                  Navigator.pop(context,"camera"); 
                },
              ),
              
            ],
          );
        });
  }

    now use it :

    Center(
    // this button is used to open the image picker
    child: ElevatedButton(
       onPressed:  ()async {
         // call dialog and get value "camera" or "galery"
          final type = await  _settingModalBottomSheet(context);
             if(type != null){
               // call image pikcer
              final pickedFile = await _openImagePicker(type);
                if(pickedFile !=null){ 
                   // set here
                   setState(()
                       _image2 = pickedFile;
                     {});
                 }
              }
             
                  },
        child: const Text('Select An Image'),),
  ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search