title: How can I select and upload Multiple images in Flutter
body: <p>I tried to find how to select and upload multiple images in flutter but most of the plugins are not working or I did not understand them well. I found little application but it selects and upload only one picture. How to change this code  that user can select and upload multiple pictures or is there any other alternatives. Please write in details, i am freshman in coding. Thanks in advance. </p>
  
  <pre><code>import 'package:flutter/material.dart';
  import 'dart:io';
  import 'package:http/http.dart' as http;
  import 'package:image_picker/image_picker.dart';
  import 'package:mime/mime.dart';
  import 'dart:convert';
  import 'package:http_parser/http_parser.dart';
  import 'package:toast/toast.dart';
  
  void main() =&gt; runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
          title: 'Image Upload Demo',
          theme: ThemeData(primarySwatch: Colors.pink),
          home: ImageInput());
    }
  }
  
  class ImageInput extends StatefulWidget {
    @override
    State&lt;StatefulWidget&gt; createState() {
      return _ImageInput();
    }
  }
  
  class _ImageInput extends State&lt;ImageInput&gt; {
    // To store the file provided by the image_picker
    File _imageFile;
  
    // To track the file uploading state
    bool _isUploading = false;
  
    String baseUrl = 'http://YOUR_IPV4_ADDRESS/flutterdemoapi/api.php';
  
    void _getImage(BuildContext context, ImageSource source) async {
      File image = await ImagePicker.pickImage(source: source);
  
      setState(() {
        _imageFile = image;
      });
  
      // Closes the bottom sheet
      Navigator.pop(context);
    }
  
    Future&lt;Map&lt;String, dynamic&gt;&gt; _uploadImage(File image) async {
      setState(() {
        _isUploading = true;
      });
  
      // Find the mime type of the selected file by looking at the header bytes of the file
      final mimeTypeData =
          lookupMimeType(image.path, headerBytes: [0xFF, 0xD8]).split('/');
  
      // Intilize the multipart request
      final imageUploadRequest =
          http.MultipartRequest('POST', Uri.parse(baseUrl));
  
      // Attach the file in the request
      final file = await http.MultipartFile.fromPath('image', image.path,
          contentType: MediaType(mimeTypeData[0], mimeTypeData[1]));
  
      // Explicitly pass the extension of the image with request body
      // Since image_picker has some bugs due which it mixes up
      // image extension with file name like this filenamejpge
      // Which creates some problem at the server side to manage
      // or verify the file extension
      imageUploadRequest.fields['ext'] = mimeTypeData[1];
  
      imageUploadRequest.files.add(file);
  
      try {
        final streamedResponse = await imageUploadRequest.send();
  
        final response = await http.Response.fromStream(streamedResponse);
  
        if (response.statusCode != 200) {
          return null;
        }
  
        final Map&lt;String, dynamic&gt; responseData = json.decode(response.body);
  
        _resetState();
  
        return responseData;
      } catch (e) {
        print(e);
        return null;
      }
    }
  
    void _startUploading() async {
      final Map&lt;String, dynamic&gt; response = await _uploadImage(_imageFile);
      print(response);
      // Check if any error occured
      if (response == null || response.containsKey("error")) {
        Toast.show("Image Upload Failed!!!", context,
            duration: Toast.LENGTH_LONG, gravity: Toast.BOTTOM);
      } else {
        Toast.show("Image Uploaded Successfully!!!", context,
            duration: Toast.LENGTH_LONG, gravity: Toast.BOTTOM);
      }
    }
  
    void _resetState() {
      setState(() {
        _isUploading = false;
        _imageFile = null;
      });
    }
  
    void _openImagePickerModal(BuildContext context) {
      final flatButtonColor = Theme.of(context).primaryColor;
      print('Image Picker Modal Called');
      showModalBottomSheet(
          context: context,
          builder: (BuildContext context) {
            return Container(
              height: 150.0,
              padding: EdgeInsets.all(10.0),
              child: Column(
                children: &lt;Widget&gt;[
                  Text(
                    'Pick an image',
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  SizedBox(
                    height: 10.0,
                  ),
                  FlatButton(
                    textColor: flatButtonColor,
                    child: Text('Use Camera'),
                    onPressed: () {
                      _getImage(context, ImageSource.camera);
                    },
                  ),
                  FlatButton(
                    textColor: flatButtonColor,
                    child: Text('Use Gallery'),
                    onPressed: () {
                      _getImage(context, ImageSource.gallery);
                    },
                  ),
                ],
              ),
            );
          });
    }
  
    Widget _buildUploadBtn() {
      Widget btnWidget = Container();
  
      if (_isUploading) {
        // File is being uploaded then show a progress indicator
        btnWidget = Container(
            margin: EdgeInsets.only(top: 10.0),
            child: CircularProgressIndicator());
      } else if (!_isUploading &amp;&amp; _imageFile != null) {
        // If image is picked by the user then show a upload btn
  
        btnWidget = Container(
          margin: EdgeInsets.only(top: 10.0),
          child: RaisedButton(
            child: Text('Upload'),
            onPressed: () {
              _startUploading();
            },
            color: Colors.pinkAccent,
            textColor: Colors.white,
          ),
        );
      }
  
      return btnWidget;
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Image Upload Demo'),
        ),
        body: Column(
          children: &lt;Widget&gt;[
            Padding(
              padding: const EdgeInsets.only(top: 40.0, left: 10.0, right: 10.0),
              child: OutlineButton(
                onPressed: () =&gt; _openImagePickerModal(context),
                borderSide:
                    BorderSide(color: Theme.of(context).accentColor, width: 1.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: &lt;Widget&gt;[
                    Icon(Icons.camera_alt),
                    SizedBox(
                      width: 5.0,
                    ),
                    Text('Add Image'),
                  ],
                ),
              ),
            ),
            _imageFile == null
                ? Text('Please pick an image')
                : Image.file(
                    _imageFile,
                    fit: BoxFit.cover,
                    height: 300.0,
                    alignment: Alignment.topCenter,
                    width: MediaQuery.of(context).size.width,
                  ),
            _buildUploadBtn(),
          ],
        ),
      );
    }
  }
  </code></pre>