example/lib/button_section.dart

@@ -24,7 +24,7 @@ class _ButtonSectionState extends State<ButtonSection> {
             margin: EdgeInsets.only(bottom: 10),
             child: ButtonWidget(
               onPressed: () {},
-              label: 'Access',
+              label: 'Подтвердить',
               variant: currentItem,
             ),
           );

example/lib/chips_section.dart

@@ -0,0 +1,35 @@
+import 'package:flutter/material.dart';
+import 'package:ui_kit/ui_kit.dart';
+import 'package:ui_kit/utils.dart';
+
+class ChipsSection extends StatefulWidget {
+  const ChipsSection({super.key});
+
+  @override
+  State<ChipsSection> createState() => _ChipsSectionState();
+}
+
+class _ChipsSectionState extends State<ChipsSection> {
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: 129,
+      height: height(context) * 33,
+      child: ListView.builder(
+        itemCount: 2,
+        itemBuilder: (BuildContext context, int index) {
+          return Container(
+            margin: EdgeInsets.only(bottom: height(context) * 2),
+            child: Chips(
+              buttonText: 'Популярные',
+              buttonStyle: index == 1
+                  ? textMedium.copyWith(color: descColor)
+                  : textMedium.copyWith(color: whiteColor),
+              bgColor: index == 1 ? inputBgColor : primaryColor,
+            ),
+          );
+        },
+      ),
+    );
+  }
+}

example/lib/counter_section.dart

@@ -15,7 +15,7 @@ class _CounterSectionState extends State<CounterSection> {
     return Container(
       margin: EdgeInsets.only(bottom: height(context) * 5),
       width: 64,
-      height: height(context) * 5,
+      height: height(context) * 15,
       child: ListView.builder(
         itemCount: 2,
         itemBuilder: (BuildContext context, int index) {

example/lib/log_in_section.dart

@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+import 'package:ui_kit/ui_kit.dart';
+
+class LogInSection extends StatefulWidget {
+  const LogInSection({super.key});
+
+  @override
+  State<LogInSection> createState() => _LogInSectionState();
+}
+
+class _LogInSectionState extends State<LogInSection> {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: EdgeInsets.only(bottom: height(context) * 3),
+      width: width(context) * 100,
+      height: height(context) * 33,
+      child: ListView.builder(
+        itemCount: 2,
+        itemBuilder: (BuildContext context, int index) {
+          return Container(
+            margin: EdgeInsets.only(bottom: height(context) * 2),
+            child: LogInCard(
+              image: index == 1 ? 'assets/yandex.png' : 'assets/vk.png',
+              text: index == 1 ? 'Войти с Yandex' : 'Войти с VK',
+            ),
+          );
+        },
+      ),
+    );
+  }
+}

example/lib/main.dart

@@ -1,11 +1,13 @@
 import 'package:example/bottom_sheet_section.dart';
 import 'package:example/button_section.dart';
 import 'package:example/card_section.dart';
+import 'package:example/chips_section.dart';
 import 'package:example/colors_section.dart';
 import 'package:example/counter_section.dart';
 import 'package:example/fonts_section.dart';
 import 'package:example/header_section.dart';
 import 'package:example/inputs_section.dart';
+import 'package:example/log_in_section.dart';
 import 'package:example/search_section.dart';
 import 'package:example/select_section.dart';
 import 'package:example/small_button_section.dart';
@@ -45,6 +47,8 @@ class MainApp extends StatelessWidget {
                 CounterSection(),
                 ToggleSection(),
                 SelectSection(),
+                ChipsSection(),
+                LogInSection(),
               ],
             ),
           ),

lib/cards/log_in_card.dart

@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+import 'package:ui_kit/ui_kit.dart';
+
+class LogInCard extends StatefulWidget {
+  const LogInCard({super.key, required this.image, required this.text});
+  final String image;
+  final String text;
+
+  @override
+  State<LogInCard> createState() => _LogInCardState();
+}
+
+class _LogInCardState extends State<LogInCard> {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.symmetric(horizontal: 14, vertical: 14),
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(12),
+        border: Border.all(color: inputStrokeColor, width: 1),
+      ),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Image.asset(widget.image, width: 32, height: 32),
+          SizedBox(width: 16),
+          Text(widget.text, style: title3Medium),
+        ],
+      ),
+    );
+  }
+}

lib/chips.dart

@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+
+class Chips extends StatefulWidget {
+  const Chips({
+    super.key,
+    required this.buttonText,
+    required this.buttonStyle,
+    required this.bgColor,
+  });
+  final String buttonText;
+  final TextStyle buttonStyle;
+  final Color bgColor;
+
+  @override
+  State<Chips> createState() => _ChipsState();
+}
+
+class _ChipsState extends State<Chips> {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: 129,
+      height: 48,
+      padding: EdgeInsets.symmetric(horizontal: 20, vertical: 14),
+      decoration: BoxDecoration(
+        color: widget.bgColor,
+        borderRadius: BorderRadius.circular(10),
+      ),
+      child: Text(widget.buttonText, style: widget.buttonStyle),
+    );
+  }
+}

lib/ui_kit.dart

@@ -15,3 +15,5 @@ export 'cards/primary_card.dart';
 export 'cards/cart_card.dart';
 export 'cards/project_card.dart';
 export 'toggle.dart';
+export 'chips.dart';
+export "cards/log_in_card.dart";