import 'dart:io';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_color_plugin/flutter_color_plugin.dart';
import 'package:image_picker/image_picker.dart';
//拍照app开发
class PhotoApp extends StatefulWidget {
  @override
  _PhotoAppState createState() => _PhotoAppState();
}
class _PhotoAppState extends State<PhotoApp> {
  List<File> _image;
  final picker = ImagePicker();


  Future getImage(bool isTackPhoto) async {
    //解决从相册中选择图片后弹框不关闭问题
    Navigator.pop(context);
    //gallery是从相册选择，camera是调用拍照

    final pickedFile = await picker.getImage(source: isTackPhoto?ImageSource.camera:ImageSource.gallery);

    setState(() {
      _image.add(File(pickedFile.path));
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('拍照app开发'),
        leading: GestureDetector( //手势监听
          onTap: (){
            Navigator.pop(context);
          },
          child: Icon(Icons.arrow_back),
        ),
      ),
      body: Center(
        child: Wrap(
          spacing: 5,
          runSpacing: 5,
          children: _genImage()
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _pickImage,
        tooltip: '选择图片',
        child: Icon(Icons.add_a_photo),
      ),
    );

  }

  void _pickImage() {
    //做个弹框
    showModalBottomSheet(context: context, builder: (context)=>Container(
      height: 160,
      child: Column(
        children: <Widget>[
          _item('拍照',true),
          _item('从相册选择',false),
        ],
      ),
    ));
  }

  _item(String title, bool isTackPhoto) {
    return GestureDetector(
      child: ListTile(
        leading: Icon(isTackPhoto?Icons.camera_alt:Icons.photo_library),
        title: Text(title),
        onTap: ()=>getImage(isTackPhoto),
      ),
    );
  }

  _genImage() {
    return _image.map((file) =>Stack(
        children: <Widget>[
          ClipRRect(
            //圆角效果
            borderRadius: BorderRadius.circular(5),
            child: Image.file(file,width: 10,height: 10,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();
  }
}