Карточки-8

example/lib/storybook.dart

@@ -12,6 +12,8 @@ class StorybookApp extends StatelessWidget {
         return UtilsMaterialWrapper(widget: widget);
       },
       stories: [
+        BaseCardWidget.story,
+        PrimaryCardWidget.story,
         TabbarWidget.story,
         InputWidget.story,
         ChipsButtonWidget.story,

lib/matule_uikit.dart

@@ -5,6 +5,7 @@ export "src/presentation/theme/palette.dart";
 export "src/presentation/theme/styles.dart";
 
 export "src/presentation/widgets/button_widget.dart";
+export "src/presentation/widgets/card_widget.dart";
 export "src/presentation/widgets/input_widget.dart";
 export "src/presentation/widgets/tabbar_widget.dart";
 export "src/presentation/widgets/utils.dart";

lib/src/presentation/theme/palette.dart

@@ -25,6 +25,8 @@ abstract class Palette {
   abstract Color placeholderOld;
   abstract Color descriptionOld;
   abstract Color cardStrokeOld;
+
+  abstract Color cardShadow;
 }
 
 class LightPalette extends Palette {
@@ -96,4 +98,7 @@ class LightPalette extends Palette {
 
   @override
   Color whiteOld = Color(0xFFFFFFFF);
+
+  @override
+  Color cardShadow = Color(0x99E4E8F5);
 }

lib/src/presentation/widgets/card_widget.dart

@@ -0,0 +1,165 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:storybook_flutter/storybook_flutter.dart';
+
+import '../../../matule_uikit.dart';
+
+class BaseCardWidget extends StatelessWidget {
+  final CustomTheme theme;
+  final double width;
+  final double height;
+  final Widget? child;
+
+  const BaseCardWidget({
+    super.key,
+    required this.theme,
+    required this.width,
+    required this.height,
+    this.child,
+  });
+
+  BaseCardWidget.background({super.key, required this.theme})
+    : width = 335.w,
+      height = 138.h,
+      child = null;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: width,
+      height: height,
+      decoration: BoxDecoration(
+        color: theme.palette.whiteOld,
+        border: Border.all(color: theme.palette.cardStrokeOld),
+        borderRadius: BorderRadius.circular(12.r),
+        boxShadow: [
+          BoxShadow(color: theme.palette.cardShadow, blurRadius: 20.r),
+        ],
+      ),
+      child: child,
+    );
+  }
+
+  static Story get story => Story(
+    name: "CardBackground",
+    builder: (BuildContext context) {
+      var theme = CustomTheme.of(context);
+      return BaseCardWidget.background(theme: theme);
+    },
+  );
+}
+
+class PrimaryCardWidget extends BaseCardWidget {
+  final String label;
+  final String category;
+  final int price;
+  final bool added;
+  final Function() onAdd;
+  final Function() onRemove;
+
+  PrimaryCardWidget({
+    super.key,
+    required super.theme,
+    required this.label,
+    required this.category,
+    required this.price,
+    required this.added,
+    required this.onAdd,
+    required this.onRemove,
+  }) : super(
+         width: 335.w,
+         height: 136.h,
+         child: Padding(
+           padding: EdgeInsets.all(16.r),
+           child: Column(
+             mainAxisAlignment: MainAxisAlignment.spaceBetween,
+             crossAxisAlignment: CrossAxisAlignment.start,
+             children: [
+               Row(
+                 children: [
+                   Flexible(
+                     child: Text(
+                       label,
+                       style: theme.styles.headlineMedium16.copyWith(
+                         color: theme.palette.blackOld,
+                       ),
+                     ),
+                   ),
+                 ],
+               ),
+               Row(
+                 mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                 crossAxisAlignment: CrossAxisAlignment.end,
+                 children: [
+                   Column(
+                     mainAxisAlignment: MainAxisAlignment.center,
+                     crossAxisAlignment: CrossAxisAlignment.start,
+                     children: [
+                       Text(
+                         category,
+                         style: theme.styles.captionSemibold14.copyWith(
+                           color: theme.palette.placeholderOld,
+                         ),
+                       ),
+                       Text(
+                         "$price ₽",
+                         style: theme.styles.title3Semibold17.copyWith(
+                           color: theme.palette.blackOld,
+                         ),
+                       ),
+                     ],
+                   ),
+                   !added
+                       ? SmallButtonWidget.filled(
+                           theme: theme,
+                           onTap: onAdd,
+                           text: "Добавить",
+                         )
+                       : SmallButtonWidget.outlined(
+                           theme: theme,
+                           onTap: onRemove,
+                           text: "Убрать",
+                         ),
+                 ],
+               ),
+             ],
+           ),
+         ),
+       );
+
+  static Story get story => Story(
+    name: "PrimaryCard",
+    builder: (BuildContext context) {
+      var theme = CustomTheme.of(context);
+      String label = context.knobs.text(
+        label: "Label",
+        initial: "Рубашка Воскресенье для машинного вязания",
+      );
+      String category = context.knobs.text(
+        label: "Category",
+        initial: "Мужская одежда",
+      );
+      int price = context.knobs.sliderInt(
+        label: "Price",
+        initial: 300,
+        min: 0,
+        max: 300000,
+      );
+      bool added = context.knobs.boolean(label: "Added", initial: false);
+
+      return PrimaryCardWidget(
+        theme: theme,
+        label: label,
+        category: category,
+        price: price,
+        added: added,
+        onAdd: () {
+          debugPrint("added");
+        },
+        onRemove: () {
+          debugPrint("removed");
+        },
+      );
+    },
+  );
+}