title: How to upload multiple images using Dio and multi_image_picker plugin in Flutter
body: <p>I want to upload multiple-images using Dio and multi_image_picker plug-in in Flutter.</p>
  
  <p><code>List&lt;Asset&gt;</code> this is the problem because I can't convert from <code>List&lt;Asset&gt;</code> to <code>List&lt;File&gt;</code> so if you have any solutions help me.</p>
  
  <p>try to use:</p>
  
  <ol>
  <li><p><code>multi_image_picker: ^4.6.1</code></p></li>
  <li><p><code>dio: ^3.0.4</code></p></li>
  </ol>
  
  <p>Thanks</p>
  
  <p>Bona SR.</p>
  
  <pre><code>import 'dart:io';
  import 'package:dio/dio.dart';
  import 'package:flutter/material.dart';
  import 'package:flutter_secure_storage/flutter_secure_storage.dart';
  import 'package:merchantside/helper/colorhelper.dart';
  import 'package:merchantside/merchantside/login.dart';
  import 'dart:async';
  import 'package:multi_image_picker/multi_image_picker.dart';
  
  class ListImages extends StatefulWidget {
    String errorMessage = "";
    @override
    _ListImagesState createState() =&gt; new _ListImagesState();
  }
  
  class _ListImagesState extends State&lt;ListImages&gt; {
    List&lt;Asset&gt; images = List&lt;Asset&gt;();
    List&lt;File&gt; listImages = [];
    @override
    void initState() {
      super.initState();
    }
  
    Widget buildGridView() {
      return GridView.count(
        crossAxisCount: 3,
        children: List.generate(images.length, (index) {
          Asset asset = images[index];
          return AssetThumb(
            asset: asset,
            width: 300,
            height: 300,
          );
        }),
      );
    }
  
  
    void _uploadFiles() async {
      String uid = await FlutterSecureStorage().read(key: "getTocken");
      try {
        var dio = Dio();
        FormData formData = new FormData.fromMap({
          "pictures[]": images, 
        });
        Response resp = await dio.post(
          mainUrl + 'merchant/upload-galleries',
          data: formData,
          onSendProgress: (int sent, int total) {
            //
          }, 
          options: Options(
            headers: {
              HttpHeaders.authorizationHeader: uid,
            },
          )
        );
        if(resp.statusCode == 200) {
          print("============= Print Resp data: ");
          print(resp.data);
        }
  
      } catch (e) {
        print(e);
      }
    }
  
    Future&lt;void&gt; loadAssets() async {
      List&lt;Asset&gt; resultList = List&lt;Asset&gt;();
      try {
        resultList = await MultiImagePicker.pickImages(
          maxImages: 6,
          enableCamera: true,
          selectedAssets: images,
          cupertinoOptions: CupertinoOptions(takePhotoIcon: "chat"),
          materialOptions: MaterialOptions(
            actionBarColor: "#abcdef",
            actionBarTitle: "Example App",
            allViewTitle: "All Photos",
            useDetailsView: false,
            selectCircleStrokeColor: "#000000",
          ),
        );
      } on Exception catch (e) {
        print(e);
      }
  
      // If the widget was removed from the tree while the asynchronous platform
      // message was in flight, we want to discard the reply rather than calling
      // setState to update our non-existent appearance.
      if (!mounted) return;
      setState(() {
        images = resultList;
      });
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        floatingActionButton: FloatingActionButton(
          heroTag: "btn1",
          backgroundColor: ColorHelper.orange,
          child: Icon(Icons.add_photo_alternate),
          onPressed: loadAssets,
        ),
        appBar: new AppBar(
          title: Text('បញ្ជីរូបភាព'),
          backgroundColor: ColorHelper.orange,
        ),
        body: Column(
          children: &lt;Widget&gt;[
            //Error message
            errorMessage != "" ? 
            Container(
              margin: EdgeInsets.only(left: 10, right: 10, top: 10),
              height: 50,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(4)),
                color: ColorHelper.red.withOpacity(0.5),
              ),
              child: Center(
                child: Text("$errorMessage", style: TextStyle(color: ColorHelper.swhite, fontSize: 15),),
              ),
            ):
            Container(),
  
            Expanded(
              child: Container(
                margin: EdgeInsets.only(left: 10, right: 10, top: 10),
                child: buildGridView(),
              ),
            ),
            SafeArea(
              child: Container(
                margin: EdgeInsets.all(10),
                decoration: BoxDecoration(
                  color: ColorHelper.green,
                  borderRadius: BorderRadius.all(Radius.circular(4))
                ),
                height: 50,
                child: InkWell(
                  onTap: () {
                    if(images.length &gt; 0) {
                      setState(() {
                        errorMessage = "";
                      });
                      // Call function upload multiple files
                      _uploadFiles();
                    } else {
                      setState(() {
                        errorMessage = "សូមបញ្ជូលរូបភាព";
                      });
                    } 
                  },
                  child: Center(
                    child: Text("រួចរាល់", style: TextStyle(color: ColorHelper.swhite, fontSize: 15, fontWeight: FontWeight.w500,),),
                  ),
                ),
              ),
            ),
          ],
        ),
      );
    }
  }
  </code></pre>