添加拍照上传功能和优化生成图片进度显示方式

lib/common/style/color.dart

@@ -10,8 +10,13 @@ class AppColor {
   static const Color gray4 = Color.fromARGB(255, 106, 106, 106);
   static const Color gray5 = Color.fromARGB(255, 40, 40, 40);
   static const Color gray6 = Color.fromARGB(255, 30, 30, 30);
+  static const Color gray7 = Color.fromARGB(255, 50, 50, 50);
   static const Color black1 = Color.fromARGB(255, 20, 20, 20);
 
+  static const Color gradient_back1 = Color.fromARGB(255, 15, 24, 29);
+  static const Color gradient_back2 = Color.fromARGB(255, 13, 30, 39);
+  static const Color gradient_back3 = Color.fromARGB(255, 15, 52, 63);
+
 
   static const Color yellow1 = Color.fromARGB(255, 150, 100, 30);
 

lib/pages/ai-draw-image-result/controller.dart

 
 
+import 'dart:async';
 import 'dart:convert';
 import 'dart:typed_data';
 
@@ -31,6 +32,7 @@ class AIDrawImageResultController extends GetxController {
   var imageUrl = "".obs;
   var progress = 0.obs;
   var showProgressView = false.obs;
+  var loseTime = "0.0s".obs;
 
   Rx<Uint8List?> imageData = Rx<Uint8List?>(null);
   Uint8List? placehoderImageData;
@@ -40,6 +42,7 @@ class AIDrawImageResultController extends GetxController {
   Rx<List<String>> bottomButtonTitles = Rx<List<String>>([]);
   var opearter = "";
   var imageUrls = List.generate(0, (index) => "");
+  Timer? _timer;
 
   @override
   void onInit() {
@@ -70,6 +73,7 @@ class AIDrawImageResultController extends GetxController {
   @override
   void dispose() {
     SSEClient.unsubscribeFromSSE();
+    _timer?.cancel();
     super.dispose();
   }
 
@@ -79,6 +83,16 @@ class AIDrawImageResultController extends GetxController {
     }
   }
 
+  void startTimer() {
+    _timer?.cancel();
+    const oneSec = Duration(milliseconds: 10);
+    var sumTime = 0.0;
+    _timer = Timer.periodic(oneSec, (Timer timer) {
+      sumTime += 0.01;
+      loseTime.value = "${sumTime.toStringAsFixed(2)}s";
+    });
+  }
+
   void loadImage(String imageUrl, int progress) async {
     final imageData = await HttpUtil().getData(imageUrl);
     if (imageData != null) {
@@ -86,6 +100,7 @@ class AIDrawImageResultController extends GetxController {
       this.imageData.value = imageData;
       if (progress == 100) {
         showProgressView.value = false;
+        _timer?.cancel();
       }
     }
   }
@@ -104,6 +119,7 @@ class AIDrawImageResultController extends GetxController {
       } else {
         EasyLoading.dismiss();
         showProgressView.value = true;
+        startTimer();
         await initEventSource(res.data ?? "");
       }
       // state.isLoading = false;
@@ -139,6 +155,7 @@ class AIDrawImageResultController extends GetxController {
           EasyLoading.showToast(res.message ?? "未知错误");
         } else {
           showProgressView.value = true;
+          startTimer();
           await initEventSource(res.data ?? "");
         }
       }
@@ -168,6 +185,7 @@ class AIDrawImageResultController extends GetxController {
           EasyLoading.showToast(res.message ?? "未知错误");
         } else {
           showProgressView.value = true;
+          startTimer();
           await initEventSource(res.data ?? "");
         }
       }

lib/pages/ai-draw-image-result/view.dart

@@ -14,25 +14,40 @@ class AIDrawImageResultPage extends GetView<AIDrawImageResultController> {
   Widget makeProgressView() {
     return Container(
       decoration: BoxDecoration(
-        color: Colors.black26
+        gradient: LinearGradient(
+          begin: Alignment.topLeft,
+          end: Alignment.bottomRight,
+          colors: [
+            AppColor.gradient_back1.withOpacity(1.0 - (controller.progress.value.toDouble() / 100.0)), 
+            AppColor.gradient_back2.withOpacity(1.0 - (controller.progress.value.toDouble() / 100.0)), 
+            AppColor.gradient_back3.withOpacity(1.0 - (controller.progress.value.toDouble() / 100.0))],
+        ),
       ),
+      width: Get.width,
+      height: Get.height,
       alignment: Alignment.center,
         child: Container(
-          width: 150,
+          width: 260,
           height: 150,
-          decoration: BoxDecoration(
-            color: Colors.grey,
-            borderRadius: BorderRadius.circular(10)
-          ),
+          // decoration: BoxDecoration(
+          //   color: Colors.grey,
+          //   borderRadius: BorderRadius.circular(10)
+          // ),
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
-              CircularProgressIndicator(
-                backgroundColor: Colors.red,
-                valueColor: AlwaysStoppedAnimation(Colors.blue),
+              Text("AI生成进度:${controller.progress.value}%"),
+              SizedBox(height: 10,),
+              ClipRRect(
+                borderRadius: BorderRadius.circular(10),
+                child: LinearProgressIndicator(
+                  backgroundColor: AppColor.gray7,
+                  valueColor: AlwaysStoppedAnimation(Colors.blue),
+                  value: controller.progress.value.toDouble() / 100.0,
+                ),
               ),
               SizedBox(height: 10,),
-              Text("AI生成进度:${controller.progress.value}%")
+              Text(controller.loseTime.value),
             ],
         ),
       ),

lib/pages/ai-draw-image/controller.dart

@@ -100,19 +100,23 @@ class AIDrawImageController extends GetxController {
     uploadImageUrls.clear();
   }
 
-  selectImageUpload() async {
-    /*
-    final image = await ImagePicker().pickImage(source: ImageSource.gallery);
-    if (image == null) return null;
-    */
-    uploadImageUrls.clear();
-    List<XFile>? images = await ImagePicker().pickMultiImage();
+  selectImageUpload(ImageSource source) async {
+    List<XFile>? images;
+    if (source == ImageSource.camera) {
+      final image = await ImagePicker().pickImage(source: ImageSource.camera);
+      if (image == null) return null;
+      images = [image];
+    } else {
+      images = await ImagePicker().pickMultiImage();
+    }
     final count = images.length;
     if (count == 0) { return; }
-    if (count <= 1 || count > 5) {
-      EasyLoading.showError("请选择2-5张图片");
+    if (count > 5) {
+      EasyLoading.showError("请选择1-5张图片");
     } else {
-      assets.value = images;
+      for (var image in images) {
+        assets.add(image);
+      }
     }
     EasyLoading.show(
     status: "正在上传，请稍后",

lib/pages/ai-draw-image/image_to_image_view.dart

@@ -5,21 +5,102 @@ import 'package:chart/pages/ai-draw-image/image_square_view.dart';
 import 'package:chart/pages/ai-draw-image/text_to_image_view.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
+import 'package:image_picker/image_picker.dart';
 import '../../common/style/color.dart';
 import 'controller.dart';
 
 
+  showSheetAlert() {
+    final controller = Get.find<AIDrawImageController>();
+    Get.bottomSheet(
+      SafeArea(
+        child: Container(
+          decoration: const BoxDecoration(
+            color: Colors.white,
+            borderRadius: BorderRadius.all(Radius.circular(20))
+          ),
+          padding: const EdgeInsets.fromLTRB(20, 20, 20, 20),
+          height: 138,
+          child: Column(
+            children: [
+              InkWell(
+                onTap: () {
+                  controller.selectImageUpload(ImageSource.camera);
+                  Get.back();
+                },
+                child: Container(
+                  height: 44,
+                  width: Get.width - 40,
+                  alignment: Alignment.center,
+                  decoration: BoxDecoration(
+                    color: AppColor.primary,
+                    borderRadius: BorderRadius.circular(22)
+                  ),
+                  child: Text("拍照"),
+                ),
+              ),
+              SizedBox(height: 10,),
+              InkWell(
+                onTap: () {
+                  controller.selectImageUpload(ImageSource.gallery);
+                  Get.back();
+                },
+                child: Container(
+                  height: 44,
+                  width: Get.width - 40,
+                  alignment: Alignment.center,
+                  decoration: BoxDecoration(
+                    color: AppColor.primary,
+                    borderRadius: BorderRadius.circular(22)
+                  ),
+                  child: Text("相册"),
+                ),
+              )
+            ],
+          ),
+        )
+      ), persistent: false
+    );
+  }
+
   Widget makeShowAssetImageView(double width) {
     final controller = Get.find<AIDrawImageController>();
+    final count = controller.assets.length < 5 ? controller.assets.length + 1 : controller.assets.length;
+    final children = List<Widget>.generate(count, (index) {
+      if (index < controller.assets.length) {
+        final element = controller.assets[index];
+        return Image.file(File(element.path), width: (width - 20) / 5.0, height: 160, fit: BoxFit.contain,);
+      }
+      return Container(
+        width: (width - 20) / 5.0,
+        height: 160,
+        alignment: Alignment.center,
+        padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
+        child: InkWell(
+          onTap: () {
+            showSheetAlert();
+          },
+          child: Container(
+            alignment: Alignment.center,
+            // decoration: BoxDecoration(
+            //   border: Border.all(
+            //     width: 1,
+            //     color: AppColor.primary
+            //   ),
+            //   borderRadius: BorderRadius.circular(5)
+            // ),
+            child: Image(image: AssetImage("assets/images/添加图片.png", ), width: 30, height: 30,),
+          ),
+        ),
+      );
+    });
     return Container(
       child: Stack(
         children: [
           Row(
             mainAxisAlignment: MainAxisAlignment.center,
             crossAxisAlignment: CrossAxisAlignment.center,
-            children: controller.assets.map((element) {
-              return Image.file(File(element.path), width: (width - 20) / 5.0, height: 160, fit: BoxFit.contain,);
-            }).toList(),
+            children: children,
           ),
         ],
       ),
@@ -71,7 +152,7 @@ import 'controller.dart';
                         visible: controller.assets.isEmpty,
                         child: InkWell(
                           onTap: () {
-                            controller.selectImageUpload();
+                            showSheetAlert();
                           },
                           child: Container(
                             height: 160,

lib/pages/ai-draw-image/view.dart

@@ -127,15 +127,19 @@ class AIDrawImagePage extends GetView<AIDrawImageController>  {
       builder: (_) => Scaffold(
         body: Stack(
           children: [
-            Image(
-              image: AssetImage("assets/images/top_ai_draw_image.jpeg"),
-              height: 300,
-              width: Get.width,
-              fit: BoxFit.fitWidth,
-              ),
-              SafeArea(
-                child: makeContentView()
+            Positioned(
+              top: -20,
+              left: -(Get.width * 1.2 - Get.width) / 2.0,
+              child: Image(
+                image: AssetImage("assets/images/top_ai_draw_image.png"),
+                height: 300,
+                width: Get.width * 1.2,
+                fit: BoxFit.cover,
               ),
+            ),
+            SafeArea(
+              child: makeContentView()
+            )
           ],
         ),
       )