Merge pull request #1 from fluttersdk/develop

v0.0.3

Author: anilcancakir

CHANGELOG.md

@@ -1,6 +1,30 @@
 # Changelog
 This project follows [Semantic Versioning 2.0.0](https://semver.org/spec/v2.0.0.html).
 
+## [0.0.3] - 2025-06-09
+
+### Added
+- **Display Control (`hide`, `show`)**: Added new utility classes for responsive visibility control. Widgets now support class-based display toggling using `hide`, `show`, `lg:show`, `md:hide`, etc.
+- **`DisplayParser`**: New parser for handling display-related utility classes, with full support for screen breakpoints.
+- **New Example Page**: `/layouts/display` added to demonstrate display utilities in action (`example/lib/pages/layout/display.dart`).
+- **`applyBorderColor` & `applyBorderRadiusValue`**: New helper methods in `BorderParser` for parsing border color and border radius values.
+
+### Changed
+- **Widgets Logging**: Improved debug logging via `hasDebugClassName`, now prints parsed class names and widgets (`WText`, `WFlex`, `WFlexible`, `WContainer`, etc.).
+- **`WFlexible`**: `child` is now nullable. Returns `Spacer` if `child` is `null`.
+- **`WContainer`**: Now wraps `Container` with `ClipRRect` if a `borderRadius` is specified.
+- **Shadow Color Logic**: Changed `BoxShadow` color alpha parsing from `.withValues(alpha: 25)` to `.withValues(alpha: 0.1)` for better consistency.
+
+### Fixed
+- Fixed alignment mapping by adding support for `alignment-left` and `alignment-right`.
+- Fixed text alignment handling using `text-left`, `text-center`, etc., via `AlignmentParser.applyTextAlignment`.
+- Improved padding parser to return the original widget if padding is zero (prevents unnecessary widget wrapping).
+
+### Removed
+- Deprecated custom `RenderObject` in `WGap` in favor of a simpler `StatelessWidget` using `SizedBox`.
+
+This version introduces foundational support for display utilities and improves debugging and widget flexibility. It’s recommended to update to benefit from responsive visibility and streamlined layout logic.
+
 ## [0.0.2] - 2025-02-02
 - Added Github workflow for publishing package to pub.dev
 - Updated README.md with installation and usage instructions

README.md

@@ -21,7 +21,7 @@ Or manually add it to your `pubspec.yaml`:
 
 ```yaml
 dependencies:
-  fluttersdk_wind: ^0.0.2
+  fluttersdk_wind: ^0.0.3
 ```
 
 Then, fetch dependencies:

example/lib/demo.dart

@@ -22,6 +22,7 @@ import 'pages/flex/gap_dynamic.dart';
 import 'pages/flex/justify_content.dart';
 import 'pages/flex/scrollable_overflow.dart';
 import 'pages/home.dart';
+import 'pages/layout/display.dart';
 import 'pages/sizing/height.dart';
 import 'pages/sizing/width.dart';
 import 'pages/spacing/margin.dart';
@@ -40,6 +41,7 @@ import 'pages/widgets/wflex.dart';
 import 'pages/widgets/wflexcontainer.dart';
 import 'pages/widgets/wflexible.dart';
 import 'pages/widgets/wtext.dart';
+import 'pages/example/product_grid.dart';
 
 class MyApp extends StatelessWidget {
   final Widget Function(BuildContext) appCallback;
@@ -187,6 +189,10 @@ void main() {
               AppLayoutWidget(WFlexibleWidget()),
           '/widgets/wcontainer': (context) =>
               AppLayoutWidget(WContainerWidget()),
+          '/layouts/display': (context) =>
+              AppLayoutWidget(DisplayLayout()),
+          '/example/product_grid': (context) =>
+              AppLayoutWidget(ProductGrid()),
         },
       );
     },

example/lib/pages/example/product_grid.dart

@@ -0,0 +1,52 @@
+import 'package:flutter/material.dart';
+import 'package:fluttersdk_wind/fluttersdk_wind.dart';
+
+class ProductGrid extends StatelessWidget {
+  const ProductGrid({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: wColor('gray', shade: 200),
+      body: WFlexContainer(
+        className:
+        'flex-col md:flex-row gap-4 p-4',
+        children: [
+          collectionCard(
+              imageUrl: 'https://picsum.photos/400/300',
+              title: 'Desk and Office',
+              description: 'Work from home accessories'),
+          collectionCard(
+              imageUrl: 'https://picsum.photos/400/300',
+              title: 'Self-Improvement',
+              description: 'Journals and note-taking'),
+          collectionCard(
+              imageUrl: 'https://picsum.photos/400/300',
+              title: 'Travel',
+              description: 'Daily commute essentials')
+        ],
+      ),
+    );
+  }
+
+  Widget collectionCard({
+    required String imageUrl,
+    required String title,
+    required String description,
+  }) {
+    return WFlexContainer(
+      className: 'flex-1 flex-col gap-2',
+      children: [
+        WContainer(
+          className: 'rounded-lg bg-white',
+          child: Image.network(
+            'https://picsum.photos/400/300',
+            fit: BoxFit.cover,
+          ),
+        ),
+        WText(title, className: 'text-base font-bold text-gray-900'),
+        WText(description, className: 'text-sm text-gray-500'),
+      ],
+    );
+  }
+}

example/lib/pages/layout/display.dart

@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+import 'package:fluttersdk_wind/fluttersdk_wind.dart';
+
+class DisplayLayout extends StatelessWidget {
+  const DisplayLayout({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return WFlexContainer(
+      className: 'flex-col bg-gray-100 h-64 justify-center items-center gap-4',
+      children: [
+        WFlexible(
+          className: 'hide lg:show',
+          child: WText('Visible on large and larger screens'),
+        ),
+        WFlexible(
+          className: 'hide md:show',
+          child: WText('Visible on medium and larger screens'),
+        ),
+        WFlexible(
+          className: 'show md:hide',
+          child: WText('Visible on only small screens'),
+        ),
+      ],
+    );
+  }
+}

example/pubspec.lock

@@ -5,10 +5,10 @@ packages:
     dependency: transitive
     description:
       name: async
-      sha256: d2872f9c19731c2e5f10444b14686eb7cc85c76274bd6c16e1816bff9a3bab63
+      sha256: "758e6d74e971c3e5aceb4110bfd6698efc7f501675bcfe0c775459a8140750eb"
       url: "https://pub.dev"
     source: hosted
-    version: "2.12.0"
+    version: "2.13.0"
   boolean_selector:
     dependency: transitive
     description:
@@ -61,10 +61,10 @@ packages:
     dependency: transitive
     description:
       name: fake_async
-      sha256: "6a95e56b2449df2273fd8c45a662d6947ce1ebb7aafe80e550a3f68297f3cacc"
+      sha256: "5368f224a74523e8d2e7399ea1638b37aecfca824a3cc4dfdf77bf1fa905ac44"
       url: "https://pub.dev"
     source: hosted
-    version: "1.3.2"
+    version: "1.3.3"
   ffi:
     dependency: transitive
     description:
@@ -149,10 +149,10 @@ packages:
     dependency: transitive
     description:
       name: leak_tracker
-      sha256: c35baad643ba394b40aac41080300150a4f08fd0fd6a10378f8f7c6bc161acec
+      sha256: "6bb818ecbdffe216e81182c2f0714a2e62b593f4a4f13098713ff1685dfb6ab0"
       url: "https://pub.dev"
     source: hosted
-    version: "10.0.8"
+    version: "10.0.9"
   leak_tracker_flutter_testing:
     dependency: transitive
     description:
@@ -370,10 +370,10 @@ packages:
     dependency: transitive
     description:
       name: vm_service
-      sha256: "0968250880a6c5fe7edc067ed0a13d4bae1577fe2771dcf3010d52c4a9d3ca14"
+      sha256: ddfa8d30d89985b96407efce8acbdd124701f96741f2d981ca860662f1c0dc02
       url: "https://pub.dev"
     source: hosted
-    version: "14.3.1"
+    version: "15.0.0"
   web:
     dependency: transitive
     description:
@@ -386,10 +386,10 @@ packages:
     dependency: transitive
     description:
       name: webdriver
-      sha256: "3d773670966f02a646319410766d3b5e1037efb7f07cc68f844d5e06cd4d61c8"
+      sha256: "2f3a14ca026957870cfd9c635b83507e0e51d8091568e90129fbf805aba7cade"
       url: "https://pub.dev"
     source: hosted
-    version: "3.0.4"
+    version: "3.1.0"
   xdg_directories:
     dependency: transitive
     description:

lib/src/components/wcard.dart

@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 import '../helpers.dart';
 import '../parsers/background_color_parser.dart';
 import '../parsers/border_parser.dart';
+import '../parsers/display_parser.dart';
 import '../parsers/flex_parser.dart';
 import '../parsers/margin_parser.dart';
 import '../parsers/padding_parser.dart';
@@ -75,6 +76,14 @@ class WCard extends StatelessWidget {
   Widget build(BuildContext context) {
     final String parsedClassName = classNameParser(className);
 
+    if (hasDebugClassName(className)) {
+      print('WCard: $parsedClassName');
+    }
+
+    if (DisplayParser.hide(context, parsedClassName)) {
+      return const SizedBox.shrink();
+    }
+
     Widget childComponent = Card(
       color:
           color ?? BackgroundColorParser.applyColor(context, parsedClassName),

lib/src/components/wcontainer.dart

@@ -1,10 +1,10 @@
-
 import 'package:flutter/material.dart';
 
 import '../helpers.dart';
 import '../parsers/alignment_parser.dart';
 import '../parsers/background_color_parser.dart';
 import '../parsers/border_parser.dart';
+import '../parsers/display_parser.dart';
 import '../parsers/flex_parser.dart';
 import '../parsers/margin_parser.dart';
 import '../parsers/padding_parser.dart';
@@ -87,30 +87,54 @@ class WContainer extends StatelessWidget {
   Widget build(BuildContext context) {
     final String parsedClassName = classNameParser(className);
 
-    var widget = FlexParser.applyFlexible(context, parsedClassName, Container(
-      alignment: alignment ?? AlignmentParser.applyAlignment(context, parsedClassName),
+    if (hasDebugClassName(className)) {
+      print('WContainer: $parsedClassName');
+    }
+
+    if (DisplayParser.hide(context, parsedClassName)) {
+      return const SizedBox.shrink();
+    }
+
+    final borderRadius =
+        BorderParser.applyBorderRadiusGeometry(context, parsedClassName);
+
+    Widget widget = Container(
+      alignment:
+          alignment ?? AlignmentParser.applyAlignment(context, parsedClassName),
       padding: padding ?? PaddingParser.applyGeometry(context, parsedClassName),
-      decoration: decoration ?? BoxDecoration(
-        color: color ?? BackgroundColorParser.applyColor(context, parsedClassName),
-        borderRadius: BorderParser.applyBorderRadiusGeometry(context, parsedClassName),
-        border: BorderParser.applyBoxBorder(context, parsedClassName),
-        boxShadow: ShadowParser.applyBoxShadows(context, parsedClassName) ?? [],
-      ),
+      decoration: decoration ??
+          BoxDecoration(
+            color: color ?? BackgroundColorParser.applyColor(context, parsedClassName),
+            border: BorderParser.applyBoxBorder(context, parsedClassName),
+            borderRadius: borderRadius,
+            boxShadow:
+                ShadowParser.applyBoxShadows(context, parsedClassName) ?? [],
+          ),
       foregroundDecoration: foregroundDecoration,
       width: width ?? SizeParser.applyWidth(context, parsedClassName),
       height: height ?? SizeParser.applyHeight(context, parsedClassName),
-      constraints: constraints ?? SizeParser.applyBoxConstraints(context, parsedClassName),
+      constraints: constraints ??
+          SizeParser.applyBoxConstraints(context, parsedClassName),
       margin: margin ?? MarginParser.applyGeometry(context, parsedClassName),
       transform: transform,
       transformAlignment: transformAlignment,
       clipBehavior: clipBehavior,
       child: child,
-    ));
+    );
+
+    if (borderRadius != null) {
+      widget = ClipRRect(
+        borderRadius: borderRadius,
+        child: widget,
+      );
+    }
+
+    widget = FlexParser.applyFlexible(context, parsedClassName, widget);
 
     if (hasDebugWidgetClassName(className)) {
       print(widget.toStringDeep());
     }
 
     return widget;
   }
-}
+}

lib/src/components/wflex.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 
 import '../helpers.dart';
+import '../parsers/display_parser.dart';
 import '../parsers/flex_parser.dart';
 
 /// A utility-first widget for creating flexible layouts in the Wind plugin.
@@ -66,6 +67,14 @@ class WFlex extends StatelessWidget {
   Widget build(BuildContext context) {
     final String parsedClassName = classNameParser(className);
 
+    if (hasDebugClassName(className)) {
+      print('WFlex: $parsedClassName');
+    }
+
+    if (DisplayParser.hide(context, parsedClassName)) {
+      return const SizedBox.shrink();
+    }
+
     final widget = FlexParser.applyOverflow(
         context,
         parsedClassName,
@@ -86,8 +95,8 @@ class WFlex extends StatelessWidget {
               FlexParser.applyGapToChildren(context, parsedClassName, children),
         ));
 
-    if (hasDebugWidgetClassName(className)) {
-      print(widget.toStringDeep());
+    if (hasDebugClassName(className)) {
+      print('WFlex: $parsedClassName widget: ${widget.toStringDeep()}');
     }
 
     return widget;

lib/src/components/wflex_container.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/cupertino.dart';
 
 import '../helpers.dart';
+import '../parsers/display_parser.dart';
 import '../parsers/flex_parser.dart';
 import 'wcontainer.dart';
 import 'wflex.dart';
@@ -106,6 +107,14 @@ class WFlexContainer extends StatelessWidget {
   Widget build(BuildContext context) {
     final parsedClassName = classNameParser(className);
 
+    if (hasDebugClassName(className)) {
+      print('WFlexContainer: $parsedClassName');
+    }
+
+    if (DisplayParser.hide(context, parsedClassName)) {
+      return const SizedBox.shrink();
+    }
+
     return WContainer(
       className: className,
       alignment: alignment ?? FlexParser.applyAlignment(context, parsedClassName),