diff --git a/example/assets/divider.svg b/example/assets/divider.svg new file mode 100644 index 0000000..5af48bf --- /dev/null +++ b/example/assets/divider.svg @@ -0,0 +1,3 @@ + + + diff --git a/example/lib/card_section.dart b/example/lib/card_section.dart new file mode 100644 index 0000000..b506fb9 --- /dev/null +++ b/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 createState() => _CardSectionState(); +} + +class _CardSectionState extends State { + 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; + }, + ), + ); + } +} diff --git a/example/lib/counter.dart b/example/lib/counter.dart new file mode 100644 index 0000000..5928031 --- /dev/null +++ b/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 createState() => _CounterSectionState(); +} + +class _CounterSectionState extends State { + @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(), + ); + }, + ), + ); + } +} diff --git a/example/lib/main.dart b/example/lib/main.dart index 1e9a0ac..cf8d94f 100644 --- a/example/lib/main.dart +++ b/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(), ], ), ), diff --git a/lib/button.dart b/lib/button.dart index 3d65796..18cd018 100644 --- a/lib/button.dart +++ b/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 { diff --git a/lib/card.dart b/lib/card.dart new file mode 100644 index 0000000..1ec1745 --- /dev/null +++ b/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 createState() => _CardWidgetState(); +} + +class _CardWidgetState extends State { + @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, + ); + } +} diff --git a/lib/cards/cart_card.dart b/lib/cards/cart_card.dart new file mode 100644 index 0000000..9519735 --- /dev/null +++ b/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 createState() => _CartCardState(); +} + +class _CartCardState extends State { + @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(), + ], + ), + ), + ], + ), + ], + ), + ); + } +} diff --git a/lib/cards/primary_card.dart b/lib/cards/primary_card.dart new file mode 100644 index 0000000..1a1edc0 --- /dev/null +++ b/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 createState() => _PrimaryCardState(); +} + +class _PrimaryCardState extends State { + 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', + ), + ], + ), + ], + ), + ); + } +} diff --git a/lib/cards/project_card.dart b/lib/cards/project_card.dart new file mode 100644 index 0000000..85e00fd --- /dev/null +++ b/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 createState() => _ProjectCardState(); +} + +class _ProjectCardState extends State { + @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', + ), + ], + ), + ], + ), + ); + } +} diff --git a/lib/colors.dart b/lib/colors.dart index 81fc465..32e9c99 100644 --- a/lib/colors.dart +++ b/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); diff --git a/lib/counter.dart b/lib/counter.dart new file mode 100644 index 0000000..9f576ad --- /dev/null +++ b/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 createState() => _CounterWidgetState(); +} + +class _CounterWidgetState extends State { + @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'), + ], + ), + ); + } +} diff --git a/lib/ui_kit.dart b/lib/ui_kit.dart index ad5f394..5c6fbe1 100644 --- a/lib/ui_kit.dart +++ b/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';