廢話少說(shuō)排龄，先看一下效果波势，主要功能：
1.可以選擇多張本地圖片
2.可以實(shí)現(xiàn)拍照
3.可以實(shí)現(xiàn)選擇圖片排列
4.可以實(shí)現(xiàn)圖片的刪除

在這里插入圖片描述

在這里插入圖片描述

1.導(dǎo)入依賴

1.依賴如下

image_pickers: ^1.0.8+7

如果先了解更多的功能，可以去看這個(gè)依賴說(shuō)明地址橄维。

2.導(dǎo)入依賴步驟

導(dǎo)入框架前得把build.gradle的版本改為19到29之間尺铣，如圖所示:

在這里插入圖片描述

我使用的軟件為android studio，步驟如下圖：

在這里插入圖片描述

2.所有代碼如下：

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:image_pickers/image_pickers.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<File> _image=[];

  Future getImage() async {
    List<Media> _listImagePaths = await ImagePickers.pickerPaths(
        galleryMode: GalleryMode.image,
        selectCount: 2,
        showGif: false,
        showCamera: true,
        compressSize: 500,
        uiConfig: UIConfig(uiThemeColor: Color(0xffff0f50)),
        cropConfig: CropConfig(enableCrop: false, width: 2, height: 1));

    setState(() {
      if (_listImagePaths != null) {
        for(int i=0;i<_listImagePaths.length;i++) {
          _image.add(File(_listImagePaths[i].path.toString()));
        }
      } else {
        print('No image selected.');
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Picker Example'),
      ),
      body: Center(
        child:Wrap(
          spacing: 5,
          runSpacing: 5,
          children: _genImages(),
        )
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: getImage,
        tooltip: 'Pick Image',
        child: Icon(Icons.add_a_photo),
      ),
    );
  }


  _genImages() {
    return _image.map((file){
      return Stack(
        children:<Widget> [
          ClipRRect(
            borderRadius:BorderRadius.circular(5),
            child: Image.file(file,width: 90,height: 90,fit: BoxFit.fill,),
          ),Positioned(
            right: 5,
            top: 5,
            child:GestureDetector(
              onTap: (){
                setState(() {
                  _image.remove(file);
                });
              },
              child: ClipOval(
                child: Container(
                  padding: EdgeInsets.all(3),
                  decoration: BoxDecoration(color: Colors.black54),
                  child: Icon(Icons.close,size: 18,color: Colors.white,),
                ),
              ),
            ),
          )
        ],
      );
    }).toList();
  }
}

代碼解析：

繼承的類為StatefulWidget型争舞，因?yàn)榕cUI組件存在交互凛忿，需要使用setState方法，如圖所示：

在這里插入圖片描述

在這里插入圖片描述

依賴的使用:

 List<Media> _listImagePaths = await ImagePickers.pickerPaths(
        galleryMode: GalleryMode.image, 
        selectCount: 2,  
        showGif: false, 
        showCamera: true, 
        compressSize: 500, 
        uiConfig: UIConfig(uiThemeColor: Color(0xffff0f50)), 
        cropConfig: CropConfig(enableCrop: false, width: 2, height: 1));

屬性的作用：