Added custom colors for text widgets, updated skills page color schem…

…e, added accent color for pages
GreyLabsDev · Aug 17, 2024 · c72aded · c72aded
1 parent 56efb08
commit c72aded
Show file tree

Hide file tree

Showing 11 changed files with 155 additions and 58 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+    // Используйте IntelliSense, чтобы узнать о возможных атрибутах.
+    // Наведите указатель мыши, чтобы просмотреть описания существующих атрибутов.
+    // Для получения дополнительной информации посетите: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Запустить Chrome на localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
diff --git a/lib/pages/TestPage.dart b/lib/pages/TestPage.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:threeactions_area/pages/UiTestPage.dart';
+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';
@@ -126,20 +127,14 @@ class TestPageState extends State {
       title: "SKLS",
       mainImageAsset: "assets/img/button_bg_skills.png",
       logoImageAsset: "assets/img/logo_skills_big.png",
-      content: Column(
-        children: [
-          Align(
-            alignment: Alignment.bottomLeft,
-            child: TextSubtitle(
-              text: "Hard & Soft",
-            ),
-          ),
-          SizedBox(height: 32.0),
-          Row(
-            mainAxisAlignment: MainAxisAlignment.center,
+      subtitle: "Hard & Soft",
+      accentFilterColor: AppColors.ContentDarkBlue,
+      content: Row(
+            mainAxisAlignment: MainAxisAlignment.start,
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
               WorkExpTimeline(),
+              Spacer(),
               SkillsColumn([
                 SkillItem("Main", ["Android", "Kotlin", "Java", "Flutter"]),
                 SkillItem("UI", ["Jetpack Compose", "XML"]),
@@ -151,9 +146,7 @@ class TestPageState extends State {
                 SkillItem("Async", ["RxJava 2", "Kotlin Coroutines", "Hilt"]),
               ])
             ],
-          )
-        ],
-      ),
+          ),
     );
   }
 
@@ -162,8 +155,10 @@ class TestPageState extends State {
       title: "BIO",
       mainImageAsset: "assets/img/button_bg_bio.png",
       logoImageAsset: "assets/img/logo_bio_big.png",
+      accentFilterColor: AppColors.ContentLightBlue,
+      subtitle: "On Earth since 1994",
       content: TextSubtitle(
-        text: "On Earth since 1994",
+        text: "Content",
       ),
     );
   }
@@ -175,7 +170,10 @@ class TestPageState extends State {
       logoImageAsset: "assets/img/logo_art_big.png",
       isScrollable: false,
       isPaddingEnabled: false,
-      content: ImageGallery(imagesResList: [
+      accentFilterColor: AppColors.ContentLightYellow,
+      content: ImageGallery(
+        accentFilterColor: AppColors.ContentLightYellow,
+        imagesResList: [
         ImageModel(
             resourcePath: "assets/img/button_bg_bio.png",
             title: "Cube 1",
@@ -205,13 +203,12 @@ class TestPageState extends State {
       title: "CNCT",
       mainImageAsset: "assets/img/button_bg_contacts.png",
       logoImageAsset: "assets/img/logo_contacts_big.png",
+      accentFilterColor: AppColors.ContentLightRed,
+      subtitle: "Here you can find me",
       content: Column(
         mainAxisAlignment: MainAxisAlignment.start,
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          TextContent(
-            text: "Here you can find me",
-          ),
           SizedBox(
             height: 8.0,
           ),

diff --git a/lib/pages/UiTestPage.dart b/lib/pages/UiTestPage.dart
@@ -3,6 +3,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 'package:threeactions_area/widgets/base/TextContent.dart';
 import 'package:threeactions_area/widgets/base/TextContentMin.dart';
 import 'package:threeactions_area/widgets/base/TextSubtitle.dart';
@@ -82,7 +83,7 @@ class SkillsBlock extends StatelessWidget {
         mainAxisAlignment: MainAxisAlignment.start,
         crossAxisAlignment: CrossAxisAlignment.end,
         children: [
-          TextSubtitle(text: item.name),
+          TextSubtitle(text: item.name, textColor: AppColors.ContentDarkBlue,),
           Wrap(
             spacing: 4.0,
             children: _buildWrapContent(item.skillsList),
@@ -97,7 +98,7 @@ class SkillsBlock extends StatelessWidget {
         .map((item) => Container(
               padding: EdgeInsets.all(4.0),
               color: Colors.blueGrey,
-              child: TextContent(text: item),
+              child: TextContent(text: item, textColor: Colors.black),
             ))
         .toList();
   }
@@ -113,7 +114,8 @@ class WorkExpTimeline extends StatelessWidget {
           Container(
             width: 16.0,
             height: 2.0,
-            color: Colors.white,
+            // color: Colors.white,
+            color: Color(0xff6EA1A9),
           ),
           SizedBox(
             width: 8.0,
@@ -122,9 +124,9 @@ class WorkExpTimeline extends StatelessWidget {
             mainAxisAlignment: MainAxisAlignment.start,
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
-              TextSubtitle(text: date),
-              TextContent(text: companyInfo),
-              TextContentMin(text: description)
+              TextSubtitle(text: date, textColor: AppColors.ContentDarkBlue,),
+              TextContent(text: companyInfo, textColor: AppColors.ContentDarkBlue),
+              TextContentMin(text: description, textColor: AppColors.ContentDarkBlue)
             ],
           )
         ],
@@ -141,7 +143,8 @@ class WorkExpTimeline extends StatelessWidget {
         children: [
           Container(
             width: 2.0,
-            color: Colors.white,
+            // color: Colors.white,
+            color: Color(0xff6EA1A9),
           ),
           Column(
             mainAxisAlignment: MainAxisAlignment.start,

diff --git a/lib/pages/base/BaseInfoPage.dart b/lib/pages/base/BaseInfoPage.dart
@@ -1,22 +1,30 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+import 'package:threeactions_area/resources/Resources.dart';
 import 'package:threeactions_area/widgets/base/TextTitleBig.dart';
 
+import '../../widgets/base/TextSubtitle.dart';
+
 class BaseInfoPage extends StatelessWidget {
   final String title;
   final String mainImageAsset;
   final String logoImageAsset;
   final Widget content;
   bool isScrollable;
   bool isPaddingEnabled;
+  String? subtitle;
+  Color? accentFilterColor;
 
   BaseInfoPage(
       {super.key,
       required this.title,
       required this.mainImageAsset,
       required this.logoImageAsset,
-      required this.content, 
+      required this.content,
       this.isScrollable = true,
-      this.isPaddingEnabled = true});
+      this.isPaddingEnabled = true,
+      this.subtitle,
+      this.accentFilterColor});
 
   @override
   Widget build(BuildContext context) {
@@ -28,7 +36,8 @@ class BaseInfoPage extends StatelessWidget {
         children: [
           Container(
             width: 380.0,
-            padding: EdgeInsets.only(left: 32.0, top: 32.0, right: 32.0, bottom: 96.0),
+            padding: EdgeInsets.only(
+                left: 32.0, top: 32.0, right: 32.0, bottom: 96.0),
             decoration: BoxDecoration(
                 image: DecorationImage(
               image: AssetImage(mainImageAsset),
@@ -38,34 +47,66 @@ class BaseInfoPage extends StatelessWidget {
               children: [
                 Align(
                   alignment: Alignment.center,
-                  child: Image.asset(logoImageAsset),
+                  child: accentFilterColor != null ? ColorFiltered(
+                    colorFilter: ColorFilter.mode(accentFilterColor!, BlendMode.srcATop),
+                    child: Image.asset(logoImageAsset),
+                  ) :  Image.asset(logoImageAsset)
                 ),
                 Align(
                   alignment: Alignment.bottomCenter,
                   child: TextTitleBig(
                     text: title,
+                    textColor: accentFilterColor ?? AppColors.ContentWhite,
                   ),
                 )
               ],
             ),
           ),
           Expanded(
             child: Container(
-              alignment: Alignment.topLeft,
-              child: _buildContentContainer(content)
-            ),
+                alignment: Alignment.topLeft,
+                child: _buildMainContent(content)),
           )
         ],
       ),
     );
   }
 
+  Widget _buildMainContent(Widget content) {
+    if (subtitle != null) {
+      return Column(
+        mainAxisAlignment: MainAxisAlignment.start,
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: [
+          Align(
+            alignment: Alignment.bottomLeft,
+            child: isPaddingEnabled
+                ? Padding(
+                    padding: EdgeInsets.only(left: 32.0, top: 32.0),
+                    child: TextSubtitle(
+                      text: subtitle!,
+                      textColor: accentFilterColor ?? AppColors.ContentWhite,
+                    ),
+                  )
+                : TextSubtitle(
+                    text: subtitle!,
+                    textColor: accentFilterColor ?? AppColors.ContentWhite,
+                  ),
+          ),
+          // SizedBox(height: 32.0),
+          Flexible(child: _buildContentContainer(content))
+        ],
+      );
+    } else {
+      return _buildContentContainer(content);
+    }
+  }
+
   Widget _buildContentContainer(Widget content) {
     if (isScrollable) {
       return SingleChildScrollView(
-                scrollDirection: Axis.vertical,
-                child: _buildContentByPadding(content)
-              );
+          scrollDirection: Axis.vertical,
+          child: _buildContentByPadding(content));
     } else {
       return _buildContentByPadding(content);
     }
@@ -74,9 +115,9 @@ class BaseInfoPage extends StatelessWidget {
   Widget _buildContentByPadding(Widget content) {
     if (isPaddingEnabled) {
       return Padding(
-                  padding: EdgeInsets.all(32.0),
-                  child: content,
-                );
+        padding: EdgeInsets.all(32.0),
+        child: content,
+      );
     } else {
       return content;
     }

diff --git a/lib/resources/Resources.dart b/lib/resources/Resources.dart
@@ -1,21 +1,43 @@
 import 'package:flutter/material.dart';
 
+class AppColors {
+  static const ContentWhite = Color(0xffffffff);
+  static const ContentDarkBlue = Color(0xff6EA1A9);
+  static const ContentLightYellow = Color(0xffFFFFB5);
+  static const ContentLightBlue = Color(0xff6BC5E3);
+  static const ContentLightRed = Color(0xffE6A8A1);
+}
 class TextStylesContent {
 
   static const ContentMin = TextStyle(
       color: Color(0xffffffff),
+      // color: Color(0xff6EA1A9),
       fontSize: 16.0,
       fontFamily: 'LackRegular',
       letterSpacing: 1.0);
 
   static const Content = TextStyle(
       color: Color(0xffffffff),
+      // color: Color(0xff6EA1A9),
+      fontSize: 18.0,
+      fontFamily: 'LackRegular',
+      letterSpacing: 1.0);
+
+  static const ContentMain = TextStyle(
+      color: Color(0xffffffff),
+      fontSize: 18.0,
+      fontFamily: 'LackRegular',
+      letterSpacing: 1.0);
+
+static const ContentBlck = TextStyle(
+      color: Colors.black,
       fontSize: 18.0,
       fontFamily: 'LackRegular',
       letterSpacing: 1.0);
 
   static const Subtitle = TextStyle(
       color: Color(0xffffffff),
+      // color: Color(0xff6EA1A9),
       fontSize: 26.0,
       fontFamily: 'LackRegular',
       letterSpacing: 1.0);
@@ -28,6 +50,7 @@ class TextStylesContent {
 
   static const TitleBig = TextStyle(
       color: Color(0xffffffff),
+      // color: Color(0xff6EA1A9),
       fontSize: 42.0,
       fontFamily: 'LackRegular',
       letterSpacing: 1.0);

diff --git a/lib/widgets/base/ImageGallery.dart b/lib/widgets/base/ImageGallery.dart
@@ -1,5 +1,6 @@
 import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
+import 'package:threeactions_area/resources/Resources.dart';
 import 'package:threeactions_area/widgets/base/TextTitle.dart';
 import 'package:threeactions_area/widgets/base/TextTitleBig.dart';
 
@@ -13,17 +14,19 @@ class ImageModel {
 
 class ImageGallery extends StatefulWidget {
   final List<ImageModel> imagesResList;
+  Color accentFilterColor = AppColors.ContentWhite;
 
-  const ImageGallery({super.key, required this.imagesResList});
+  ImageGallery({super.key, required this.imagesResList, this.accentFilterColor = AppColors.ContentWhite});
 
   @override
   State<StatefulWidget> createState() {
-    return SimpleGalleryState(imagesResList: imagesResList);
+    return SimpleGalleryState(imagesResList: imagesResList, accentFilterColor: accentFilterColor);
   }
 }
 
 class SimpleGalleryState extends State with TickerProviderStateMixin {
   final List<ImageModel> imagesResList;
+  final accentFilterColor;
 
   var widthsList = [];
   var hoveredIndex = -1;
@@ -33,7 +36,7 @@ class SimpleGalleryState extends State with TickerProviderStateMixin {
   List<AnimationController> controllers = [];
   List<Animation> opacityAcnimations = [];
 
-  SimpleGalleryState({required this.imagesResList});
+  SimpleGalleryState({required this.imagesResList, this.accentFilterColor});
 
   @override
   void initState() {
@@ -84,8 +87,8 @@ class SimpleGalleryState extends State with TickerProviderStateMixin {
                         crossAxisAlignment: CrossAxisAlignment.center,
                         children: [
                           Spacer(),
-                          TextTitleBig(text: imagesResList[index].title),
-                          TextTitle(text: imagesResList[index].description),
+                          TextTitleBig(text: imagesResList[index].title, textColor: accentFilterColor,),
+                          TextTitle(text: imagesResList[index].description, textColor: accentFilterColor,),
                           SizedBox(
                             height: 32.0,
                           )