feat:增加轮播图组件

lib/widgets/recipe/card.dart

@@ -1,9 +1,9 @@
-import 'package:carousel_slider/carousel_slider.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_carousel_widget/flutter_carousel_widget.dart';
 import 'package:food_hub_app/config/app_config.dart';
 
 import 'package:food_hub_app/models/recipe.dart';
-import 'package:food_hub_app/widgets/common/index.dart';
+import 'package:food_hub_app/widgets/common/image.dart';
 import 'package:tdesign_flutter/tdesign_flutter.dart';
 
 class RecipeCard extends StatelessWidget {
@@ -13,19 +13,51 @@ class RecipeCard extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final List<String> imageUrls =
+        recipe.recordList
+            .map((item) => '${AppConfig.baseApiUrl}/${item.imageUrl}')
+            .toList();
+
+    Widget buildCarouselItem(String url) {
+      return Builder(
+        builder: (BuildContext context) {
+          return AspectRatio(
+            aspectRatio: 2,
+            child: ClipRRect(
+              borderRadius: BorderRadius.circular(12),
+              child: networkImage(url),
+            ),
+          );
+        },
+      );
+    }
+
     return Card(
+      shape: RoundedRectangleBorder(
+        side: BorderSide(color: Theme.of(context).primaryColor, width: 1.0),
+        borderRadius: BorderRadius.circular(10.0),
+      ),
       elevation: 0,
       color: Colors.white,
       clipBehavior: Clip.antiAlias,
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          Image.network(
-            '${AppConfig.baseApiUrl}/${recipe.recordList[0].imageUrl}',
-            height: 200,
-            width: double.infinity,
-            fit: BoxFit.contain,
-            errorBuilder: (context, error, stackTrace) => errorImageContainer(200),
+          FlutterCarousel(
+            // 轮播项
+            items:
+                imageUrls.map((url) {
+                  return buildCarouselItem(url);
+                }).toList(),
+            // 轮播配置
+            options: FlutterCarouselOptions(
+              height: 300,
+              autoPlay: imageUrls.length > 1,
+              enableInfiniteScroll: imageUrls.length > 1,
+              autoPlayInterval: const Duration(seconds: 3),
+              viewportFraction: 0.9,
+              showIndicator: true,
+            ),
           ),
           Divider(
             height: 1,