WIP Bio/about info content with adaptive layout

Author: GreyLabsDev

lib/pages/UiTestPage.dart

@@ -2,9 +2,7 @@ import 'dart:core';
 
 import 'package:flutter/material.dart';
 import 'package:threeactions_area/pages/base/BaseInfoPage.dart';
-import 'package:threeactions_area/resources/Resources.dart';
-
-import '../widgets/cv_elements/EventsBlock.dart';
+import '../widgets/bio_elements/BioInfoContent.dart';
 
 class UiTestpage extends StatefulWidget {
   @override
@@ -20,9 +18,15 @@ class UiTestPageState extends State {
         title: "UiTestPage",
         mainImageAsset: "assets/img/button_bg_skills.png",
         logoImageAsset: "assets/img/logo_skills_big.png",
-        content: EventsBlock(titleColor: AppColors.ContentDarkBlue,));
+        content: BioInfoContent(
+          data: [
+            BioInfoModel("assets/img/img_gallery_2.jpg", "title", "description"),
+            BioInfoModel("assets/img/img_gallery_2.jpg", "title", "description"),
+            BioInfoModel("assets/img/img_gallery_2.jpg", "title", "description"),
+            BioInfoModel("assets/img/img_gallery_2.jpg", "title", "description"),
+            BioInfoModel("assets/img/img_gallery_2.jpg", "title", "description"),
+          ],
+        )
+        );
   }
-}
-
-
-
+}

lib/widgets/bio_elements/BioInfoContent.dart

@@ -0,0 +1,70 @@
+import 'package:collection/collection.dart';
+import 'package:flutter/widgets.dart';
+
+import '../base/TextContentBig.dart';
+import '../base/TextSubtitle.dart';
+
+class BioInfoModel {
+  String resourcePath;
+  String title;
+  String description;
+
+  BioInfoModel(this.resourcePath, this.title, this.description);
+}
+
+class BioInfoContent extends StatelessWidget {
+  final List<BioInfoModel> data;
+
+  const BioInfoContent({super.key, required this.data});
+
+  @override
+  Widget build(BuildContext context) {
+    return Wrap(
+        children: data.mapIndexed((int index, BioInfoModel item) {
+      bool isFullScreenWidth = (index + 1) % 3 == 0;
+      return BioInfoCard(isFullWidth: isFullScreenWidth, model: item);
+    }).toList());
+  }
+}
+
+class BioInfoCard extends StatelessWidget {
+  bool isFullWidth = false;
+  BioInfoModel model;
+
+  BioInfoCard({super.key, this.isFullWidth = false, required this.model});
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+        builder: (BuildContext context, BoxConstraints constraints) {
+      bool enableVerticalScreenMode = constraints.maxWidth <= 600;
+
+      double? containerWidth;
+
+      if (enableVerticalScreenMode || isFullWidth) {
+        containerWidth = constraints.maxWidth;
+      } else {
+        containerWidth = constraints.maxWidth / 2;
+      }
+
+      return Container(
+        width: containerWidth,
+        height: 320.0,
+        padding: EdgeInsets.all(4.0),
+        child: Container(
+          decoration: BoxDecoration(
+            image: DecorationImage(
+                image: AssetImage(model.resourcePath), fit: BoxFit.fitWidth)),
+                child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: [
+            TextSubtitle(text: model.title),
+            TextContentBig(text: model.description)
+          ],
+        ),
+        )
+      );
+    });
+  }
+}