#sprint-1

example/lib/button_section.dart

@@ -0,0 +1,35 @@
+import 'package:flutter/material.dart';
+import 'package:ui_kit/ui_kit.dart';
+
+class ButtonSection extends StatefulWidget {
+  const ButtonSection({super.key});
+
+  @override
+  State<ButtonSection> createState() => _ButtonSectionState();
+}
+
+class _ButtonSectionState extends State<ButtonSection> {
+  static final buttonList = ['flat', 'inactive', 'solid', 'ghost'];
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: width(context) * 100,
+      height: height(context) * 30,
+      child: ListView.builder(
+        itemCount: buttonList.length,
+        itemBuilder: (BuildContext context, int index) {
+          final currentItem = buttonList[index];
+          return Container(
+            margin: EdgeInsets.only(bottom: 10),
+            child: ButtonWidget(
+              onPressed: () {},
+              label: 'Access',
+              variant: currentItem,
+            ),
+          );
+        },
+      ),
+    );
+  }
+}

example/lib/main.dart

@@ -1,10 +1,11 @@
+import 'package:example/button_section.dart';
 import 'package:example/colors_section.dart';
 import 'package:example/fonts_section.dart';
 import 'package:example/inputs_section.dart';
 import 'package:example/search_section.dart';
+import 'package:example/small_button_section.dart';
 import 'package:flutter/material.dart';
 import 'package:ui_kit/ui_kit.dart';
-import 'package:flutter_svg/flutter_svg.dart';
 
 void main() {
   runApp(const MainApp());
@@ -29,6 +30,8 @@ class MainApp extends StatelessWidget {
                 FontsSection(),
                 InputsSection(),
                 SearchSection(),
+                ButtonSection(),
+                SmallButtonSection(),
               ],
             ),
           ),

example/lib/small_button_section.dart

@@ -0,0 +1,36 @@
+import 'package:flutter/material.dart';
+import 'package:ui_kit/ui_kit.dart';
+
+class SmallButtonSection extends StatelessWidget {
+  const SmallButtonSection({super.key});
+
+  static final buttonList = ['flat', 'inactive', 'solid', 'ghost'];
+  static final buttonLabels = ['Добавить', 'Убрать', 'Добавить', 'Подтвердить'];
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: EdgeInsets.only(bottom: height(context) * 3),
+      width: 96,
+      height: height(context) * 30,
+      child: ListView.builder(
+        itemCount: buttonList.length,
+        itemBuilder: (BuildContext context, int index) {
+          final currentItem = buttonList[index];
+          final currentLabel = buttonLabels[index];
+
+          return Container(
+            width: 96,
+            margin: EdgeInsets.only(bottom: height(context) * 1),
+            child: ButtonWidget(
+              onPressed: () {},
+              label: currentLabel,
+              variant: currentItem,
+              size: 'small',
+            ),
+          );
+        },
+      ),
+    );
+  }
+}

lib/button.dart

@@ -0,0 +1,87 @@
+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 {
+  const ButtonWidget({
+    super.key,
+    required this.onPressed,
+    required this.label,
+    this.textStyle,
+    this.size = 'big',
+    required this.variant,
+  });
+  final VoidCallback onPressed;
+  final String label;
+  final TextStyle? textStyle;
+  final String size;
+  final String variant;
+
+  @override
+  State<ButtonWidget> createState() => _ButtonWidgetState();
+}
+
+class _ButtonWidgetState extends State<ButtonWidget> {
+  late Color bgColor;
+  late TextStyle textStyle;
+  late Color borderColor;
+  @override
+  void initState() {
+    super.initState();
+    if (widget.variant == 'flat') {
+      bgColor = primaryColor;
+      borderColor = Colors.transparent;
+      if (widget.size == 'big') {
+        textStyle = title2Semibold.copyWith(color: whiteColor);
+      } else if (widget.size == 'small') {
+        textStyle = captionSemibold.copyWith(color: whiteColor);
+      }
+    }
+    if (widget.variant == 'inactive') {
+      bgColor = primaryHoverColor;
+      borderColor = Colors.transparent;
+      if (widget.size == 'big') {
+        textStyle = title2Semibold.copyWith(color: whiteColor);
+      } else if (widget.size == 'small') {
+        textStyle = captionSemibold.copyWith(color: whiteColor);
+      }
+    }
+    if (widget.variant == 'solid') {
+      bgColor = Colors.transparent;
+      borderColor = primaryColor;
+
+      if (widget.size == 'big') {
+        textStyle = title2Semibold.copyWith(color: primaryColor);
+      } else if (widget.size == 'small') {
+        textStyle = captionSemibold.copyWith(color: primaryColor);
+      }
+    }
+    if (widget.variant == 'ghost') {
+      bgColor = inputBgColor;
+      borderColor = Colors.transparent;
+      if (widget.size == 'big') {
+        textStyle = title2Semibold.copyWith(color: blackColor);
+      } else if (widget.size == 'small') {
+        textStyle = captionSemibold.copyWith(color: blackColor);
+      }
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: widget.size == 'small' ? 40 : 56,
+      width: widget.size == 'small' ? 96 : width(context) * 100,
+      decoration: BoxDecoration(
+        color: bgColor,
+        borderRadius: BorderRadius.circular(10),
+        border: Border.all(color: borderColor),
+      ),
+      child: TextButton(
+        onPressed: widget.onPressed,
+        child: Text(widget.label, style: textStyle),
+      ),
+    );
+  }
+}

lib/colors.dart

@@ -7,7 +7,7 @@ const whiteColor = Color.fromRGBO(247, 247, 247, 1);
 const errorColor = Color.fromRGBO(255, 70, 70, 1);
 const errorBgColor = Color.fromRGBO(253, 53, 53, 0.1);
 const successColor = Color.fromRGBO(255, 70, 70, 1);
-const inputBgColor = Color.fromRGBO(247, 247, 250, 1);
+const inputBgColor = Color.fromRGBO(245, 245, 249, 1);
 const inputStrokeColor = Color.fromRGBO(230, 230, 230, 1);
 const inputIcon = Color.fromRGBO(191, 199, 209, 1);
 const placeholderColor = Color.fromRGBO(191, 199, 209, 1);

lib/ui_kit.dart

@@ -6,3 +6,4 @@ export 'fonts.dart';
 export 'utils.dart';
 export 'input.dart';
 export "search.dart";
+export 'button.dart';