Skip to content

Commit 77d0bf8

Browse files
GreyLabsDevGreyLabsDev
committed
WIP BaseInfoMage adaptive UI
1 parent 27ee9b2 commit 77d0bf8

File tree

6 files changed

+148
-84
lines changed

6 files changed

+148
-84
lines changed

‎assets/img/img_bio_hobby.jpg‎

282 KB
Loading

‎assets/img/img_bio_sport.jpg‎

607 KB
Loading

‎lib/pages/TestPage.dart‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import '../widgets/base/ImageGallery.dart';
99
import '../widgets/base/MainPageInfoButton.dart';
1010
import '../widgets/base/SkillsColumn.dart';
1111
import '../widgets/base/SocialButton.dart';
12+
import '../widgets/bio_elements/BioInfoContent.dart';
1213
import '../widgets/cv_elements/WorkExpTimeline.dart';
1314
import 'base/BaseInfoPage.dart';
1415

@@ -172,9 +173,16 @@ class TestPageState extends State {
172173
logoImageAsset: "assets/img/logo_bio_big.png",
173174
accentFilterColor: AppColors.ContentLightBlue,
174175
subtitle: "On Earth since 1994",
175-
content: TextSubtitle(
176-
text: "Content",
177-
),
176+
content: BioInfoContent(
177+
accentFilterColor: AppColors.ContentLightBlue,
178+
data: [
179+
BioInfoModel("assets/img/img_bio_sport.jpg", "Bachelor's degree", "Information security, sofware/hardware system integration"),
180+
BioInfoModel("assets/img/img_bio_hobby.jpg", "Master's degree", "Software engineering, app architecture, distributed apps"),
181+
BioInfoModel("assets/img/img_bio_sport.jpg", "Sport", "Swimming, long walks, airsoft trainings and local games with friends"),
182+
BioInfoModel("assets/img/img_bio_hobby.jpg", "Hobby", "Music production, 3D Art, Pet projects, gaming"),
183+
BioInfoModel("assets/img/img_bio_sport.jpg", "Last read book", "Blood, Sweat, and Pixels"),
184+
],
185+
),
178186
);
179187
}
180188

‎lib/pages/base/BaseInfoPage.dart‎

Lines changed: 121 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -26,60 +26,61 @@ class BaseInfoPage extends StatelessWidget {
2626

2727
@override
2828
Widget build(BuildContext context) {
29-
// TODO Adaptive feature - remove left-right side bg,
29+
// TODO Adaptive feature - remove left-right side bg,
3030
// and set this image as vertical fullscreen bg with
3131
// geometric logo on top (like in mobile version from Figma)
3232
// but with more dimmed brightness
3333

3434
return Scaffold(
3535
backgroundColor: Colors.black,
36-
body: Row(
37-
mainAxisAlignment: MainAxisAlignment.spaceBetween,
38-
crossAxisAlignment: CrossAxisAlignment.center,
39-
children: [
40-
Container(
41-
width: 256.0,
42-
padding: EdgeInsets.only(
43-
left: 32.0, top: 32.0, right: 32.0, bottom: 96.0),
44-
decoration: BoxDecoration(
45-
image: DecorationImage(
46-
image: AssetImage(mainImageAsset),
36+
body: _buildAdaptiveBody(title, mainImageAsset, logoImageAsset, content,
37+
isScrollable, isPaddingEnabled, subtitle, accentFilterColor),
38+
);
39+
}
40+
41+
// // print("AHTUNG = ${constraints.maxWidth}"); 365 width triggering vertical layout
42+
43+
Widget _buildAdaptiveBody(
44+
String title,
45+
String mainImageAsset,
46+
String logoImageAsset,
47+
Widget content,
48+
bool isScrollable,
49+
bool isPaddingEnabled,
50+
String? subtitle,
51+
Color? accentFilterColorx) {
52+
return LayoutBuilder(
53+
builder: (BuildContext context, BoxConstraints constraints) {
54+
print("AHTUNG = ${constraints.maxWidth}");
55+
bool isNeedToSwitchVertical = constraints.maxWidth <= 940;
56+
57+
if (isNeedToSwitchVertical) {
58+
return Stack(
59+
children: [
60+
Image.asset(
61+
mainImageAsset,
62+
height: double.infinity,
63+
width: double.infinity,
64+
alignment: Alignment.center,
4765
fit: BoxFit.cover,
48-
)),
49-
child: Align(
50-
alignment: Alignment.center,
51-
child: accentFilterColor != null ? ColorFiltered(
52-
colorFilter: ColorFilter.mode(accentFilterColor!, BlendMode.srcATop),
53-
child: Image.asset(logoImageAsset),
54-
) : Image.asset(logoImageAsset)
55-
),
56-
// Stack(
57-
// children: [
58-
// Align(
59-
// alignment: Alignment.center,
60-
// child: accentFilterColor != null ? ColorFiltered(
61-
// colorFilter: ColorFilter.mode(accentFilterColor!, BlendMode.srcATop),
62-
// child: Image.asset(logoImageAsset),
63-
// ) : Image.asset(logoImageAsset)
64-
// ),
65-
// Align(
66-
// alignment: Alignment.bottomCenter,
67-
// child: TextTitleBig(
68-
// text: title,
69-
// textColor: accentFilterColor ?? AppColors.ContentWhite,
70-
// ),
71-
// )
72-
// ],
73-
// ),
74-
),
75-
Expanded(
76-
child: Container(
77-
alignment: Alignment.topLeft,
78-
child: _buildMainContent(content)),
79-
),
80-
Transform.flip(
81-
flipX: true,
82-
child: Container(
66+
color: Colors.black54,
67+
colorBlendMode: BlendMode.darken,
68+
),
69+
_buildMainContent(content)
70+
],
71+
// decoration: BoxDecoration(
72+
// image: DecorationImage(
73+
// image: AssetImage(mainImageAsset),
74+
// fit: BoxFit.cover,
75+
// )),
76+
// child: TextTitle(text: "VERTICAL"),
77+
);
78+
} else {
79+
return Row(
80+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
81+
crossAxisAlignment: CrossAxisAlignment.center,
82+
children: [
83+
Container(
8384
width: 256.0,
8485
padding: EdgeInsets.only(
8586
left: 32.0, top: 32.0, right: 32.0, bottom: 96.0),
@@ -90,33 +91,80 @@ class BaseInfoPage extends StatelessWidget {
9091
)),
9192
child: Align(
9293
alignment: Alignment.center,
93-
child: accentFilterColor != null ? ColorFiltered(
94-
colorFilter: ColorFilter.mode(accentFilterColor!, BlendMode.srcATop),
95-
child: Image.asset(logoImageAsset),
96-
) : Image.asset(logoImageAsset)
97-
)
98-
// Stack( children: [
99-
// Align(
100-
// alignment: Alignment.center,
101-
// child: accentFilterColor != null ? ColorFiltered(
102-
// colorFilter: ColorFilter.mode(accentFilterColor!, BlendMode.srcATop),
103-
// child: Image.asset(logoImageAsset),
104-
// ) : Image.asset(logoImageAsset)
105-
// ),
106-
// Align(
107-
// alignment: Alignment.bottomCenter,
108-
// child: TextTitleBig(
109-
// text: title,
110-
// textColor: accentFilterColor ?? AppColors.ContentWhite,
111-
// ),
112-
// )
113-
// ],
114-
// ),
94+
child: accentFilterColor != null
95+
? ColorFiltered(
96+
colorFilter: ColorFilter.mode(
97+
accentFilterColor!, BlendMode.srcATop),
98+
child: Image.asset(logoImageAsset),
99+
)
100+
: Image.asset(logoImageAsset)),
101+
// Stack(
102+
// children: [
103+
// Align(
104+
// alignment: Alignment.center,
105+
// child: accentFilterColor != null ? ColorFiltered(
106+
// colorFilter: ColorFilter.mode(accentFilterColor!, BlendMode.srcATop),
107+
// child: Image.asset(logoImageAsset),
108+
// ) : Image.asset(logoImageAsset)
109+
// ),
110+
// Align(
111+
// alignment: Alignment.bottomCenter,
112+
// child: TextTitleBig(
113+
// text: title,
114+
// textColor: accentFilterColor ?? AppColors.ContentWhite,
115+
// ),
116+
// )
117+
// ],
118+
// ),
115119
),
116-
),
117-
],
118-
),
119-
);
120+
Expanded(
121+
child: Container(
122+
alignment: Alignment.topLeft,
123+
child: _buildMainContent(content)),
124+
),
125+
Transform.flip(
126+
flipX: true,
127+
child: Container(
128+
width: 256.0,
129+
padding: EdgeInsets.only(
130+
left: 32.0, top: 32.0, right: 32.0, bottom: 96.0),
131+
decoration: BoxDecoration(
132+
image: DecorationImage(
133+
image: AssetImage(mainImageAsset),
134+
fit: BoxFit.cover,
135+
)),
136+
child: Align(
137+
alignment: Alignment.center,
138+
child: accentFilterColor != null
139+
? ColorFiltered(
140+
colorFilter: ColorFilter.mode(
141+
accentFilterColor!, BlendMode.srcATop),
142+
child: Image.asset(logoImageAsset),
143+
)
144+
: Image.asset(logoImageAsset))
145+
// Stack( children: [
146+
// Align(
147+
// alignment: Alignment.center,
148+
// child: accentFilterColor != null ? ColorFiltered(
149+
// colorFilter: ColorFilter.mode(accentFilterColor!, BlendMode.srcATop),
150+
// child: Image.asset(logoImageAsset),
151+
// ) : Image.asset(logoImageAsset)
152+
// ),
153+
// Align(
154+
// alignment: Alignment.bottomCenter,
155+
// child: TextTitleBig(
156+
// text: title,
157+
// textColor: accentFilterColor ?? AppColors.ContentWhite,
158+
// ),
159+
// )
160+
// ],
161+
// ),
162+
),
163+
),
164+
],
165+
);
166+
}
167+
});
120168
}
121169

122170
Widget _buildMainContent(Widget content) {

‎lib/widgets/bio_elements/BioInfoContent.dart‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import 'package:collection/collection.dart';
22
import 'package:flutter/widgets.dart';
33

4+
import '../../resources/Resources.dart';
45
import '../base/TextContentBig.dart';
56
import '../base/TextSubtitle.dart';
7+
import '../base/TextTitle.dart';
68

79
class BioInfoModel {
810
String resourcePath;
@@ -13,25 +15,27 @@ class BioInfoModel {
1315
}
1416

1517
class BioInfoContent extends StatelessWidget {
16-
final List<BioInfoModel> data;
18+
List<BioInfoModel> data;
19+
Color accentFilterColor;
1720

18-
const BioInfoContent({super.key, required this.data});
21+
BioInfoContent({super.key, required this.data, this.accentFilterColor = AppColors.ContentLightYellow});
1922

2023
@override
2124
Widget build(BuildContext context) {
2225
return Wrap(
2326
children: data.mapIndexed((int index, BioInfoModel item) {
2427
bool isFullScreenWidth = (index + 1) % 3 == 0;
25-
return BioInfoCard(isFullWidth: isFullScreenWidth, model: item);
28+
return BioInfoCard(isFullWidth: isFullScreenWidth, model: item, accentFilterColor: accentFilterColor,);
2629
}).toList());
2730
}
2831
}
2932

3033
class BioInfoCard extends StatelessWidget {
3134
bool isFullWidth = false;
3235
BioInfoModel model;
36+
Color accentFilterColor;
3337

34-
BioInfoCard({super.key, this.isFullWidth = false, required this.model});
38+
BioInfoCard({super.key, this.isFullWidth = false, required this.model, this.accentFilterColor = AppColors.ContentLightYellow});
3539

3640
@override
3741
Widget build(BuildContext context) {
@@ -50,17 +54,19 @@ class BioInfoCard extends StatelessWidget {
5054
return Container(
5155
width: containerWidth,
5256
height: 320.0,
53-
padding: EdgeInsets.all(4.0),
57+
padding: EdgeInsets.all(8.0),
5458
child: Container(
59+
padding: EdgeInsets.all(16.0),
5560
decoration: BoxDecoration(
5661
image: DecorationImage(
57-
image: AssetImage(model.resourcePath), fit: BoxFit.fitWidth)),
62+
image: AssetImage(model.resourcePath), fit: BoxFit.cover)),
5863
child: Column(
5964
mainAxisAlignment: MainAxisAlignment.center,
6065
crossAxisAlignment: CrossAxisAlignment.center,
6166
children: [
62-
TextSubtitle(text: model.title),
63-
TextContentBig(text: model.description)
67+
TextTitle(text: model.title, textAlign: TextAlign.center, textColor: accentFilterColor ?? AppColors.ContentWhite,),
68+
SizedBox(height: 24.0,),
69+
TextSubtitle(text: model.description, textAlign: TextAlign.center, textColor: accentFilterColor ?? AppColors.ContentWhite,)
6470
],
6571
),
6672
)

‎pubspec.yaml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,3 +118,5 @@ flutter:
118118
- assets/img/card_conf_pl.jpg
119119
- assets/img/card_conf_st.jpg
120120
- assets/img/card_conf_uic.jpg
121+
- assets/img/img_bio_sport.jpg
122+
- assets/img/img_bio_hobby.jpg

0 commit comments

Comments
 (0)