拍照app的实现

拍照app

插件： image_picker: ^0.8.6

拍照基本使用

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

class PhotoAppPage extends StatefulWidget {
  const PhotoAppPage({Keykey}) : super(key: key);
  @override
  State<PhotoAppPage> createState() => _PhotoAppPageState();
}

/// 拍照app
class _PhotoAppPageState extends State<PhotoAppPage> {
  XFile_image;  /// 新API的使用。
  Future getImage() async {
    var image = await ImagePicker().pickImage(source: ImageSource.camera);
    setState(() {
      _image = image;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('拍照app'),
      ),
      body: Center(
        child: _image == null Text('No Image selected!') : Image.file(File(_image!.path)),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: getImage,
        tooltip: 'pickImage',
        child: Icon(Icons.add),
      ),
    );
  }
}

高级使用：

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

class PhotoAppPage extends StatefulWidget {
  const PhotoAppPage({Keykey}) : super(key: key);
  @override
  State<PhotoAppPage> createState() => _PhotoAppPageState();
}

/// 拍照app：调用Camera和相册
class _PhotoAppPageState extends State<PhotoAppPage> {
  final List<XFile?> _images = []; // 已选择图片列表

  /// 新API的使用。
  Future getImage(bool isTakePhoto) async {
    Navigator.pop(context); // 关闭弹框
    var image = await ImagePicker().pickImage(source: isTakePhoto ImageSource.camera : ImageSource.gallery);
    setState(() {
      _images.add(image);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('拍照app')),
      body: Center(
        child: _images.isNotEmpty
            Wrap(
                spacing: 5,
                runSpacing: 5,
                children: _genImages(),
              )
            : const Text('暂无图片，去拍照吧！'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _pickImage,
        tooltip: '选择图片',
        child: Icon(Icons.add),
      ),
    );
  }

  /// 构建显示的图片，可删除图片。
  _genImages() {
    return _images.map((file) {
      return Stack(
        children: [
          ClipRRect(
            borderRadius: BorderRadius.circular(10), // 图片圆角效果
            child: Image.file(File(file!.path), width: 120, height: 90, fit: BoxFit.fill),
          ),
          Positioned(
            right: 5,
            top: 5,
            child: GestureDetector(
              onTap: () {
                setState(() {
                  _images.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(); // 转成list
  }

  // 底部弹框，选择拍照，相册
  _pickImage() {
    showModalBottomSheet(
      context: context,
      builder: (context) => Container(
        height: 180,
        child: Column(
          children: [
            _item('拍照', true),
            Divider(color: Colors.red, indent: 1, height: 1),
            _item('相册', false),
            Divider(color: Colors.red, indent: 1, height: 1),
            ListTile(
                title: Text('取消'),
                onTap: () {
                  Navigator.pop(context);
                })
          ],
        ),
      ),
    );
  }

  // 列表项目
  _item(String title, bool isTakePhoto) {
    return GestureDetector(
      child: ListTile(
        leading: Icon(isTakePhoto Icons.camera_alt : Icons.photo_library),
        title: Text(title),
        onTap: () => getImage(isTakePhoto),
      ),
    );
  }
}