Flutter 图片选取 image_picker_flutter imagepicker

image_picker： Flutter 照片选取插件; 该老版本插件需要兼容 AndroidX， 如果是老版本 可以参照这边的进行配置！

flutter 官方androidx 兼容设置https://flutter.dev/docs/development/androidx-migrationhttps://flutter.dev/docs/development/androidx-migrationIOS 需要配置  .plist  权限 （老版本和新版本都需要）

image_picker | Flutter PackageFlutter plugin for selecting images from the Android and iOS image library, and taking new pictures with the camera.https://pub.flutter-io.cn/packages/image_pickerpubspec.yaml:

dev_dependencies:
  flutter_test:
    sdk: flutter
  image_picker: ^0.8.4+1

 

 

引入插件的头文件
import 'package:image_picker/image_picker.dart';

  List<File> imgArray = [];
  final ImagePicker _picker = ImagePicker();
  Future pickImage({required ImageSource type}) async {
    Navigator.pop(context);
    var image = await _picker.pickImage(source: type);
    // List<File> cacheList = [];
    // // for (int i = 0; i < imgArray.length; i++) {
    // //   cacheList.add(imgArray[i]);
    // // }
    // cacheList.addAll(imgArray);
    // cacheList.add(File(image!.path));
    setState(() {
      imgArray.add(File(image!.path));
      //imgArray = cacheList;
      // _image = _image;
      // imgArray = imgArray.add(image!.path);
      // print('_image.path ${_image!.path}');
    });
  }

import 'package:flutter/material.dart';
import 'dart:io';
import 'package:image_picker/image_picker.dart';
 
class PhotoSelect extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _PhotoSelectState();
  }
}
 
class _PhotoSelectState extends State<PhotoSelect> {
  List<File> imgArray = [];
  final ImagePicker _picker = ImagePicker();
  Future pickImage({required ImageSource type}) async {
    Navigator.pop(context);
    var image = await _picker.pickImage(source: type);
    // List<File> cacheList = [];
    // // for (int i = 0; i < imgArray.length; i++) {
    // //   cacheList.add(imgArray[i]);
    // // }
    // cacheList.addAll(imgArray);
    // cacheList.add(File(image!.path));
    setState(() {
      imgArray.add(File(image!.path));
      //imgArray = cacheList;
      // _image = _image;
      // imgArray = imgArray.add(image!.path);
      // print('_image.path ${_image!.path}');
    });
  }
 
  @override
  Widget build(BuildContext context) {
    String title = (ModalRoute.of(context)!.settings.arguments as Map)['desc'];
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Stack(
        children: [
          Positioned(
            right: 10,
            bottom: 20,
            child: SizedBox(
              width: 50,
              height: 50,
              child: ClipOval(
                child: Container(
                  color: Colors.blue,
                  child: IconButton(
                    color: Colors.white,
                    onPressed: _showSheetAction,
                    icon: Icon(
                      Icons.photo_camera,
                      size: 30,
                    ),
                  ),
                ),
              ),
            ),
          ),
          Center(
            child: imgArray.length > 0
                ? Wrap(
                    spacing: 5,
                    runSpacing: 5,
                    children: imgArray
                        .map((item) => _imageItem(imagePth: item))
                        .toList(),
                  )
                : Text('您还没有添加图片'),
          )
        ],
      ),
    );
  }
 
  Widget _imageItem({required File imagePth}) {
    return Stack(
      children: [
        ClipRRect(
          borderRadius: BorderRadius.circular(7),
          child: Image.file(
            imagePth,
            width: 110,
            height: 70,
            fit: BoxFit.fitWidth,
          ),
        ),
        Positioned(
          right: 5,
          top: 5,
          child: GestureDetector(
            onTap: () {
              //print('点击了删除');
              // List<File> cacheList = [];
              // cacheList.addAll(imgArray);
              // cacheList.remove(imagePth);
              setState(() {
                imgArray.remove(imagePth);
              });
            },
            child: ClipOval(
              child: Container(
                color: Colors.white.withOpacity(0.7),
                width: 20,
                height: 20,
                child: Icon(
                  Icons.close,
                  size: 20,
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
 
  _showSheetAction() {
    showModalBottomSheet(
        context: context,
        builder: (context) => Container(
            height: 120,
            child: Column(
              children: [
                Expanded(
                  child: FlatButton(
                      onPressed: () {
                        pickImage(type: ImageSource.camera);
                      },
                      child: Container(
                        width: double.infinity,
                        height: double.infinity - 20,
                        child: Center(
                          child: Text('拍照'),
                        ),
                      )),
                ),
                Divider(
                  height: 5,
                ),
                Expanded(
                  child: FlatButton(
                      onPressed: () {
                        pickImage(type: ImageSource.gallery);
                      },
                      child: Container(
                        width: double.infinity,
                        height: double.infinity - 20,
                        color: Colors.white24,
                        child: Center(
                          child: Text('从相册选取'),
                        ),
                      )),
                )
              ],
            )));
  }
}