Flutter上傳多張圖片

最近研究了幾天上傳圖片，看了視頻資料後上傳一張圖片是沒問題了，自己有深究了一下一次上傳多張圖片的情況，自己琢磨出個思路~

首先引入依賴：image_picker，當然還有別的大家可以自行選擇，有個multy_image_picker依賴也可以，是一次選擇多張圖片的~然後在你需要上傳的文件中引入文件：import 'package:image_picker/image_picker.dart';和import 'dart:io';接下來是代碼：

import 'package:flutter/material.dart';

import 'package:image_picker/image_picker.dart';
import 'dart:io';

class SignCommitPage extends StatefulWidget {
  final arguments;

  SignCommitPage({Key key, this.arguments}) : super(key : key);
  _SignCommitPageState createState() => _SignCommitPageState(this.arguments);
}

class _SignCommitPageState extends State<SignCommitPage> {
  final arguments;
  _SignCommitPageState(this.arguments);

  //控制listview滾動條
  ScrollController _controller = new ScrollController();
  //上傳圖片用，定義一個list用來存放需要上傳的圖片
  List _img = new List();

  //輸入框組件
  Widget _textFieldWidget () {
    //listview滾動條保持在最後
    Timer(Duration(milliseconds: 0), () => _controller.jumpTo(_controller.position.maxScrollExtent));
    return Container(
      padding: EdgeInsets.only(left: ScreenAdapter.width(20.0), right: ScreenAdapter.width(20.0)),
      child: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              this._img == null ? Expanded(
                flex: 1,
                child: Text(""),
              ) : Expanded(
                flex: 1,
                child: Container(
                  width: double.infinity,
                  height: ScreenAdapter.width(150.0),
                  child: ListView.builder(
                    controller: _controller,   //滾動條控制器
                    shrinkWrap: true,
                    scrollDirection: Axis.horizontal,
                    itemCount: this._img.length,
                    itemBuilder: (context, index){
                      return Container(
                        width: ScreenAdapter.width(150.0),
                        height: ScreenAdapter.width(150.0),
                        margin: EdgeInsets.only(right: ScreenAdapter.width(10.0)),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(4.0),
                            border: Border.all(
                              style: BorderStyle.solid,
                              color: Colors.black26,
                            )
                        ),
                        child: Image.file(this._img[index], fit: BoxFit.cover,),
                      );
                    },
                  ),
                ),
              ),
              InkWell(
                child: Container(
                  width: ScreenAdapter.width(150.0),
                  height: ScreenAdapter.width(150.0),
                  margin: EdgeInsets.only(right: ScreenAdapter.width(10.0)),
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(4.0),
                      border: Border.all(
                        style: BorderStyle.solid,
                        color: Colors.black26,
                      )
                  ),
                  child: Center(
                    child: Icon(Icons.camera_alt),
                  ),
                ),
                onTap: _openGallery,
              )
            ],
          )
        ]
      )
    );
  }

  //選擇相冊照片
  void _openGallery () async {
    var imageUrl = await ImagePicker.pickImage(source: ImageSource.gallery, maxHeight: ScreenAdapter.width(150.0), maxWidth:ScreenAdapter.width(150.0));
    setState(() {
      //向集合中添加數據
      this._img.add(imageUrl);
    });
    //後面寫上上傳邏輯就可以了
  }

  @override
  Widget build(BuildContext context) {
    ScreenAdapter.init(context);
    return Scaffold(
      appBar: AppBar(
        leading: InkWell(
          child: Icon(Icons.keyboard_return),
          onTap: (){
            Navigator.pop(context);
          },
        ),
        title: Text("上傳圖片"),
      ),
      body: ListView(
        children: <Widget>[
          _textFieldWidget(),
        ],
      ),
    );
  }
}

功能實現，如下圖：

選擇圖片前：

選擇圖片後：