添加图片选择器

update REAMEME

README.md

@@ -4,13 +4,8 @@ A new Flutter project.
 
 ## Getting Started
 
-This project is a starting point for a Flutter application.
+## Widget Guide Book
 
-A few resources to get you started if this is your first Flutter project:
+* BeeDatePicker - 时间选择器
-
+* BeeImagePicker - 图片选择器
-- [Lab: Write your first Flutter app](https://flutter.dev/docs/get-started/codelab)
+* GridImagePicker - 网格图片选择器
-- [Cookbook: Useful Flutter samples](https://flutter.dev/docs/cookbook)
-
-For help getting started with Flutter, view our
-[online documentation](https://flutter.dev/docs), which offers tutorials,
-samples, guidance on mobile development, and a full API reference.

lib/pages/goods_deto_page/deto_create_page/deto_create_page.dart

@@ -1,4 +1,5 @@
 import 'package:akuCommunity/widget/bee_scaffold.dart';
+import 'package:akuCommunity/widget/picker/grid_image_picker.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:akuCommunity/utils/headers.dart';
@@ -187,7 +188,7 @@ class _DetoCreatePageState extends State<DetoCreatePage> {
                       ),
                     ),
                   ),
-                  CommonImagePicker(),
+                  GridImagePicker(),
                 ],
               ),
             ),

lib/painters/plus_painter.dart

@@ -0,0 +1,20 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+
+class PlusPainter extends CustomPainter {
+  @override
+  void paint(Canvas canvas, Size size) {
+    Paint paint = Paint()
+      ..color = Color(0xFFD8D8D8)
+      ..strokeWidth = 8.w
+      ..strokeCap = StrokeCap.round;
+    canvas.drawLine(Offset(0, 40.w), Offset(80.w, 40.w), paint);
+    canvas.drawLine(Offset(40.w, 0), Offset(40.w, 80.w), paint);
+  }
+
+  @override
+  bool shouldRepaint(PlusPainter oldDelegate) => false;
+
+  @override
+  bool shouldRebuildSemantics(PlusPainter oldDelegate) => false;
+}

lib/widget/picker/bee_image_picker.dart

@@ -0,0 +1,38 @@
+import 'dart:io';
+
+import 'package:flutter/cupertino.dart';
+import 'package:get/get.dart';
+import 'package:image_picker/image_picker.dart';
+import 'package:velocity_x/velocity_x.dart';
+
+class BeeImagePicker {
+  static Future<File> pick({
+    String title,
+  }) async {
+    PickedFile file = await Get.bottomSheet(CupertinoActionSheet(
+      title: title.text.isIntrinsic.make(),
+      actions: [
+        CupertinoDialogAction(
+          onPressed: () async => Get.back(
+            result: await ImagePicker().getImage(source: ImageSource.gallery),
+          ),
+          child: '相册'.text.isIntrinsic.make(),
+        ),
+        CupertinoDialogAction(
+          onPressed: () async => Get.back(
+            result: await ImagePicker().getImage(source: ImageSource.camera),
+          ),
+          child: '相机'.text.isIntrinsic.make(),
+        ),
+      ],
+      cancelButton: CupertinoDialogAction(
+        onPressed: Get.back,
+        child: '取消'.text.isIntrinsic.make(),
+      ),
+    ));
+    if (file != null)
+      return File(file.path);
+    else
+      return null;
+  }
+}

lib/widget/picker/grid_image_picker.dart

@@ -0,0 +1,115 @@
+import 'dart:io';
+import 'package:akuCommunity/painters/plus_painter.dart';
+import 'package:akuCommunity/widget/picker/bee_image_picker.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:get/get.dart';
+import 'package:velocity_x/velocity_x.dart';
+
+///网格图片选择
+///
+///返回`File`数组
+///
+///```dart
+///GridImagePicker(
+///   onChange:(files){
+///     //YOUR CODE HERE.
+///   },
+///   padding:EdgeInsets.zero,
+///),
+///```
+class GridImagePicker extends StatefulWidget {
+  ///文件选择回调
+  final Function(List<File> files) onChange;
+
+  ///Padding
+  final EdgeInsetsGeometry padding;
+  GridImagePicker({
+    Key key,
+    @required this.onChange,
+    this.padding = EdgeInsets.zero,
+  }) : super(key: key);
+
+  @override
+  _GridImagePickerState createState() => _GridImagePickerState();
+}
+
+class _GridImagePickerState extends State<GridImagePicker> {
+  List<File> _files = [];
+  int get displayLength => _files.length < 9 ? (_files.length + 1) : 9;
+  Widget _buildSelect() {
+    return MaterialButton(
+      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
+      elevation: 0,
+      color: Colors.white,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(8.w),
+        side: BorderSide(
+          color: Color(0xFF979797),
+          width: 1.w,
+        ),
+      ),
+      child: CustomPaint(
+        painter: PlusPainter(),
+        size: Size(80.w, 80.w),
+      ),
+      onPressed: () async {
+        File file = await BeeImagePicker.pick(title: '选择图片');
+        if (file != null) _files.insert(0, file);
+        setState(() {});
+        widget.onChange(_files);
+      },
+    );
+  }
+
+  Widget _buildItem(File file) {
+    return Container(
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(8.w),
+        image: DecorationImage(
+          image: FileImage(file),
+        ),
+      ),
+      child: MaterialButton(
+        onPressed: () {},
+        onLongPress: () async {
+          bool result = await Get.dialog(CupertinoAlertDialog(
+            title: '删除该图片？'.text.isIntrinsic.make(),
+            actions: [
+              CupertinoDialogAction(
+                child: '取消'.text.isIntrinsic.make(),
+                onPressed: Get.back,
+              ),
+              CupertinoDialogAction(
+                child: '确定'.text.red600.isIntrinsic.make(),
+                onPressed: () => Get.back(result: true),
+              ),
+            ],
+          ));
+          if (result == true) _files.remove(file);
+          setState(() {});
+        },
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return GridView.builder(
+      shrinkWrap: true,
+      padding: widget.padding,
+      physics: NeverScrollableScrollPhysics(),
+      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+        crossAxisCount: 3,
+        crossAxisSpacing: 16.w,
+        mainAxisSpacing: 16.w,
+      ),
+      itemBuilder: (context, index) {
+        if (index == 0) return _buildSelect();
+        return _buildItem(_files[index - 1]);
+      },
+      itemCount: displayLength,
+    );
+  }
+}