feat: huge update in flutter version (#74)

* not specified updates

examples/demo_base/pubspec.lock

@@ -88,6 +88,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "0.12.11"
+  material_color_utilities:
+    dependency: transitive
+    description:
+      name: material_color_utilities
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.1.3"
   meta:
     dependency: transitive
     description:
@@ -127,7 +134,7 @@ packages:
       path: "../.."
       relative: true
     source: path
-    version: "1.23.1"
+    version: "1.24.6"
   source_span:
     dependency: transitive
     description:
@@ -169,7 +176,7 @@ packages:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.4.3"
+    version: "0.4.8"
   typed_data:
     dependency: transitive
     description:

lib/components/box/box-base.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable react/require-default-props */
-import React, { Ref } from 'react';
+import React from 'react';
 import { renderCSS } from '@lib/utils/renderCSS';
 import { theme } from '@lib/core/theme/theme';
 import { StyleSheet } from '@lib/core/stylesheet/stylesheet';

lib/components/box/box.dart

@@ -6,12 +6,14 @@ class Box extends StatelessWidget {
   final List<Widget>? children;
   final StyleSheet styleSheet;
   final BoxBaseStyles? externalStyles;
+  final VoidCallback? onPress;
 
   const Box({
     Key? key,
     this.children = const [],
     this.styleSheet = const StyleSheet(),
     this.externalStyles,
+    this.onPress,
   }) : super(key: key);
 
   @override
@@ -28,17 +30,29 @@ class Box extends StatelessWidget {
     return DefaultTextStyle.merge(
       style: TextStyle(
         color: styles.color,
+        fontSize: styles.fontSize,
+        fontWeight: styles.fontWeight,
       ),
       child: withPositioned(
         styles: styles,
         child: withFlexible(
           styles: styles,
-          child: mainWidget(styles),
+          child: withGestures(mainWidget(styles)),
         ),
       ),
     );
   }
 
+  Widget withGestures(Widget child) {
+    if (onPress != null) {
+      return GestureDetector(
+        onTap: onPress,
+        child: child,
+      );
+    }
+    return child;
+  }
+
   Widget withPositioned({required Widget child, required styles}) {
     if (styles.position == 'absolute') {
       // .fill ?
@@ -75,7 +89,8 @@ class Box extends StatelessWidget {
     return child;
   }
 
-  Container mainWidget(BoxBaseStyles styles) {
+  mainWidget(BoxBaseStyles styles) {
+    // GestureDetector
     return Container(
       width: styles.width,
       height: styles.height,

lib/components/box/flutter/box_base_styles.dart

@@ -38,6 +38,16 @@ double? doubleValueResolver(value, defaultValue, activeBreakpoint) {
       : defaultValue;
 }
 
+int? intValueResolver(value, defaultValue, activeBreakpoint) {
+  var baseValue = resolveValueForBreakpoint(
+    value,
+    activeBreakpoint,
+  );
+  return (baseValue != null)
+      ? int.parse(baseValue.replaceAll('px', ''))
+      : defaultValue;
+}
+
 class BoxBaseStyles {
   StyleSheet styleSheet;
   Breakpoints activeBreakpoint;
@@ -64,11 +74,11 @@ class BoxBaseStyles {
   dynamic crossAxisAlignment = 'flex-start';
   dynamic mainAxisAlignment = 'flex-start';
   dynamic overflowY;
-  double borderRadius = 0;
-  double borderRadiusTopLeft = 0;
-  double borderRadiusTopRight = 0;
-  double borderRadiusBottomLeft = 0;
-  double borderRadiusBottomRight = 0;
+  dynamic borderRadius = 0.0;
+  dynamic borderRadiusTopLeft;
+  dynamic borderRadiusTopRight;
+  dynamic borderRadiusBottomLeft;
+  dynamic borderRadiusBottomRight;
   double boxShadowOffsetX = 0;
   double boxShadowOffsetY = 0;
   double boxShadowBlur = 0;
@@ -79,23 +89,25 @@ class BoxBaseStyles {
   dynamic right;
   dynamic left;
   dynamic bottom;
+  dynamic fontWeight = '400';
+  dynamic fontSize;
 
   BoxBaseStyles({
     required this.styleSheet,
     required this.activeBreakpoint,
   }) {
     // [width]
-    var baseWidth =
-        resolveValueForBreakpoint(styleSheet.width, activeBreakpoint);
-    if (baseWidth != null) {
-      width = double.parse(baseWidth);
-    }
+    width = doubleValueResolver(
+      styleSheet.width,
+      width,
+      activeBreakpoint,
+    );
     // [height]
-    var baseHeight =
-        resolveValueForBreakpoint(styleSheet.height, activeBreakpoint);
-    if (baseHeight != null) {
-      height = double.parse(baseHeight);
-    }
+    height = doubleValueResolver(
+      styleSheet.height,
+      height,
+      activeBreakpoint,
+    );
 
     // [color]
     color = colorResolver(
@@ -207,34 +219,39 @@ class BoxBaseStyles {
         resolveValueForBreakpoint(styleSheet.overflowY, activeBreakpoint);
 
     // [borderRadius]
-    var borderRadiusValue =
-        resolveValueForBreakpoint(styleSheet.borderRadius, activeBreakpoint);
-    borderRadius =
-        (borderRadiusValue != null) ? double.parse(borderRadiusValue) : 0;
+    borderRadius = doubleValueResolver(
+      styleSheet.borderRadius,
+      borderRadius,
+      activeBreakpoint,
+    );
 
-    var borderRadiusTopLeftValue = resolveValueForBreakpoint(
-        styleSheet.borderRadiusTopLeft, activeBreakpoint);
-    borderRadiusTopLeft = (borderRadiusTopLeftValue != null)
-        ? double.parse(borderRadiusTopLeftValue)
-        : borderRadius;
+    borderRadiusTopLeft = doubleValueResolver(
+          styleSheet.borderRadiusTopLeft,
+          borderRadiusTopLeft,
+          activeBreakpoint,
+        ) ??
+        borderRadius;
 
-    var borderRadiusTopRightValue = resolveValueForBreakpoint(
-        styleSheet.borderRadiusTopRight, activeBreakpoint);
-    borderRadiusTopRight = (borderRadiusTopRightValue != null)
-        ? double.parse(borderRadiusTopRightValue)
-        : borderRadius;
+    borderRadiusTopRight = doubleValueResolver(
+          styleSheet.borderRadiusTopRight,
+          borderRadiusTopRight,
+          activeBreakpoint,
+        ) ??
+        borderRadius;
 
-    var borderRadiusBottomLeftValue = resolveValueForBreakpoint(
-        styleSheet.borderRadiusBottomLeft, activeBreakpoint);
-    borderRadiusBottomLeft = (borderRadiusBottomLeftValue != null)
-        ? double.parse(borderRadiusBottomLeftValue)
-        : borderRadius;
+    borderRadiusBottomLeft = doubleValueResolver(
+          styleSheet.borderRadiusBottomLeft,
+          borderRadiusBottomLeft,
+          activeBreakpoint,
+        ) ??
+        borderRadius;
 
-    var borderRadiusBottomRightValue = resolveValueForBreakpoint(
-        styleSheet.borderRadiusBottomRight, activeBreakpoint);
-    borderRadiusBottomRight = (borderRadiusBottomRightValue != null)
-        ? double.parse(borderRadiusBottomRightValue)
-        : borderRadius;
+    borderRadiusBottomRight = doubleValueResolver(
+          styleSheet.borderRadiusBottomRight,
+          borderRadiusBottomRight,
+          activeBreakpoint,
+        ) ??
+        borderRadius;
 
     // [boxShadow]
     boxShadowOffsetX = doubleValueResolver(
@@ -270,5 +287,30 @@ class BoxBaseStyles {
     right = doubleValueResolver(styleSheet.right, right, activeBreakpoint);
     bottom = doubleValueResolver(styleSheet.bottom, bottom, activeBreakpoint);
     left = doubleValueResolver(styleSheet.left, left, activeBreakpoint);
+
+    // [fontSize]
+    fontSize = doubleValueResolver(
+      styleSheet.fontSize,
+      fontSize,
+      activeBreakpoint,
+    );
+
+    // [fontWeight]
+    var fontWeightMap = {
+      'normal': FontWeight.normal,
+      'bold': FontWeight.bold,
+      '100': FontWeight.w100,
+      '200': FontWeight.w200,
+      '300': FontWeight.w300,
+      '400': FontWeight.w400,
+      '500': FontWeight.w500,
+      '600': FontWeight.w600,
+      '700': FontWeight.w700,
+      '800': FontWeight.w800,
+      '900': FontWeight.w900,
+    };
+    fontWeight = fontWeightMap[
+        resolveValueForBreakpoint(styleSheet.fontWeight, activeBreakpoint) ??
+            fontWeight];
   }
 }

lib/components/image/image.dart

@@ -15,12 +15,11 @@ class Image extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Box(
+      styleSheet: styleSheet,
       children: [
         flutter.Image.network(
           src,
-          fit: BoxFit.contain,
-          height: 100.0,
-          width: 100.0,
+          fit: BoxFit.fill,
         ),
       ],
     );

lib/components/provider/flutter/theme.dart

@@ -1,10 +1,11 @@
 import 'package:skynexui_components/core/breakpoints/breakpoints.dart';
 import 'package:skynexui_components/core/theme/colors/theme_colors.dart';
+import 'package:skynexui_components/core/theme/typography/typography.dart';
 
 class Theme {
   ThemeColors colors = ThemeColors();
   ThemeBreakpoints breakpoints = ThemeBreakpoints();
+  ThemeTypography typography = ThemeTypography();
   String space = '0';
-  String typography = '0';
   String components = '0';
 }

lib/components/text/text.dart

@@ -1,24 +1,57 @@
 import 'package:skynexui_components/components.dart';
 import 'package:flutter/material.dart' as flutter;
+import 'package:skynexui_components/components/box/flutter/box_base_styles.dart';
 
 class Text extends StatelessWidget {
   final StyleSheet styleSheet;
-
+  final String variant;
   final String data;
 
   const Text(
     this.data, {
     Key? key,
+    this.variant = 'body2',
     this.styleSheet = const StyleSheet(),
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
+    var theme = useTheme(context);
+    var activeVariant = theme.typography.toMap()[variant];
+
+    var activeBreakpoint = getActiveBreakpoint(context);
+    var styles = BoxBaseStyles(
+      styleSheet: StyleSheet(
+        color: styleSheet.color,
+        fontFamily: {
+          Breakpoints.xs: 'Roboto',
+        },
+        fontSize: {
+          Breakpoints.xs: activeVariant[Breakpoints.xs]?.fontSize,
+          Breakpoints.md: activeVariant[Breakpoints.md]?.fontSize,
+        },
+        fontWeight: {
+          Breakpoints.xs: activeVariant[Breakpoints.xs]?.fontWeight,
+          Breakpoints.md: activeVariant[Breakpoints.md]?.fontWeight,
+        },
+        letterSpacing: {
+          Breakpoints.xs: activeVariant[Breakpoints.xs]?.letterSpacing,
+          Breakpoints.md: activeVariant[Breakpoints.md]?.letterSpacing,
+        },
+      ),
+      activeBreakpoint: activeBreakpoint,
+    );
+
     return Box(
       styleSheet: styleSheet,
       children: [
         flutter.Text(
           data,
+          style: TextStyle(
+            fontSize: styles.fontSize,
+            fontWeight: styles.fontWeight,
+            color: styles.color,
+          ),
         ),
       ],
     );

lib/core/stylesheet/stylesheet.dart

@@ -71,6 +71,10 @@ class StyleSheet {
   final Map<Breakpoints, String?> height;
   final Map<Breakpoints, String?> width;
 // %%[CODER_END]:StyleSheet_attributes%%
+  final Map<Breakpoints, String?> fontSize;
+  final Map<Breakpoints, String?> fontWeight;
+  final Map<Breakpoints, String?> letterSpacing;
+  final Map<Breakpoints, String?> fontFamily;
 
   const StyleSheet({
 // %%[CODER_START]:StyleSheet_constructor%%
@@ -115,5 +119,9 @@ class StyleSheet {
     this.height = defaultStringEmptyValue,
     this.width = defaultStringEmptyValue,
 // %%[CODER_END]:StyleSheet_constructor%%
+    this.fontSize = defaultStringEmptyValue,
+    this.fontWeight = defaultStringEmptyValue,
+    this.letterSpacing = defaultStringEmptyValue,
+    this.fontFamily = defaultStringEmptyValue,
   });
 }