Updated ImageGallery, improved test widgets, fixed external url redirects

Author: GreyLabsDev

assets/img/img_gallery_1.jpg

@@ -4,6 +4,7 @@ import 'package:threeactions_area/resources/Resources.dart';
 import 'package:threeactions_area/widgets/base/TextContent.dart';
 import 'package:threeactions_area/widgets/base/TextSubtitle.dart';
 import 'package:threeactions_area/widgets/base/TextTitle.dart';
+import 'package:url_launcher/url_launcher_string.dart';
 
 import '../widgets/base/ImageGallery.dart';
 import '../widgets/base/MainPageInfoButton.dart';
@@ -173,27 +174,33 @@ class TestPageState extends State {
       accentFilterColor: AppColors.ContentLightYellow,
       content: ImageGallery(
         accentFilterColor: AppColors.ContentLightYellow,
+        onClickedAction: _handleRedirect,
         imagesResList: [
         ImageModel(
-            resourcePath: "assets/img/button_bg_bio.png",
-            title: "Cube 1",
-            description: "Description 1"),
+            resourcePath: "assets/img/img_gallery_1.jpg",
+            title: "Do you really want it?",
+            description: "Part of my favorite songs",
+            goToUrl: "https://www.artstation.com/artwork/G8NeGQ"),
         ImageModel(
-            resourcePath: "assets/img/button_bg_skills.png",
-            title: "Cube 2",
-            description: "Description 2"),
+            resourcePath: "assets/img/img_gallery_2.jpg",
+            title: "Feel nothing",
+            description: "Bad thoughts and this is its representation",
+            goToUrl: "https://www.artstation.com/artwork/NG60w5"),
         ImageModel(
-            resourcePath: "assets/img/button_bg_contacts.png",
-            title: "Cube 3",
-            description: "Description 3"),
+            resourcePath: "assets/img/img_gallery_3.jpg",
+            title: "Cube in cave",
+            description: "Experiment with volumetric lights",
+            goToUrl: "https://www.artstation.com/artwork/KOWeoo"),
         ImageModel(
-            resourcePath: "assets/img/button_bg_art.png",
-            title: "Cube 4",
-            description: "Description 4"),
+            resourcePath: "assets/img/img_gallery_4.jpg",
+            title: "Zero comfort zone",
+            description: "My first try with photoreal materials and light",
+            goToUrl: "https://www.artstation.com/artwork/yJVD5x"),
         ImageModel(
-            resourcePath: "assets/img/button_bg_bio.png",
-            title: "Cube 5",
-            description: "Description 5"),
+            resourcePath: "assets/img/img_gallery_5.jpg",
+            title: "Art for my track",
+            description: "Unusual environment with my music logo",
+            goToUrl: "https://www.artstation.com/artwork/r9VJ1J"),
       ]),
     );
   }
@@ -259,4 +266,12 @@ class TestPageState extends State {
       ),
     );
   }
+
+  void _handleRedirect(String? redirectUrl) async {
+    if (redirectUrl == null) return;
+
+    if (await canLaunchUrlString(redirectUrl)) {
+      await launchUrlString(redirectUrl);
+    }
+  }
 }

assets/img/img_gallery_2.jpg

@@ -6,6 +6,8 @@ class AppColors {
   static const ContentLightYellow = Color(0xffFFFFB5);
   static const ContentLightBlue = Color(0xff6BC5E3);
   static const ContentLightRed = Color(0xffE6A8A1);
+
+  static const BgBlack45 = Color(0xA6000000);
 }
 class TextStylesContent {
 

assets/img/img_gallery_3.jpg

@@ -1,31 +1,49 @@
+import 'dart:developer';
+
 import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
 import 'package:threeactions_area/resources/Resources.dart';
+import 'package:threeactions_area/widgets/base/TextContent.dart';
 import 'package:threeactions_area/widgets/base/TextTitle.dart';
 import 'package:threeactions_area/widgets/base/TextTitleBig.dart';
 
 class ImageModel {
   String resourcePath;
   String title;
   String description;
+  String? goToUrl = null;
 
-  ImageModel({required this.resourcePath, required this.title, required this.description});
+  ImageModel(
+      {required this.resourcePath,
+      required this.title,
+      required this.description,
+      this.goToUrl = null});
 }
 
 class ImageGallery extends StatefulWidget {
   final List<ImageModel> imagesResList;
+  final Function(String?) onClickedAction;
   Color accentFilterColor = AppColors.ContentWhite;
 
-  ImageGallery({super.key, required this.imagesResList, this.accentFilterColor = AppColors.ContentWhite});
+  ImageGallery({
+    super.key,
+    required this.imagesResList,
+    required this.onClickedAction,
+    this.accentFilterColor = AppColors.ContentWhite,
+  });
 
   @override
   State<StatefulWidget> createState() {
-    return SimpleGalleryState(imagesResList: imagesResList, accentFilterColor: accentFilterColor);
+    return SimpleGalleryState(
+        imagesResList: imagesResList,
+        accentFilterColor: accentFilterColor,
+        onClickedAction: onClickedAction);
   }
 }
 
 class SimpleGalleryState extends State with TickerProviderStateMixin {
   final List<ImageModel> imagesResList;
+  final Function(String?) onClickedAction;
   final accentFilterColor;
 
   var widthsList = [];
@@ -36,15 +54,21 @@ class SimpleGalleryState extends State with TickerProviderStateMixin {
   List<AnimationController> controllers = [];
   List<Animation> opacityAcnimations = [];
 
-  SimpleGalleryState({required this.imagesResList, this.accentFilterColor});
+  SimpleGalleryState(
+      {required this.imagesResList,
+      this.accentFilterColor,
+      required this.onClickedAction});
 
   @override
   void initState() {
     super.initState();
 
     for (final (index, item) in imagesResList.indexed) {
       controllers.add(
-        AnimationController(vsync: this, duration: Duration(milliseconds: 300), animationBehavior: AnimationBehavior.normal)
+        AnimationController(
+            vsync: this,
+            duration: Duration(milliseconds: 300),
+            animationBehavior: AnimationBehavior.normal)
           ..addListener(() {
             setState(() {});
           }),
@@ -57,8 +81,7 @@ class SimpleGalleryState extends State with TickerProviderStateMixin {
   List<Widget> _buildImageWidgets(BoxConstraints constraints) {
     List<Widget> widgets = [];
     imagesResList.forEachIndexed((index, element) {
-      widgets.add(
-        InkWell(
+      widgets.add(InkWell(
         onTap: () {},
         onHover: (isHovered) {
           _updateWidthsAndOpacity(isHovered, index);
@@ -70,42 +93,66 @@ class SimpleGalleryState extends State with TickerProviderStateMixin {
               width: widthsList[index],
               curve: Curves.fastOutSlowIn,
               duration: Durations.long1,
-              child: Stack(
-                fit: StackFit.expand,
-                children: [
-                  Image.asset(
-                    imagesResList[index].resourcePath,
-                    fit: BoxFit.cover,
-                    height: constraints.maxHeight, //48 - external padding
-                  ),
-                  Opacity(
-                    opacity: opacityAcnimations[index].value,
-                    child: Align(
-                      alignment: Alignment.bottomCenter,
-                      child: Column(
-                        mainAxisAlignment: MainAxisAlignment.center,
-                        crossAxisAlignment: CrossAxisAlignment.center,
-                        children: [
-                          Spacer(),
-                          TextTitleBig(text: imagesResList[index].title, textColor: accentFilterColor,),
-                          TextTitle(text: imagesResList[index].description, textColor: accentFilterColor,),
-                          SizedBox(
-                            height: 32.0,
-                          )
-                        ],
-                      ),
+              child: InkWell(
+                onTap: () {
+                  log("CLICK - url = ${imagesResList[index].goToUrl}");
+                  onClickedAction(imagesResList[index].goToUrl);
+                },
+                child: Stack(
+                  fit: StackFit.expand,
+                  children: [
+                    Image.asset(
+                      imagesResList[index].resourcePath,
+                      fit: BoxFit.cover,
+                      height: constraints.maxHeight, //48 - external padding
                     ),
-                  )
-                ],
+                    Opacity(
+                      opacity: opacityAcnimations[index].value,
+                      child: Align(
+                        alignment: Alignment.bottomCenter,
+                        child: Column(
+                          mainAxisAlignment: MainAxisAlignment.center,
+                          crossAxisAlignment: CrossAxisAlignment.center,
+                          children: [
+                            Spacer(),
+                            Container(
+                              color: AppColors.BgBlack45,
+                              child: Column(
+                                mainAxisAlignment: MainAxisAlignment.center,
+                                crossAxisAlignment: CrossAxisAlignment.stretch,
+                                children: [
+                                  SizedBox(
+                                    height: 16.0,
+                                  ),
+                                  TextTitle(
+                                    text: imagesResList[index].title,
+                                    textColor: accentFilterColor,
+                                    textAlign: TextAlign.center,
+                                  ),
+                                  TextContent(
+                                    text: imagesResList[index].description,
+                                    textColor: accentFilterColor,
+                                    textAlign: TextAlign.center,
+                                  ),
+                                  SizedBox(
+                                    height: 32.0,
+                                  )
+                                ],
+                              ),
+                            )
+                          ],
+                        ),
+                      ),
+                    )
+                  ],
+                ),
               ),
             ),
           ],
         ),
-      )
-      );
+      ));
     });
 
-
     return widgets;
   }
 
@@ -151,8 +198,6 @@ class SimpleGalleryState extends State with TickerProviderStateMixin {
         hoveredIndex = -1;
         widthsList = imagesResList.map((e) => baseWidth).toList();
       }
-      // print("HOVER $hoveredIndex");
-      // print("WIDTHS $widthsList");
     });
   }
 }

assets/img/img_gallery_4.jpg

@@ -34,7 +34,7 @@ class SocialButton extends StatelessWidget {
 
   void _handleRedirect(String redirectUrl) async {
     if (await canLaunchUrlString(redirectUrl)) {
-      await canLaunchUrlString(redirectUrl);
+      await launchUrlString(redirectUrl);
     }
   }
 }

assets/img/img_gallery_5.jpg

@@ -6,16 +6,19 @@ import '../../resources/Resources.dart';
 class TextContent extends StatelessWidget {
   final String text;
   Color textColor = AppColors.ContentWhite;
+  TextAlign textAlign = TextAlign.start;
 
-  TextContent({this.text = "", this.textColor = AppColors.ContentWhite});
+  TextContent(
+      {this.text = "",
+      this.textColor = AppColors.ContentWhite,
+      this.textAlign = TextAlign.start});
 
   @override
   Widget build(BuildContext context) {
-    return (
-      Text(text, style: TextStylesContent.Content.copyWith(
-        color: textColor
-      ))
-    );
+    return (Text(
+      text,
+      style: TextStylesContent.Content.copyWith(color: textColor),
+      textAlign: textAlign,
+    ));
   }
-
-}
+}