Skip to content

Commit 718f723

Browse files
committed
feat(ui): improve home layout on large screens
1 parent 0084f1e commit 718f723

File tree

3 files changed

+66
-63
lines changed

3 files changed

+66
-63
lines changed

lib/Screens/home.dart

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -27,23 +27,13 @@ class HomeScreen extends StatelessWidget {
2727

2828
@override
2929
Widget build(BuildContext context) {
30-
double width = MediaQuery.of(context).size.width;
3130
return SingleChildScrollView(
3231
physics: const NeverScrollableScrollPhysics(),
3332
child: Column(
3433
children: <Widget>[
3534
const LiveSessionStatusIndicator(),
3635
SizedBox(
3736
height: MediaQuery.of(context).size.height - 60,
38-
width: width > 1360
39-
? 1320
40-
: width > 1024
41-
? 986
42-
: width > 768
43-
? 750
44-
: width > 576
45-
? 576
46-
: width,
4737
child: NewsFeed(scrollController: _scrollController),
4838
),
4939
],

lib/api/article_parts.dart

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,8 +75,9 @@ class ArticleParts extends StatelessWidget {
7575
youtubeId: article.articleHero['fields']
7676
['youTubeVideoId'] ??
7777
'',
78-
youtubeThumbnail:
79-
article.articleHero['fields']['image']['url'] ?? '',
78+
youtubeThumbnail: article.articleHero['fields']['image']
79+
?['url'] ??
80+
'',
8081
player: article.articleHero['fields']['player'],
8182
articleChampionship: articleChampionship,
8283
),

lib/helpers/news.dart

Lines changed: 63 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -394,12 +394,7 @@ class NewsItem extends StatelessWidget {
394394
.size
395395
.width >
396396
500)
397-
? (MediaQuery.of(context)
398-
.size
399-
.width /
400-
itemPerRow -
401-
8 * itemPerRow) /
402-
(16 / 9)
397+
? null
403398
: (showSmallDescription ??
404399
false)
405400
? height / (16 / 9) -
@@ -660,7 +655,7 @@ class NewsItem extends StatelessWidget {
660655
: Text(
661656
item.subtitle,
662657
textAlign: TextAlign.justify,
663-
maxLines: width > 1360 ? 4 : 5,
658+
maxLines: width > 1360 ? 3 : 5,
664659
overflow: TextOverflow.ellipsis,
665660
),
666661
mouseCursor: SystemMouseCursors.click,
@@ -1203,40 +1198,58 @@ class _NewsListState extends State<NewsList> {
12031198
),
12041199
),
12051200
)
1206-
: Padding(
1207-
padding: const EdgeInsets.only(top: 15),
1208-
child: PagedGridView<int, News>(
1209-
pagingController: _pagingController,
1210-
scrollController: widget.scrollController,
1211-
scrollDirection: Axis.vertical,
1212-
shrinkWrap: true,
1213-
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
1214-
crossAxisCount: width < 850 ? 2 : 3,
1215-
crossAxisSpacing: 5.0,
1216-
mainAxisSpacing: 5.0,
1217-
),
1218-
builderDelegate: PagedChildBuilderDelegate<News>(
1219-
itemBuilder: (context, item, index) {
1220-
return NewsItem(
1221-
item,
1222-
false,
1223-
showSmallDescription: true,
1224-
itemPerRow: width < 750 ? 2 : 3,
1225-
);
1226-
},
1227-
firstPageProgressIndicatorBuilder: (_) =>
1228-
const LoadingIndicatorUtil(),
1229-
firstPageErrorIndicatorBuilder: (_) {
1230-
return FirstPageExceptionIndicator(
1231-
title: AppLocalizations.of(context)!.errorOccurred,
1232-
message:
1233-
AppLocalizations.of(context)!.errorOccurredDetails,
1234-
onTryAgain: () => _pagingController.refresh(),
1235-
);
1236-
},
1237-
newPageProgressIndicatorBuilder: (_) =>
1238-
const LoadingIndicatorUtil(),
1239-
),
1201+
: PagedGridView<int, News>(
1202+
padding: EdgeInsets.only(
1203+
left: width > 1360
1204+
? (width - 1320) / 2.5
1205+
: width > 1024
1206+
? (width - 986) / 2.5
1207+
: width > 768
1208+
? (width - 750) / 2.5
1209+
: width > 576
1210+
? (width - 576) / 2.5
1211+
: width,
1212+
right: width > 1360
1213+
? (width - 1320) / 2.5
1214+
: width > 1024
1215+
? (width - 986) / 2.5
1216+
: width > 768
1217+
? (width - 750) / 2.5
1218+
: width > 576
1219+
? (width - 576) / 2.5
1220+
: width,
1221+
top: 15,
1222+
),
1223+
pagingController: _pagingController,
1224+
scrollController: widget.scrollController,
1225+
scrollDirection: Axis.vertical,
1226+
shrinkWrap: true,
1227+
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
1228+
crossAxisCount: width < 850 ? 2 : 3,
1229+
crossAxisSpacing: 5.0,
1230+
mainAxisSpacing: 5.0,
1231+
),
1232+
builderDelegate: PagedChildBuilderDelegate<News>(
1233+
itemBuilder: (context, item, index) {
1234+
return NewsItem(
1235+
item,
1236+
false,
1237+
showSmallDescription: true,
1238+
itemPerRow: width < 850 ? 2 : 3,
1239+
);
1240+
},
1241+
firstPageProgressIndicatorBuilder: (_) =>
1242+
const LoadingIndicatorUtil(),
1243+
firstPageErrorIndicatorBuilder: (_) {
1244+
return FirstPageExceptionIndicator(
1245+
title: AppLocalizations.of(context)!.errorOccurred,
1246+
message:
1247+
AppLocalizations.of(context)!.errorOccurredDetails,
1248+
onTryAgain: () => _pagingController.refresh(),
1249+
);
1250+
},
1251+
newPageProgressIndicatorBuilder: (_) =>
1252+
const LoadingIndicatorUtil(),
12401253
),
12411254
);
12421255
}
@@ -1473,6 +1486,12 @@ class ImageRenderer extends StatelessWidget {
14731486

14741487
@override
14751488
Widget build(BuildContext context) {
1489+
double width = MediaQuery.of(context).size.width;
1490+
width = width > 1400
1491+
? 450
1492+
: width > 1000
1493+
? 500
1494+
: width;
14761495
return Padding(
14771496
padding: EdgeInsets.only(
14781497
bottom: inSchedule != null ? 0 : 10,
@@ -1633,18 +1652,14 @@ class ImageRenderer extends StatelessWidget {
16331652
? CachedNetworkImage(
16341653
imageUrl: imageUrl,
16351654
placeholder: (context, url) => SizedBox(
1636-
height: MediaQuery.of(context).size.width /
1637-
(16 / 9),
1655+
height: width,
16381656
child: const LoadingIndicatorUtil(
16391657
replaceImage: true,
16401658
borderRadius: false,
16411659
),
16421660
),
16431661
errorWidget: (context, url, error) =>
1644-
ImageRequestErrorUtil(
1645-
height: MediaQuery.of(context).size.width /
1646-
(16 / 9),
1647-
),
1662+
ImageRequestErrorUtil(),
16481663
fadeOutDuration: const Duration(seconds: 1),
16491664
fadeInDuration: const Duration(seconds: 1),
16501665
cacheManager: CacheManager(
@@ -1661,10 +1676,7 @@ class ImageRenderer extends StatelessWidget {
16611676
loadingProgress == null
16621677
? child
16631678
: SizedBox(
1664-
height: MediaQuery.of(context)
1665-
.size
1666-
.width /
1667-
(16 / 9),
1679+
height: width / (16 / 9),
16681680
child: const LoadingIndicatorUtil(
16691681
replaceImage: true,
16701682
borderRadius: false,

0 commit comments

Comments
 (0)