#sprint-1

example/assets/divider.svg

@@ -0,0 +1,3 @@
+<svg width="2" height="16" viewBox="0 0 2 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 0V16" stroke="#EBEBEB"/>
+</svg>

example/lib/card_section.dart

@@ -0,0 +1,41 @@
+import 'package:flutter/material.dart';
+import 'package:ui_kit/ui_kit.dart';
+
+class CardSection extends StatefulWidget {
+  const CardSection({super.key});
+
+  @override
+  State<CardSection> createState() => _CardSectionState();
+}
+
+class _CardSectionState extends State<CardSection> {
+  static final cardsList = [
+    CardWidget(child: SizedBox()),
+    PrimaryCard(
+      title: 'Рубашка Воскресенье для машинного  вязания',
+      category: 'Мужская одежда',
+      price: '300',
+    ),
+    CartCard(
+      title: 'Рубашка воскресенье для машинного вязания',
+      price: '300',
+      count: '1',
+    ),
+    ProjectCard(title: 'Мой первый проект', lastDate: '2', onPressed: () {}),
+  ];
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: EdgeInsets.only(top: height(context) * 3),
+      width: width(context) * 100,
+      height: height(context) * 30,
+      child: ListView.builder(
+        itemCount: cardsList.length,
+        itemBuilder: (BuildContext context, int index) {
+          final currentItem = cardsList[index];
+          return currentItem;
+        },
+      ),
+    );
+  }
+}

example/lib/counter.dart

@@ -0,0 +1,28 @@
+import 'package:flutter/widgets.dart';
+import 'package:ui_kit/ui_kit.dart';
+
+class CounterSection extends StatefulWidget {
+  const CounterSection({super.key});
+
+  @override
+  State<CounterSection> createState() => _CounterSectionState();
+}
+
+class _CounterSectionState extends State<CounterSection> {
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: 64,
+      height: height(context) * 30,
+      child: ListView.builder(
+        itemCount: 2,
+        itemBuilder: (BuildContext context, int index) {
+          return Container(
+            margin: EdgeInsets.only(bottom: 10),
+            child: CounterWidget(),
+          );
+        },
+      ),
+    );
+  }
+}

example/lib/main.dart

@@ -1,6 +1,8 @@
 import 'package:example/bottom_sheet_section.dart';
 import 'package:example/button_section.dart';
+import 'package:example/card_section.dart';
 import 'package:example/colors_section.dart';
+import 'package:example/counter.dart';
 import 'package:example/fonts_section.dart';
 import 'package:example/header_section.dart';
 import 'package:example/inputs_section.dart';
@@ -37,6 +39,8 @@ class MainApp extends StatelessWidget {
                 TabBarWidget(),
                 BottomSheetSection(),
                 HeaderSection(),
+                CardSection(),
+                CounterSection(),
               ],
             ),
           ),

lib/button.dart

@@ -1,6 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:ui_kit/colors.dart';
-import 'package:ui_kit/fonts.dart';
 import 'package:ui_kit/ui_kit.dart';
 
 class ButtonWidget extends StatefulWidget {

lib/card.dart

@@ -0,0 +1,28 @@
+import 'package:flutter/widgets.dart';
+import 'package:ui_kit/colors.dart';
+
+class CardWidget extends StatefulWidget {
+  const CardWidget({super.key, required this.child});
+  final Widget child;
+
+  @override
+  State<CardWidget> createState() => _CardWidgetState();
+}
+
+class _CardWidgetState extends State<CardWidget> {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: 335,
+      height: 150,
+      padding: EdgeInsets.symmetric(horizontal: 16, vertical: 16),
+      decoration: BoxDecoration(
+        color: whiteColor,
+        borderRadius: BorderRadius.circular(12),
+        border: Border.all(color: dividerColor, width: 1),
+        boxShadow: [BoxShadow(color: shadowColor, blurRadius: 10)],
+      ),
+      child: widget.child,
+    );
+  }
+}

lib/cards/cart_card.dart

@@ -0,0 +1,60 @@
+import 'package:flutter/widgets.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:ui_kit/card.dart';
+import 'package:ui_kit/counter.dart';
+import 'package:ui_kit/fonts.dart';
+
+class CartCard extends StatefulWidget {
+  const CartCard({
+    super.key,
+    required this.title,
+    required this.price,
+    required this.count,
+  });
+  final String title;
+  final String price;
+
+  final String count;
+
+  @override
+  State<CartCard> createState() => _CartCardState();
+}
+
+class _CartCardState extends State<CartCard> {
+  @override
+  Widget build(BuildContext context) {
+    return CardWidget(
+      child: Column(
+        children: [
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              SizedBox(
+                width: 275,
+                child: Text(widget.title, style: headlineMedium),
+              ),
+              SvgPicture.asset('assets/close.svg'),
+            ],
+          ),
+          SizedBox(height: 34),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Text('${widget.price} ₽', style: title3Medium),
+              SizedBox(
+                width: 145,
+                child: Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    Text('${widget.count} штук', style: textRegular),
+                    CounterWidget(),
+                  ],
+                ),
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/cards/primary_card.dart

@@ -0,0 +1,70 @@
+import 'package:flutter/widgets.dart';
+import 'package:ui_kit/ui_kit.dart';
+
+class PrimaryCard extends StatefulWidget {
+  const PrimaryCard({
+    super.key,
+    required this.title,
+    required this.category,
+    required this.price,
+  });
+  final String title;
+  final String category;
+  final String price;
+
+  @override
+  State<PrimaryCard> createState() => _PrimaryCardState();
+}
+
+class _PrimaryCardState extends State<PrimaryCard> {
+  bool inCart = false;
+
+  @override
+  Widget build(BuildContext context) {
+    return CardWidget(
+      child: Column(
+        children: [
+          Text(widget.title, style: headlineMedium),
+          SizedBox(height: 16),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    widget.category,
+                    style: captionSemibold.copyWith(color: captionColor),
+                  ),
+                  SizedBox(height: 4),
+                  Text(widget.price, style: title3Semibold),
+                ],
+              ),
+              inCart
+                  ? ButtonWidget(
+                      onPressed: () {
+                        setState(() {
+                          inCart = !inCart;
+                        });
+                      },
+                      size: 'small',
+                      label: 'Убрать',
+                      variant: 'solid',
+                    )
+                  : ButtonWidget(
+                      onPressed: () {
+                        setState(() {
+                          inCart = !inCart;
+                        });
+                      },
+                      size: 'small',
+                      label: "Добавить",
+                      variant: 'flat',
+                    ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/cards/project_card.dart

@@ -0,0 +1,49 @@
+import 'package:flutter/widgets.dart';
+import 'package:ui_kit/card.dart';
+import 'package:ui_kit/ui_kit.dart';
+
+class ProjectCard extends StatefulWidget {
+  const ProjectCard({
+    super.key,
+    required this.title,
+    required this.lastDate,
+    required this.onPressed,
+  });
+  final String title;
+  final String lastDate;
+  final VoidCallback onPressed;
+
+  @override
+  State<ProjectCard> createState() => _ProjectCardState();
+}
+
+class _ProjectCardState extends State<ProjectCard> {
+  @override
+  Widget build(BuildContext context) {
+    return CardWidget(
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(widget.title, style: headlineMedium),
+          SizedBox(height: 44),
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.end,
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Text(
+                'Прошло ${widget.lastDate} дня',
+                style: captionSemibold.copyWith(color: captionColor),
+              ),
+              ButtonWidget(
+                onPressed: widget.onPressed,
+                label: "Открыть",
+                variant: 'flat',
+                size: 'small',
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/colors.dart

@@ -15,3 +15,5 @@ const descColor = Color.fromRGBO(135, 135, 161, 1);
 const cardColor = Color.fromRGBO(135, 135, 161, 1);
 const captionColor = Color.fromRGBO(147, 147, 150, 1);
 const iconsColor = Color.fromRGBO(184, 193, 204, 1);
+const dividerColor = Color.fromRGBO(244, 244, 244, 1);
+const shadowColor = Color.fromRGBO(228, 232, 245, 0.6);

lib/counter.dart

@@ -0,0 +1,33 @@
+import 'package:flutter/widgets.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:ui_kit/ui_kit.dart';
+
+class CounterWidget extends StatefulWidget {
+  const CounterWidget({super.key});
+
+  @override
+  State<CounterWidget> createState() => _CounterWidgetState();
+}
+
+class _CounterWidgetState extends State<CounterWidget> {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: 64,
+      height: 32,
+      padding: EdgeInsets.symmetric(horizontal: 6, vertical: 6),
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(8),
+        color: inputBgColor,
+      ),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          SvgPicture.asset('assets/minus.svg'),
+          SvgPicture.asset('assets/divider.svg'),
+          SvgPicture.asset('assets/plus.svg'),
+        ],
+      ),
+    );
+  }
+}

lib/ui_kit.dart

@@ -10,3 +10,8 @@ export 'button.dart';
 export 'tabbar.dart';
 export 'bottom_sheet.dart';
 export 'header.dart';
+export 'card.dart';
+export 'cards/primary_card.dart';
+export 'cards/cart_card.dart';
+export 'cards/project_card.dart';
+export 'counter.dart';