flutter 拍照实例 image_picker的使用

1.安装

flutter 拍照实例 image_picker的使用_第1张图片

2.引用

import 'package:image_picker/image_picker.dart';

 3.示例

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

class Photo extends StatefulWidget {
  @override
  _PhotoState createState() => _PhotoState();
}

class _PhotoState extends State {
  List _imageList = []; //图片列表
  int _photoIndex = 0; //选择拍照还是相册的索引

  //action sheet
  List _actionSheet = [
    {"name": "拍照", "icon": Icon(Icons.camera_alt)},
    {"name": "相册", "icon": Icon(Icons.photo)}
  ];

  //拍照或者相册选取图片,只能单选
  Future _getImage() async {
    Navigator.of(context).pop();
    var image = await ImagePicker.pickImage(
        source: _photoIndex == 0 ? ImageSource.camera : ImageSource.gallery);

    //没有选择图片或者没有拍照
    if (image != null) {
      setState(() {
        _imageList.add(image);
      });
    }
  }

  //获取sheet选择
  Future _getActionSheet() async {
    await showModalBottomSheet(
        context: context,
        builder: (ctx) {
          return Container(
            padding: EdgeInsets.all(10.0),
            child: ListView.builder(
              shrinkWrap: true,
              itemCount: _actionSheet.length,
              itemExtent: 50.0,
              itemBuilder: (innerCtx, i) {
                return ListTile(
                  title: Text(_actionSheet[i]["name"]),
                  leading: _actionSheet[i]["icon"],
                  onTap: () {
                    setState(() {
                      _photoIndex = i;
                    });
                    _getImage();
                  },
                );
              },
            ),
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("拍照APP"),
      ),
      body: Column(
        children: [
          RaisedButton(
            child: Text("拍照"),
            onPressed: () => _getActionSheet(),
          ),
          Text("----照片列表----"),
          _imageList.isNotEmpty
              ? Wrap(
                  spacing: 10.0,
                  children: _getImageList(),
                )
              : Text("暂无内容")
        ],
      ),
    );
  }

  //图片列表的刻画
  List _getImageList() {
    return _imageList.map((img) {
      return ClipRRect(
        borderRadius: BorderRadius.circular(10.0),
        child: Stack(
          children: [
            Image.file(
              img,
              fit: BoxFit.cover,
              width: 100.0,
              height: 70.0,
            ),
            Positioned(
              right: 5.0,
              top: 5.0,
              child: GestureDetector(
                child: ClipOval(
                  child: Container(
                    width: 15.0,
                    height: 15.0,
                    color: Colors.lightBlue,
                    child: Icon(
                      Icons.close,
                      color: Colors.white,
                      size: 12.0,
                    ),
                  ),
                ),
                onTap: () {
                  setState(() {
                    _imageList.remove(img);
                  });
                },
              ),
            )
          ],
        ),
      );
    }).toList();
  }
}

拍照或者选取相册的允许请求:

flutter 拍照实例 image_picker的使用_第2张图片     flutter 拍照实例 image_picker的使用_第3张图片

flutter 拍照实例 image_picker的使用_第4张图片     flutter 拍照实例 image_picker的使用_第5张图片

flutter 拍照实例 image_picker的使用_第6张图片    flutter 拍照实例 image_picker的使用_第7张图片

 

 

你可能感兴趣的