feat: post image widget

android/gradle.properties

@@ -1,3 +1,4 @@
-org.gradle.jvmargs=-Xmx1536M
+org.gradle.jvmargs=-Xmx8192m
+org.gradle.parallel=true
 android.useAndroidX=true
 android.enableJetifier=true

lib/app/features/core/providers/template_provider.dart

@@ -6,11 +6,11 @@ import 'package:riverpod_annotation/riverpod_annotation.dart';
 
 part 'template_provider.g.dart';
 
-Template? _template;
+late Template _template;
 
 //TODO::discuss this approach
 Template get appTemplate {
-  return _template!;
+  return _template;
 }
 
 @Riverpod(keepAlive: true)

lib/app/features/feed/widgets/text/article_header.dart

@@ -0,0 +1,30 @@
+import 'package:flutter/material.dart';
+import 'package:ice/app/extensions/build_context.dart';
+import 'package:ice/app/extensions/theme_data.dart';
+import 'package:ice/app/shared/widgets/core/screen_side_offset.dart';
+
+class ArticleHeader extends StatelessWidget {
+  const ArticleHeader({super.key, required this.headerText, this.main});
+
+  final String headerText;
+  final bool? main;
+
+  TextStyle getStyle(BuildContext context) {
+    if (main == true) {
+      return context.theme.appTextThemes.headline2
+          .copyWith(color: context.theme.appColors.feedText);
+    }
+    return context.theme.appTextThemes.title
+        .copyWith(color: context.theme.appColors.feedText);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ScreenSideOffset(
+      child: Text(
+        headerText,
+        style: getStyle(context),
+      ),
+    );
+  }
+}

lib/app/features/feed/widgets/text/widgetbook.dart

@@ -0,0 +1,24 @@
+import 'package:flutter/material.dart';
+import 'package:ice/app/features/feed/widgets/text/article_header.dart';
+import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
+
+@widgetbook.UseCase(
+  name: 'article header',
+  type: ArticleHeader,
+)
+Widget plainArticleHeader(BuildContext context) {
+  return const Column(
+    mainAxisAlignment: MainAxisAlignment.center,
+    children: <Widget>[
+      ArticleHeader(
+        headerText:
+            'Coinbase Launches USDC Yields for Global Customers Amid US Crackdown',
+        main: true,
+      ),
+      ArticleHeader(
+        headerText:
+            'In 22 years, AI will perform 50% of work tasks, These are the results of McKinsey study',
+      ),
+    ],
+  );
+}

lib/app/shared/widgets/core/screen_side_offset.dart

@@ -0,0 +1,22 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:ice/app/features/core/providers/template_provider.dart';
+
+class ScreenSideOffset extends StatelessWidget {
+  const ScreenSideOffset({super.key, required this.child});
+
+  final Widget child;
+
+  static double get offset =>
+      ScreenUtil().setWidth(appTemplate.screenSideOffset);
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: EdgeInsets.symmetric(
+        horizontal: offset,
+      ),
+      child: child,
+    );
+  }
+}

lib/app/shared/widgets/images/post_image/post_image.dart

@@ -0,0 +1,88 @@
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:ice/app/extensions/build_context.dart';
+import 'package:ice/app/extensions/theme_data.dart';
+import 'package:ice/app/shared/widgets/core/screen_side_offset.dart';
+import 'package:ice/app/shared/widgets/tiles/read_time/read_time_tile.dart'; // Make sure this is correctly imported for your project
+
+const double borderRadius = 12.0;
+
+class PostImage extends StatelessWidget {
+  const PostImage({
+    super.key,
+    required this.imageUrl,
+    this.minutesToRead,
+    this.minutesToReadAlignment,
+  });
+
+  final String imageUrl;
+  final int? minutesToRead;
+  final Alignment? minutesToReadAlignment;
+
+  String getAdaptiveImageUrl(double imageWidth) {
+    return '$imageUrl?width=${imageWidth.toInt()}';
+  }
+
+  BorderRadius getOverlayBorderRadius(Alignment alignment) {
+    if (alignment == Alignment.bottomRight || alignment == Alignment.topLeft) {
+      return const BorderRadius.only(
+        topLeft: Radius.circular(borderRadius),
+        bottomRight: Radius.circular(borderRadius),
+      );
+    }
+    if (alignment == Alignment.topRight || alignment == Alignment.bottomLeft) {
+      return const BorderRadius.only(
+        topRight: Radius.circular(borderRadius),
+        bottomLeft: Radius.circular(borderRadius),
+      );
+    }
+    return const BorderRadius.all(Radius.circular(borderRadius));
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final double paddingHorizontal = ScreenSideOffset.offset;
+    final double imageWidth =
+        MediaQuery.of(context).size.width - paddingHorizontal * 2;
+
+    final Alignment alignment = minutesToReadAlignment ?? Alignment.bottomRight;
+
+    return Padding(
+      padding: EdgeInsets.symmetric(horizontal: paddingHorizontal),
+      child: ClipRRect(
+        borderRadius: BorderRadius.circular(borderRadius),
+        child: Stack(
+          alignment: alignment,
+          children: <Widget>[
+            CachedNetworkImage(
+              imageUrl: getAdaptiveImageUrl(imageWidth),
+              width: imageWidth,
+              fit: BoxFit.cover, // Cover the widget's bounds
+            ),
+            if (minutesToRead != null) ...<Widget>[
+              Container(
+                // Adjust the overlay margin
+                padding:
+                    EdgeInsets.symmetric(horizontal: 8.0.w, vertical: 4.0.w),
+                // Adjust the overlay padding
+                decoration: BoxDecoration(
+                  color: context.theme.appColors.tertararyBackground,
+                  // Background color
+                  border: Border.all(
+                    color: context.theme.appColors.onTerararyFill,
+                  ),
+                  // Border color
+                  borderRadius: getOverlayBorderRadius(alignment),
+                ),
+                child: ReadTimeTile(
+                  minutesToRead: minutesToRead!,
+                ),
+              ),
+            ],
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/app/shared/widgets/images/post_image/widgetbook.dart

@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+import 'package:ice/app/shared/widgets/images/post_image/post_image.dart';
+import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
+
+@widgetbook.UseCase(
+  name: 'base case',
+  type: PostImage,
+)
+Widget baseUseCase(BuildContext context) {
+  return const PostImage(
+    imageUrl:
+        'https://ice.io/wp-content/uploads/2023/03/Pre-Release-600x403.png',
+  );
+}
+
+@widgetbook.UseCase(
+  name: 'with read time overlay',
+  type: PostImage,
+)
+Widget withReadTimeUseCase(BuildContext context) {
+  return const PostImage(
+    imageUrl:
+        'https://ice.io/wp-content/uploads/2023/03/Pre-Release-600x403.png',
+    minutesToRead: 7,
+    minutesToReadAlignment: Alignment.topRight,
+  );
+}

lib/app/shared/widgets/tiles/read_time/read_time_tile.dart

@@ -0,0 +1,33 @@
+import 'package:flutter/material.dart';
+import 'package:ice/app/extensions/build_context.dart';
+import 'package:ice/app/extensions/theme_data.dart';
+
+const double iconSize = 16.0;
+
+class ReadTimeTile extends StatelessWidget {
+  const ReadTimeTile({super.key, required this.minutesToRead});
+
+  final int minutesToRead;
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: <Widget>[
+        Icon(
+          Icons.access_time,
+          size: iconSize,
+          color: context.theme.appColors.feedText,
+        ),
+        const SizedBox(width: 3.0),
+        // Space between icon and text
+        Text(
+          '$minutesToRead min read',
+          style: context.theme.appTextThemes.caption
+              .copyWith(color: context.theme.appColors.feedText),
+        ),
+        // Text displaying minutes
+      ],
+    );
+  }
+}

lib/app/shared/widgets/tiles/read_time/widgetbook.dart

@@ -0,0 +1,24 @@
+import 'package:flutter/material.dart';
+import 'package:ice/app/extensions/build_context.dart';
+import 'package:ice/app/extensions/theme_data.dart';
+import 'package:ice/app/shared/widgets/tiles/read_time/read_time_tile.dart';
+import 'package:widgetbook/widgetbook.dart';
+import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
+
+@widgetbook.UseCase(
+  name: 'base case',
+  type: ReadTimeTile,
+)
+Widget baseUseCase(BuildContext context) {
+  return ColoredBox(
+    color: context.theme.appColors.onTerararyFill,
+    // Set the background color to white
+    child: ReadTimeTile(
+      minutesToRead: context.knobs.int.slider(
+        label: 'Minutes To Read',
+        initialValue: 7,
+        max: 120,
+      ),
+    ),
+  );
+}

lib/app/templates/basic.json

@@ -5,6 +5,7 @@
       "primaryText": "#0E0E0E",
       "secondaryText": "#494949",
       "tertararyText": "#9A9A9A",
+      "feedText": "#333436",
       "primaryBackground": "#F5F7FF",
       "secondaryBackground": "#FFFFFF",
       "tertararyBackground": "#FAFBFF",
@@ -23,6 +24,7 @@
       "primaryText": "#0E0E0E",
       "secondaryText": "#494949",
       "tertararyText": "#9A9A9A",
+      "feedText": "#333436",
       "primaryBackground": "#F5F7FF",
       "secondaryBackground": "#FFFFFF",
       "tertararyBackground": "#FAFBFF",
@@ -38,16 +40,52 @@
     }
   },
   "textThemes": {
-    "headline1": { "fontSize": 28, "fontWeight": 700 },
-    "inputFieldText": { "fontSize": 25, "fontWeight": 700 },
-    "title": { "fontSize": 17, "fontWeight": 500 },
-    "subtitle": { "fontSize": 15, "fontWeight": 600 },
-    "subtitle2": { "fontSize": 15, "fontWeight": 500 },
-    "body": { "fontSize": 13, "height": 1.38, "fontWeight": 600 },
-    "body2": { "fontSize": 13, "fontWeight": 400 },
-    "caption": { "fontSize": 12, "fontWeight": 500 },
-    "caption2": { "fontSize": 12, "fontWeight": 400 },
-    "caption3": { "fontSize": 11, "height": 1.63, "fontWeight": 400 }
+    "headline1": {
+      "fontSize": 28,
+      "fontWeight": 700
+    },
+    "headline2": {
+      "fontSize": 24,
+      "fontWeight": 700
+    },
+    "inputFieldText": {
+      "fontSize": 25,
+      "fontWeight": 700
+    },
+    "title": {
+      "fontSize": 17,
+      "fontWeight": 600
+    },
+    "subtitle": {
+      "fontSize": 15,
+      "fontWeight": 600
+    },
+    "subtitle2": {
+      "fontSize": 15,
+      "fontWeight": 500
+    },
+    "body": {
+      "fontSize": 13,
+      "height": 1.38,
+      "fontWeight": 600
+    },
+    "body2": {
+      "fontSize": 13,
+      "fontWeight": 400
+    },
+    "caption": {
+      "fontSize": 12,
+      "fontWeight": 500
+    },
+    "caption2": {
+      "fontSize": 12,
+      "fontWeight": 400
+    },
+    "caption3": {
+      "fontSize": 11,
+      "height": 1.63,
+      "fontWeight": 400
+    }
   },
   "appBar": {
     "toolbarHeight": 50
@@ -79,5 +117,6 @@
   "icon": {
     "width": 24,
     "height": 24
-  }
+  },
+  "screenSideOffset": 16.0
 }