ImgPickerWidget.dart 5.99 KB
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:image_picker/image_picker.dart';
import 'package:one_key/provider/online_check_edit_provider.dart';
import 'package:one_key/res/colors.dart';
import 'package:one_key/utils/utils.dart';
import 'package:provider/provider.dart';

final int MAX_IMAGE_NUMBER = 9;

class ImgPickerWidget extends StatelessWidget {
  final ScrollController scrollController;
  final Color borderColor;
  final ValueChanged onChange;
  ImgPickerWidget(
      {Key key,
      this.scrollController,
      this.borderColor = Colors.blue,
      this.onChange})
      : super(key: key);

  //相册 相机
  Future _getFromPictureOrCamera(context, imageSource) async {
    // File image = await ImagePicker.pickImage(
    //   source: imageSource,
    // );
    // if (image != null) {
    //    _provider.imageList.add(image);
    //    _provider.notifyListeners();
    // }
    // _provider.uploadTravelReleaseImg(image);
  }

  Future _openModalBottomSheet(context) async {
    final option = await showModalBottomSheet(
        context: context,
        builder: (BuildContext context) {
          return Container(
            height: 200.0,
            child: Column(
              children: <Widget>[
                ListTile(
                  title: Text('拍照', textAlign: TextAlign.center),
                  onTap: () {
                    _getFromPictureOrCamera(context, ImageSource.camera);
                    Navigator.pop(context);
                  },
                ),
                ListTile(
                  title: Text('从相册选择', textAlign: TextAlign.center),
                  onTap: () {
                    _getFromPictureOrCamera(context, ImageSource.gallery);
                    Navigator.pop(context);
                  },
                ),
                ListTile(
                  title: Text('取消', textAlign: TextAlign.center),
                  onTap: () {
                    Navigator.pop(context, '取消');
                  },
                ),
              ],
            ),
          );
        });
  }

  _getGridImg(count, context, isLinjie) {
    OnlineCheckEditProvider _provider =
        Provider.of<OnlineCheckEditProvider>(context, listen: false);
    return GridView.builder(
        controller: scrollController,
        // padding: EdgeInsets.only(top: ScreenUtil().getAdapterSize(10)),
        shrinkWrap: true,
        itemCount: count,
        //SliverGridDelegateWithFixedCrossAxisCount 构建一个横轴固定数量Widget
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            //横轴元素个数
            crossAxisCount: 3,
            //纵轴间距
            mainAxisSpacing: 20.0,
            //横轴间距
            crossAxisSpacing: 10.0,
            //子组件宽高长度比例
            childAspectRatio: 1.0),
        itemBuilder: (BuildContext context, int index) {
          //Widget Function(BuildContext context, int index)
          var linjie = MAX_IMAGE_NUMBER;
          if (isLinjie) {
            linjie = MAX_IMAGE_NUMBER - 1;
          }
          if (index == count - 1 && index < linjie) {
            return InkWell(
              onTap: () {
                _openModalBottomSheet(context);
              },
              child: Container(
                  width: ScreenUtil().setWidth(90 * 2),
                  height: ScreenUtil().setWidth(90 * 2),
                  decoration: BoxDecoration(
                      border: Border.all(
                          color: MyColours.color_E0E0E0,
                          width: ScreenUtil().setWidth(2)),
                      color: Theme.of(context).backgroundColor),
                  child: Column(
                    children: [
                      Image.asset(
                        Utils.getImgPath('add_image'),
                        width: ScreenUtil().setWidth(32),
                        height: ScreenUtil().setWidth(32),
                      )
                    ],
                  )),
            );
          }
          return _provider.imageList.length < 1
              ? Text('')
              : Image.file(_provider.imageList[index], fit: BoxFit.cover);
        });
  }

  @override
  Widget build(BuildContext context) {
    OnlineCheckEditProvider _provider =
        Provider.of<OnlineCheckEditProvider>(context, listen: true);
    return Container(
      width: double.infinity,
      decoration: BoxDecoration(
          color: Colors.white, borderRadius: BorderRadius.circular(10)),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
              height: ScreenUtil().setWidth(53 * 2),
              width: double.infinity,
              decoration: BoxDecoration(
                color: MyColours.color_FAFAFA,
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(10),
                    topRight: Radius.circular(10)),
              ),
              child: Padding(
                padding: EdgeInsets.fromLTRB(
                    ScreenUtil().setWidth(20),
                    ScreenUtil().setWidth(36),
                    ScreenUtil().setWidth(20),
                    ScreenUtil().setWidth(26)),
                child: Text(
                  '消费清单(选填)',
                  style: TextStyle(
                      fontSize: ScreenUtil().setSp(32),
                      color: MyColours.color_353535,
                      fontWeight: FontWeight.bold),
                ),
              )),
          Padding(
            padding: EdgeInsets.all(ScreenUtil().setWidth(40)),
            child: _getGridImg(
                _provider.imageList.length < MAX_IMAGE_NUMBER
                    ? _provider.imageList.length + 1
                    : _provider.imageList.length,
                context,
                _provider.imageList.length == MAX_IMAGE_NUMBER ? true : false),
          )
          //  _getGridImg(1, context)
        ],
      ),
    );
  }
}