refactor: update padding and width to make sure thumbnail is perfect square

This commit is contained in:
Aman Raj Singh Mourya
2025-05-20 16:04:53 +05:30
parent 43cdd10e85
commit d1ae4d52dd
2 changed files with 59 additions and 58 deletions

View File

@@ -23,72 +23,69 @@ class NewAlbumRowItemWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
final enteColorScheme = getEnteColorScheme(context);
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 2.5),
child: GestureDetector(
onTap: () async {
final result = await showTextInputDialog(
context,
title: S.of(context).newAlbum,
submitButtonLabel: S.of(context).create,
hintText: S.of(context).enterAlbumName,
alwaysShowSuccessState: false,
initialValue: "",
textCapitalization: TextCapitalization.words,
popnavAfterSubmission: true,
onSubmit: (String text) async {
if (text.trim() == "") {
return;
}
return GestureDetector(
onTap: () async {
final result = await showTextInputDialog(
context,
title: S.of(context).newAlbum,
submitButtonLabel: S.of(context).create,
hintText: S.of(context).enterAlbumName,
alwaysShowSuccessState: false,
initialValue: "",
textCapitalization: TextCapitalization.words,
popnavAfterSubmission: true,
onSubmit: (String text) async {
if (text.trim() == "") {
return;
}
try {
final Collection c =
await CollectionsService.instance.createAlbum(text);
// ignore: unawaited_futures
await routeToPage(
context,
CollectionPage(CollectionWithThumbnail(c, null)),
);
} catch (e, s) {
Logger("CreateNewAlbumRowItemWidget")
.severe("Failed to rename album", e, s);
rethrow;
}
},
);
try {
final Collection c =
await CollectionsService.instance.createAlbum(text);
// ignore: unawaited_futures
await routeToPage(
context,
CollectionPage(CollectionWithThumbnail(c, null)),
);
} catch (e, s) {
Logger("CreateNewAlbumRowItemWidget")
.severe("Failed to rename album", e, s);
rethrow;
}
},
);
if (result is Exception) {
await showGenericErrorDialog(context: context, error: result);
}
},
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
DottedBorder(
if (result is Exception) {
await showGenericErrorDialog(context: context, error: result);
}
},
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: height,
width: width,
child: DottedBorder(
borderType: BorderType.RRect,
strokeWidth: 1.5,
borderPadding: const EdgeInsets.all(0.75),
dashPattern: const [3.75, 3.75],
radius: const Radius.circular(2.35),
padding: EdgeInsets.zero,
color: getEnteColorScheme(context).strokeMuted,
child: SizedBox(
height: height,
width: width,
child: Center(
child: Icon(
Icons.add,
color: getEnteColorScheme(context).strokeMuted,
),
),
),
const SizedBox(height: 4),
Text(
S.of(context).addNew,
style: getEnteTextTheme(context).smallFaint,
),
],
),
),
const SizedBox(height: 4),
Text(
S.of(context).addNew,
style: getEnteTextTheme(context).smallFaint,
),
],
),
);
}

View File

@@ -26,10 +26,14 @@ class CollectionsFlexiGridViewWidget extends StatefulWidget {
Width changes dynamically with screen width such that we can fit 3 in one row.
Keep the width integral (center the albums to distribute excess pixels)
*/
/// [horizontalPadding] Accounts for SliverPadding edges plus additional
/// adjustment to ensure album thumbnails appear as perfect squares.
/// Increasing this value makes thumbnails narrower.
static const maxThumbnailWidth = 224.0;
static const fixedGapBetweenAlbum = 4.0;
static const collectionItemsToPreload = 20;
static const silverHorizontalPadding = 16.0;
static const horizontalPadding = 24.0;
final List<Collection>? collections;
// At max how many albums to display
final int displayLimitCount;
@@ -122,7 +126,7 @@ class _CollectionsFlexiGridViewWidgetState
final double sideOfThumbnail = (screenWidth -
gapBetweenAlbums -
CollectionsFlexiGridViewWidget.silverHorizontalPadding) /
CollectionsFlexiGridViewWidget.horizontalPadding) /
albumsCountInOneRow;
final int totalCollections = widget.collections!.length;
@@ -134,8 +138,8 @@ class _CollectionsFlexiGridViewWidgetState
key: key,
padding: EdgeInsets.only(
top: 8,
left: CollectionsFlexiGridViewWidget.silverHorizontalPadding / 2,
right: CollectionsFlexiGridViewWidget.silverHorizontalPadding / 2,
left: 8,
right: 8,
bottom: widget.scrollBottomSafeArea,
),
sliver: SliverGrid(
@@ -192,8 +196,8 @@ class _CollectionsFlexiGridViewWidgetState
key: key,
padding: EdgeInsets.only(
top: 8,
left: CollectionsFlexiGridViewWidget.silverHorizontalPadding / 2,
right: CollectionsFlexiGridViewWidget.silverHorizontalPadding / 2,
left: 8,
right: 8,
bottom: widget.scrollBottomSafeArea,
),
sliver: SliverList(