How can I send from Flutter to a web service information using form-data (image, latitude, longitude, etc)?

Question

I'm currently working on a mobile application that needs to send an image and other information to a web application. I have already the picture and the geolocation of the information that I need to send. However, I'm having trouble sending that information to my web service in a form-data structure.

Postman example:

My flutter screen where I need to send this information is built like this:

class ConfirmationScreen extends StatefulWidget {
  final XFile? pictureFile;
  final Uri uri = 'http://127.0.0.1:5000/analyze';
  final Position? position;
  const ConfirmationScreen({this.pictureFile, this.position, Key? key}) : super(key: key);

  @override
  State<ConfirmationScreen> createState() => _ConfirmationScreenState();
}

class _ConfirmationScreenState extends State<ConfirmationScreen> {

}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Confirmation")),
      body: Column(
        children: [
          Image.file(File(widget.pictureFile!.path)),
          Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                primary: Colors.red, 
                textStyle: const TextStyle(color: Colors.white)
                ),
              onPressed: (){}, 
              child: const Text("BACK"),),
            const Padding(
              padding: EdgeInsets.fromLTRB(30.0,0,0,0)),
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                primary: Colors.green,
                textStyle: const TextStyle(color: Colors.white)
                ),
              // Image.file(File(widget.pictureFile!.path))
              onPressed: (){
                // need to send the form-data information here
              }, 
              child: const Text("SEND"))
          ],
          ),
          Padding(
          padding: const EdgeInsets.all(8.0), 
          child: Text(
            style: const TextStyle(
              backgroundColor: Colors.white),
              widget.position!.latitude.toString()
              )
              ),
          Padding(
          padding: const EdgeInsets.all(8.0), 
          child: Text(
            style: const TextStyle(
              backgroundColor: Colors.white),
              widget.position!.longitude.toString()
              )
              ),
        ],
      ),
    );
  }
}

I'm having a lot of trouble working with this type of image and also how to send more than only the image to my web service using flutter. If anyone knows a dependency or function that can help me solve this issue please tell me in the comment. Thanks!!

Answer 1

Use MultipartRequest on http package.

var request = http.MultipartRequest('POST', Uri.https('example.com', 'create'))
  ..fields['user'] = 'nweiz@google.com'
  ..files.add(await http.MultipartFile.fromPath(
      'package', 'build/package.tar.gz',
      contentType: MediaType('application', 'x-tar')));