SmallHeaderWidget

assets/icons/header_plus.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 4.16666V15.8333" stroke="#B8C1CC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.16666 10H15.8333" stroke="#B8C1CC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

example/lib/storybook.dart

@@ -12,6 +12,7 @@ class StorybookApp extends StatelessWidget {
         return UtilsMaterialWrapper(widget: widget);
       },
       stories: [
+        SmallHeaderWidget.story,
         BaseCardWidget.story,
         PrimaryCardWidget.story,
         CartCardWidget.story,

lib/matule_uikit.dart

@@ -6,6 +6,7 @@ export "src/presentation/theme/styles.dart";
 
 export "src/presentation/widgets/button_widget.dart";
 export "src/presentation/widgets/card_widget.dart";
+export "src/presentation/widgets/header_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/widgets/header_widget.dart

@@ -0,0 +1,72 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:storybook_flutter/storybook_flutter.dart';
+
+import '../../../matule_uikit.dart';
+
+class SmallHeaderWidget extends StatelessWidget {
+  final CustomTheme theme;
+  final String title;
+  final Function onTap;
+
+  const SmallHeaderWidget({
+    super.key,
+    required this.theme,
+    required this.title,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: 335.w,
+      height: 48.h,
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Row(
+            mainAxisAlignment: MainAxisAlignment.end,
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: [
+              Text(
+                title,
+                style: theme.styles.title2Semibold20.copyWith(
+                  color: theme.palette.blackOld,
+                ),
+              ),
+              SizedBox(width: 99.w),
+              GestureDetector(
+                onTap: () => onTap(),
+                child: Padding(
+                  padding: EdgeInsets.all(4.r),
+                  child: SvgPicture.asset(
+                    "packages/matule_uikit/assets/icons/header_plus.svg",
+                    width: 20.r,
+                    height: 20.r,
+                  ),
+                ),
+              ),
+            ],
+          ),
+          SizedBox(width: 1.sw, height: 1.h),
+        ],
+      ),
+    );
+  }
+
+  static Story get story => Story(
+    name: "SmallHeader",
+    builder: (BuildContext context) {
+      var theme = CustomTheme.of(context);
+      String title = context.knobs.text(label: "Title", initial: "Проекты");
+      return SmallHeaderWidget(
+        theme: theme,
+        title: title,
+        onTap: () {
+          debugPrint("SmallHeader pressed!");
+        },
+      );
+    },
+  );
+}