Skip to content

Commit 22c74e5

Browse files
GreyLabsDevGreyLabsDev
committed
upd adaptive layouting for skls page
1 parent 41f0a9b commit 22c74e5

File tree

5 files changed

+218
-128
lines changed

5 files changed

+218
-128
lines changed

‎lib/pages/TestPage.dart‎

Lines changed: 173 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -131,39 +131,146 @@ class TestPageState extends State {
131131
mainImageAsset: "assets/img/button_bg_skills.png",
132132
logoImageAsset: "assets/img/logo_skills_big.png",
133133
subtitle: "Hard & Soft",
134+
isPaddingEnabled: false,
134135
accentFilterColor: AppColors.ContentDarkBlue,
135-
content:Column(
136+
content: Column(
136137
crossAxisAlignment: CrossAxisAlignment.center,
137138
children: [
138-
EventsBlock(titleColor: AppColors.ContentDarkBlue,),
139-
SizedBox(height: 32.0,),
140-
TextTitle(text: "Work and skills", textColor: AppColors.ContentDarkBlue,),
141-
SizedBox(height: 16.0,),
142-
Wrap(
139+
EventsBlock(
140+
titleColor: AppColors.ContentDarkBlue,
141+
),
142+
SizedBox(
143+
height: 32.0,
144+
),
145+
TextTitle(
146+
text: "Work and skills",
147+
textColor: AppColors.ContentDarkBlue,
148+
),
149+
SizedBox(
150+
height: 16.0,
151+
),
152+
_buildAdaptiveSkillTable(true)
153+
],
154+
),
155+
);
156+
}
157+
158+
Widget _buildAdaptiveSkillTable(bool useRow) {
159+
return LayoutBuilder(
160+
builder: (BuildContext context, BoxConstraints constraints) {
161+
bool useDefaultRow = constraints.maxWidth >= 770;
162+
if (useDefaultRow) {
163+
return Row(
164+
mainAxisAlignment: MainAxisAlignment.center,
165+
crossAxisAlignment: CrossAxisAlignment.center,
166+
children: [
167+
Flexible(
168+
flex: 1,
169+
fit: FlexFit.tight,
170+
child: WorkExpTimeline(),
171+
),
172+
Flexible(
173+
flex: 1,
174+
fit: FlexFit.tight,
175+
child: SkillsColumn([
176+
SkillItem("Main", ["Android", "Kotlin", "Java", "Flutter"]),
177+
SkillItem("UI", ["Jetpack Compose", "XML"]),
178+
SkillItem("Data", [
179+
"Realm",
180+
"Room",
181+
"SQL",
182+
"Retrofit",
183+
"GraphQL",
184+
"JSON",
185+
"XML"
186+
]),
187+
SkillItem("Architecture", [
188+
"Clean",
189+
"MVP",
190+
"MVVM",
191+
"MVI",
192+
"Redux",
193+
"Multi Module",
194+
"SDUI/BDUI"
195+
]),
196+
SkillItem("DI", ["Dagger 2", "Koin", "Hilt"]),
197+
SkillItem(
198+
"Async", ["RxJava 2", "Kotlin Coroutines", "Threads"]),
199+
SkillItem("Soft", [
200+
"Public Speaking",
201+
"Tech interviews",
202+
"Design/Tech review",
203+
"Teamwork",
204+
"Feature leading",
205+
]),
206+
SkillItem("Other", [
207+
"Python",
208+
"Figma",
209+
]),
210+
], 16.0),
211+
)
212+
],
213+
);
214+
} else {
215+
return Wrap(
143216
direction: Axis.horizontal,
144217
alignment: WrapAlignment.center,
145-
crossAxisAlignment: WrapCrossAlignment.center,
218+
146219
spacing: 16.0,
147220
runSpacing: 16.0,
148221
children: [
149-
WorkExpTimeline(),
150-
SkillsColumn([
151-
SkillItem("Main", ["Android", "Kotlin", "Java", "Flutter"]),
152-
SkillItem("UI", ["Jetpack Compose", "XML"]),
153-
SkillItem(
154-
"Data", ["Realm", "Room", "SQL", "Retrofit", "GraphQL", "JSON", "XML"]),
155-
SkillItem(
156-
"Architecture", ["Clean", "MVP", "MVVM", "MVI", "Redux", "Multi Module", "SDUI/BDUI"]),
157-
SkillItem("DI", ["Dagger 2", "Koin", "Hilt"]),
158-
SkillItem("Async", ["RxJava 2", "Kotlin Coroutines", "Hilt", "Threads"]),
159-
SkillItem("Soft", ["Public Speaking", "Tech interviews", "Design/Tech review", "Teamwork","Feature leading",]),
160-
SkillItem("Other", ["Python", "Figma",]),
161-
]),
222+
Flexible(
223+
flex: 1,
224+
fit: FlexFit.tight,
225+
child: WorkExpTimeline(),
226+
),
227+
228+
Flexible(
229+
flex: 2,
230+
fit: FlexFit.loose,
231+
child: SkillsColumn([
232+
SkillItem("Main", ["Android", "Kotlin", "Java", "Flutter"]),
233+
SkillItem("UI", ["Jetpack Compose", "XML"]),
234+
SkillItem("Data", [
235+
"Realm",
236+
"Room",
237+
"SQL",
238+
"Retrofit",
239+
"GraphQL",
240+
"JSON",
241+
"XML"
242+
]),
243+
SkillItem("Architecture", [
244+
"Clean",
245+
"MVP",
246+
"MVVM",
247+
"MVI",
248+
"Redux",
249+
"Multi Module",
250+
"SDUI/BDUI"
251+
]),
252+
SkillItem("DI", ["Dagger 2", "Koin", "Hilt"]),
253+
SkillItem(
254+
"Async", ["RxJava 2", "Kotlin Coroutines", "Threads"]),
255+
SkillItem("Soft", [
256+
"Public Speaking",
257+
"Tech interviews",
258+
"Design/Tech review",
259+
"Teamwork",
260+
"Feature leading",
261+
]),
262+
SkillItem("Other", [
263+
"Python",
264+
"Figma",
265+
]),
266+
], 32.0),
267+
)
162268
],
163-
)
164-
],
165-
),
166-
);
269+
);
270+
}
271+
});
272+
273+
167274
}
168275

169276
Widget _createBioInfoPage() {
@@ -175,14 +282,19 @@ class TestPageState extends State {
175282
subtitle: "On Earth since 1994",
176283
content: BioInfoContent(
177284
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-
),
285+
data: [
286+
BioInfoModel("assets/img/img_bio_sport.jpg", "Bachelor's degree",
287+
"Information security, sofware/hardware system integration"),
288+
BioInfoModel("assets/img/img_bio_hobby.jpg", "Master's degree",
289+
"Software engineering, app architecture, distributed apps"),
290+
BioInfoModel("assets/img/img_bio_sport.jpg", "Sport",
291+
"Swimming, long walks, airsoft trainings and local games with friends"),
292+
BioInfoModel("assets/img/img_bio_hobby.jpg", "Hobby",
293+
"Music production, 3D Art, Pet projects, gaming"),
294+
BioInfoModel("assets/img/img_bio_sport.jpg", "Last read book",
295+
"Blood, Sweat, and Pixels"),
296+
],
297+
),
186298
);
187299
}
188300

@@ -195,35 +307,35 @@ class TestPageState extends State {
195307
isPaddingEnabled: false,
196308
accentFilterColor: AppColors.ContentLightYellow,
197309
content: ImageGallery(
198-
accentFilterColor: AppColors.ContentLightYellow,
199-
onClickedAction: _handleRedirect,
200-
imagesResList: [
201-
ImageModel(
202-
resourcePath: "assets/img/img_gallery_1.jpg",
203-
title: "Do you really want it?",
204-
description: "Part of my favorite songs",
205-
goToUrl: "https://www.artstation.com/artwork/G8NeGQ"),
206-
ImageModel(
207-
resourcePath: "assets/img/img_gallery_2.jpg",
208-
title: "Feel nothing",
209-
description: "Testing new fog FX",
210-
goToUrl: "https://www.artstation.com/artwork/NG60w5"),
211-
ImageModel(
212-
resourcePath: "assets/img/img_gallery_3.jpg",
213-
title: "Cube in cave",
214-
description: "Experiment with volumetric lights",
215-
goToUrl: "https://www.artstation.com/artwork/KOWeoo"),
216-
ImageModel(
217-
resourcePath: "assets/img/img_gallery_4.jpg",
218-
title: "Zero comfort zone",
219-
description: "My first try with photoreal render",
220-
goToUrl: "https://www.artstation.com/artwork/yJVD5x"),
221-
ImageModel(
222-
resourcePath: "assets/img/img_gallery_5.jpg",
223-
title: "Art for my track",
224-
description: "Unusual environment with my music logo",
225-
goToUrl: "https://www.artstation.com/artwork/r9VJ1J"),
226-
]),
310+
accentFilterColor: AppColors.ContentLightYellow,
311+
onClickedAction: _handleRedirect,
312+
imagesResList: [
313+
ImageModel(
314+
resourcePath: "assets/img/img_gallery_1.jpg",
315+
title: "Do you really want it?",
316+
description: "Part of my favorite songs",
317+
goToUrl: "https://www.artstation.com/artwork/G8NeGQ"),
318+
ImageModel(
319+
resourcePath: "assets/img/img_gallery_2.jpg",
320+
title: "Feel nothing",
321+
description: "Testing new fog FX",
322+
goToUrl: "https://www.artstation.com/artwork/NG60w5"),
323+
ImageModel(
324+
resourcePath: "assets/img/img_gallery_3.jpg",
325+
title: "Cube in cave",
326+
description: "Experiment with volumetric lights",
327+
goToUrl: "https://www.artstation.com/artwork/KOWeoo"),
328+
ImageModel(
329+
resourcePath: "assets/img/img_gallery_4.jpg",
330+
title: "Zero comfort zone",
331+
description: "My first try with photoreal render",
332+
goToUrl: "https://www.artstation.com/artwork/yJVD5x"),
333+
ImageModel(
334+
resourcePath: "assets/img/img_gallery_5.jpg",
335+
title: "Art for my track",
336+
description: "Unusual environment with my music logo",
337+
goToUrl: "https://www.artstation.com/artwork/r9VJ1J"),
338+
]),
227339
);
228340
}
229341

‎lib/pages/base/BaseInfoPage.dart‎

Lines changed: 7 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,6 @@ class BaseInfoPage extends StatelessWidget {
2626

2727
@override
2828
Widget build(BuildContext context) {
29-
// TODO Adaptive feature - remove left-right side bg,
30-
// and set this image as vertical fullscreen bg with
31-
// geometric logo on top (like in mobile version from Figma)
32-
// but with more dimmed brightness
33-
3429
return Scaffold(
3530
backgroundColor: Colors.black,
3631
body: _buildAdaptiveBody(title, mainImageAsset, logoImageAsset, content,
@@ -50,11 +45,11 @@ class BaseInfoPage extends StatelessWidget {
5045
String? subtitle,
5146
Color? accentFilterColorx) {
5247
return LayoutBuilder(
53-
builder: (BuildContext context, BoxConstraints constraints) {
54-
print("AHTUNG = ${constraints.maxWidth}");
55-
bool isNeedToSwitchVertical = constraints.maxWidth <= 940;
48+
builder: (BuildContext context, BoxConstraints constraints) {
49+
bool isNeedToSwitchVertical = constraints.maxWidth <= 990;
5650

5751
if (isNeedToSwitchVertical) {
52+
print("Changed to vertical");
5853
return Stack(
5954
children: [
6055
Image.asset(
@@ -68,20 +63,14 @@ class BaseInfoPage extends StatelessWidget {
6863
),
6964
_buildMainContent(content, isNeedToSwitchVertical)
7065
],
71-
// decoration: BoxDecoration(
72-
// image: DecorationImage(
73-
// image: AssetImage(mainImageAsset),
74-
// fit: BoxFit.cover,
75-
// )),
76-
// child: TextTitle(text: "VERTICAL"),
7766
);
7867
} else {
7968
return Row(
8069
mainAxisAlignment: MainAxisAlignment.spaceBetween,
8170
crossAxisAlignment: CrossAxisAlignment.center,
8271
children: [
8372
Container(
84-
width: 256.0,
73+
width: 200.0,
8574
padding: EdgeInsets.only(
8675
left: 32.0, top: 32.0, right: 32.0, bottom: 96.0),
8776
decoration: BoxDecoration(
@@ -98,34 +87,17 @@ class BaseInfoPage extends StatelessWidget {
9887
child: Image.asset(logoImageAsset),
9988
)
10089
: 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-
// ),
11990
),
120-
Expanded(
91+
Flexible(
92+
flex: 1,
12193
child: Container(
12294
alignment: Alignment.topLeft,
12395
child: _buildMainContent(content, isNeedToSwitchVertical)),
12496
),
12597
Transform.flip(
12698
flipX: true,
12799
child: Container(
128-
width: 256.0,
100+
width: 200.0,
129101
padding: EdgeInsets.only(
130102
left: 32.0, top: 32.0, right: 32.0, bottom: 96.0),
131103
decoration: BoxDecoration(
@@ -142,23 +114,6 @@ class BaseInfoPage extends StatelessWidget {
142114
child: Image.asset(logoImageAsset),
143115
)
144116
: 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-
// ),
162117
),
163118
),
164119
],

‎lib/widgets/base/MainPageInfoButtonHorizontal.dart‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import 'package:flutter/material.dart';
2+
3+
// Adaptation version for vertical screens
4+
class Mainpageinfobuttonhorizontal extends StatelessWidget {
5+
final String bgImageAsset;
6+
final String logoBaseImageAsset;
7+
final String title;
8+
9+
const Mainpageinfobuttonhorizontal({super.key, required this.bgImageAsset, required this.logoBaseImageAsset, required this.title});
10+
11+
@override
12+
Widget build(BuildContext context) {
13+
return Stack(
14+
15+
);
16+
}
17+
18+
}

0 commit comments

Comments
 (0)