flutter图片选择

末蓝、 2022-09-10 02:18 162阅读 0赞

包来自：[https://pub.dev/packages/image\_picker][https_pub.dev_packages_image_picker]  
git来自：[https://github.com/flutter/plugins/tree/master/packages/image\_picker/image\_picker][https_github.com_flutter_plugins_tree_master_packages_image_picker_image_picker]  
示例

1、引入

image_picker: ^0.8.4 #图片选择

2、使用

import 'package:image_picker/image_picker.dart';

3、代码

//事先声明
      final ImagePicker _picker = ImagePicker();

//拍照
      _takePhoto() async { 
        final XFile? image = await _picker.pickImage(source: ImageSource.camera);
        setState(() { _imgPath = File(image!.path); }); } // 打开相册-单张 _openGallery() async { final XFile? image = await _picker.pickImage(source: ImageSource.gallery); setState(() { _imgPath = File(image!.path); }); } // 打开相册-多张 _openMultiImage() async { final List<XFile>? images = await _picker.pickMultiImage(); setState(() { images!.forEach((value) { imagesList!.add(File(value.path));
          });
          print('选择了-${images.length}-张照片');
        });
      }
    
      //拍视频
      _takeVideo() async { 
        final XFile? image = await _picker.pickVideo(source: ImageSource.camera);
        setState(() { 
          // TODO 未做视频播放
          // _imgPath = File(image!.path);
        });
      }
    
      //选择视频
      _openVideo() async { 
        final XFile? image = await _picker.pickVideo(source: ImageSource.gallery);
        setState(() { 
          // TODO 未做视频播放
          // _imgPath = File(image!.path);
        });
      }

完整代码

import 'dart:io';
    
    import 'package:flutter/material.dart';
    import 'package:image_picker/image_picker.dart';
    
    ///@作者: Q.L
    ///@创建日期: 2021-09-03 11:28
    ///@描述: { 照片选择}
    class ImagesChoosePage extends StatefulWidget { 
      const ImagesChoosePage({ Key? key}) : super(key: key);
    
      @override
      _ImagesChoosePageState createState() => _ImagesChoosePageState();
    }
    
    class _ImagesChoosePageState extends State<ImagesChoosePage> { 
      final ImagePicker _picker = ImagePicker();
      File? _imgPath;
      List? imagesList = [];
      @override
      Widget build(BuildContext context) { 
        return Scaffold(
          appBar: AppBar(
            title: Text('图片选择'),
          ),
          body: ListView(
            children: [
              Container(
                width: 100,
                height: 100,
                child: _imgPath != null
                    ? Image.file(
                        _imgPath!,
                        fit: BoxFit.fill,
                        width: 100,
                        height: 100,
                      )
                    : Text('请选择单张图片'),
              ),
              ElevatedButton(
                onPressed: _takePhoto,
                child: Text("拍照"),
              ),
              ElevatedButton(
                onPressed: _openGallery,
                child: Text("选择照片-单张"),
              ),
              ElevatedButton(
                onPressed: _openMultiImage,
                child: Text("选择照片-多张"),
              ),
              ElevatedButton(
                onPressed: _takeVideo,
                child: Text("拍视频"),
              ),
              ElevatedButton(
                onPressed: _openVideo,
                child: Text("选择视频"),
              ),
              Container(
                width: double.infinity,
                height: 1000,
                child: GridView.builder(
                    padding: EdgeInsets.all(0),
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 3, crossAxisSpacing: 2, mainAxisSpacing: 2),
                    itemBuilder: (BuildContext context, int index) { 
                      if (imagesList != null) { 
                        return Image.file(
                          imagesList![index]!,
                          fit: BoxFit.fill,
                          width: 100,
                          height: 100,
                        );
                      } else { 
                        return Container();
                      }
                    },
                    itemCount: imagesList!.length),
              ),
            ],
          ),
        );
      }
    
      //拍照
      _takePhoto() async { 
        final ImagePicker _picker = ImagePicker();
        final XFile? image = await _picker.pickImage(source: ImageSource.camera);
        setState(() { _imgPath = File(image!.path); }); } // 打开相册-单张 _openGallery() async { final XFile? image = await _picker.pickImage(source: ImageSource.gallery); setState(() { _imgPath = File(image!.path); }); } // 打开相册-多张 _openMultiImage() async { final List<XFile>? images = await _picker.pickMultiImage(); setState(() { images!.forEach((value) { imagesList!.add(File(value.path));
          });
          print('选择了-${images.length}-张照片');
        });
      }
    
      //拍视频
      _takeVideo() async { 
        final XFile? image = await _picker.pickVideo(source: ImageSource.camera);
        setState(() { 
          // TODO 未做视频播放
          // _imgPath = File(image!.path);
        });
      }
    
      //选择视频
      _openVideo() async { 
        final XFile? image = await _picker.pickVideo(source: ImageSource.gallery);
        setState(() { 
          // TODO 未做视频播放
          // _imgPath = File(image!.path);
        });
      }
    }

[https_pub.dev_packages_image_picker]: https://pub.dev/packages/image_picker
[https_github.com_flutter_plugins_tree_master_packages_image_picker_image_picker]: https://github.com/flutter/plugins/tree/master/packages/image_picker/image_picker