feat: post image widget (#11)

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/article_header/article_header.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';
+import 'package:ice/app/shared/widgets/screen_side_offset/screen_side_offset.dart';
+
+class ArticleHeader extends StatelessWidget {
+  const ArticleHeader({
+    super.key,
+    required this.headerText,
+    this.isMainHeader = false,
+  });
+
+  final String headerText;
+  final bool isMainHeader;
+
+  TextStyle getStyle(BuildContext context) {
+    final Color color = context.theme.appColors.sharkText;
+    if (isMainHeader) {
+      return context.theme.appTextThemes.headline2.copyWith(color: color);
+    }
+    return context.theme.appTextThemes.title.copyWith(color: color);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ScreenSideOffset.small(
+      child: Text(
+        headerText,
+        style: getStyle(context),
+      ),
+    );
+  }
+}

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

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

lib/app/features/feed/widgets/post_image/post_image.dart

@@ -0,0 +1,81 @@
+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/features/feed/widgets/read_time_tile/read_time_tile.dart';
+import 'package:ice/app/shared/widgets/screen_side_offset/screen_side_offset.dart';
+import 'package:ice/utils/Image_utils.dart';
+
+double borderRadius = 12.0.w;
+
+class PostImage extends StatelessWidget {
+  const PostImage({
+    super.key,
+    required this.imageUrl,
+    this.minutesToRead,
+    this.minutesToReadAlignment,
+  });
+
+  final String imageUrl;
+  final int? minutesToRead;
+  final Alignment? minutesToReadAlignment;
+
+  BorderRadius getOverlayBorderRadius(Alignment alignment) {
+    if (alignment == Alignment.bottomRight || alignment == Alignment.topLeft) {
+      return BorderRadius.only(
+        topLeft: Radius.circular(borderRadius),
+        bottomRight: Radius.circular(borderRadius),
+      );
+    }
+    if (alignment == Alignment.topRight || alignment == Alignment.bottomLeft) {
+      return BorderRadius.only(
+        topRight: Radius.circular(borderRadius),
+        bottomLeft: Radius.circular(borderRadius),
+      );
+    }
+    return BorderRadius.all(Radius.circular(borderRadius));
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final double paddingHorizontal = ScreenSideOffset.defaultSmallMargin;
+    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: ImageUtils.getAdaptiveImageUrl(imageUrl, imageWidth),
+              width: imageWidth,
+              fit: BoxFit.cover,
+            ),
+            if (minutesToRead != null) ...<Widget>[
+              Container(
+                padding:
+                    EdgeInsets.symmetric(horizontal: 8.0.w, vertical: 4.0.w),
+                decoration: BoxDecoration(
+                  color: context.theme.appColors.tertararyBackground,
+                  border: Border.all(
+                    color: context.theme.appColors.onTerararyFill,
+                  ),
+                  borderRadius: getOverlayBorderRadius(alignment),
+                ),
+                child: ReadTimeTile(
+                  minutesToRead: minutesToRead!,
+                ),
+              ),
+            ],
+          ],
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+import 'package:ice/app/features/feed/widgets/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/features/feed/widgets/read_time_tile/read_time_tile.dart

@@ -0,0 +1,32 @@
+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';
+
+double iconSize = 16.0.w;
+
+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.sharkText,
+        ),
+        SizedBox(width: 3.0.w),
+        Text(
+          context.i18n.read_time_in_mins(minutesToRead),
+          style: context.theme.appTextThemes.caption
+              .copyWith(color: context.theme.appColors.sharkText),
+        ),
+      ],
+    );
+  }
+}

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

@@ -0,0 +1,23 @@
+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/features/feed/widgets/read_time_tile/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,
+    child: ReadTimeTile(
+      minutesToRead: context.knobs.int.slider(
+        label: 'Minutes To Read',
+        initialValue: 7,
+        max: 120,
+      ),
+    ),
+  );
+}

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

@@ -1,9 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
 
-double defaultLargeMargin = 44.0.w;
-double defaultSmallMargin = 16.0.w;
-
 class ScreenSideOffset extends StatelessWidget {
   const ScreenSideOffset._({
     super.key,
@@ -38,6 +35,11 @@ class ScreenSideOffset extends StatelessWidget {
       child: child,
     );
   }
+
+  static double get defaultSmallMargin => 16.0.w;
+
+  static double get defaultLargeMargin => 44.0.w;
+
   final Widget child;
   final EdgeInsets insets;
 

lib/app/shared/widgets/socials/socials.dart

@@ -53,8 +53,10 @@ class _SocialsState extends State<Socials> {
     final double buttonWidth = context.theme.iconButtonTheme.style?.iconSize
             ?.resolve(<MaterialState>{}) ??
         defaultSocialIconButtonSide;
-    final double spaceBetweenButtons =
-        (screenWidth - 2 * defaultLargeMargin - 4 * buttonWidth) / 3;
+    final double spaceBetweenButtons = (screenWidth -
+            2 * ScreenSideOffset.defaultLargeMargin -
+            4 * buttonWidth) /
+        3;
 
     return Column(
       children: <Widget>[

lib/app/templates/basic.json

@@ -5,6 +5,7 @@
       "primaryText": "#0E0E0E",
       "secondaryText": "#494949",
       "tertararyText": "#9A9A9A",
+      "sharkText": "#333436",
       "primaryBackground": "#F5F7FF",
       "secondaryBackground": "#FFFFFF",
       "tertararyBackground": "#FAFBFF",
@@ -23,6 +24,7 @@
       "primaryText": "#0E0E0E",
       "secondaryText": "#494949",
       "tertararyText": "#9A9A9A",
+      "sharkText": "#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

lib/app/templates/template.dart

@@ -12,6 +12,7 @@ class TemplateColors {
     this.primaryText,
     this.secondaryText,
     this.tertararyText,
+    this.sharkText,
     this.primaryBackground,
     this.secondaryBackground,
     this.tertararyBackground,
@@ -38,6 +39,8 @@ class TemplateColors {
   @ColorConverter()
   Color tertararyText;
   @ColorConverter()
+  Color sharkText;
+  @ColorConverter()
   Color primaryBackground;
   @ColorConverter()
   Color secondaryBackground;
@@ -101,6 +104,7 @@ class TemplateTextTheme {
 class TemplateTextThemes {
   TemplateTextThemes(
     this.headline1,
+    this.headline2,
     this.inputFieldText,
     this.title,
     this.subtitle,
@@ -116,6 +120,7 @@ class TemplateTextThemes {
       _$TemplateTextThemesFromJson(json);
 
   TemplateTextTheme headline1;
+  TemplateTextTheme headline2;
   TemplateTextTheme inputFieldText;
   TemplateTextTheme title;
   TemplateTextTheme subtitle;