lib item page ready

This commit is contained in:
Dr-Blank 2024-05-12 05:38:30 -04:00
parent 0d54f1cb15
commit 097caf8ec2
No known key found for this signature in database
GPG key ID: 7452CC63F210A266
15 changed files with 804 additions and 221 deletions

View file

@ -70,61 +70,60 @@ class BookOnShelf extends HookConsumerWidget {
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// the cover image of the book
// take up remaining space
// take up remaining space hence the expanded
Expanded(
child: Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: coverImage.when(
data: (image) {
// return const BookCoverSkeleton();
if (image.isEmpty) {
return const Icon(Icons.error);
}
var imageWidget = InkWell(
onTap: () {
// open the book
context.pushNamed(
Routes.libraryItem.name,
pathParameters: {
Routes.libraryItem.pathParamName!: item.id,
},
extra: LibraryItemExtras(
book: book,
heroTagSuffix: heroTagSuffix,
coverImage: coverImage.valueOrNull,
),
);
},
child: Image.memory(
image,
fit: BoxFit.fill,
cacheWidth: (height *
1.2 *
MediaQuery.of(context).devicePixelRatio)
.round(),
),
);
return Hero(
tag: HeroTagPrefixes.bookCover +
item.id +
heroTagSuffix,
child: Container(
child: Hero(
tag: HeroTagPrefixes.bookCover + item.id + heroTagSuffix,
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: coverImage.when(
data: (image) {
// return const BookCoverSkeleton();
if (image.isEmpty) {
return const Icon(Icons.error);
}
var imageWidget = InkWell(
onTap: () {
// open the book
context.pushNamed(
Routes.libraryItem.name,
pathParameters: {
Routes.libraryItem.pathParamName!: item.id,
},
extra: LibraryItemExtras(
book: book,
heroTagSuffix: heroTagSuffix,
coverImage: coverImage.valueOrNull,
),
);
},
child: Image.memory(
image,
fit: BoxFit.fill,
cacheWidth: (height *
1.2 *
MediaQuery.of(context).devicePixelRatio)
.round(),
),
);
return Container(
decoration: BoxDecoration(
color: Theme.of(context)
.colorScheme
.onPrimaryContainer,
),
child: imageWidget,
),
);
},
loading: () {
return const Center(child: BookCoverSkeleton());
},
error: (error, stack) {
return const Icon(Icons.error);
},
);
},
loading: () {
return const Center(child: BookCoverSkeleton());
},
error: (error, stack) {
return const Icon(Icons.error);
},
),
),
),
),

View file

@ -56,29 +56,62 @@ class SimpleHomeShelf extends HookConsumerWidget {
// if height is null take up 30% of the smallest screen dimension
return Padding(
padding: const EdgeInsets.all(8.0),
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(title, style: Theme.of(context).textTheme.titleLarge),
const SizedBox(height: 16),
Padding(
padding: const EdgeInsets.only(left: 8.0, bottom: 8.0),
child: Text(title, style: Theme.of(context).textTheme.titleLarge),
),
// fix the height of the shelf as a percentage of the screen height
SizedBox(
height: max(
min(
height ?? 0.3 * MediaQuery.of(context).size.shortestSide,
200.0,
),
150.0,
),
height: height ?? getDefaultShelfHeight(context, perCent: 0.5),
child: ListView.separated(
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) => children[index],
separatorBuilder: (context, index) => const SizedBox(width: 16),
itemCount: children.length,
itemBuilder: (context, index) {
if (index == 0 || index == children.length + 1) {
return const SizedBox(
width: 8,
);
}
return children[index - 1];
},
separatorBuilder: (context, index) {
if (index == 0 || index == children.length + 1) {
return const SizedBox();
}
return const SizedBox(width: 16);
},
itemCount: children.length +
2, // add some extra space at the start and end so that the first and last items are not at the edge
),
),
],
),
);
}
/// get the height of the shelf based on the screen size
/// the height is the height parent wants the shelf to be
/// but it should not be less than 150 so we take the max of 150 and the height in the end
/// ignoreWidth is used to ignore the width of the screen and take only the height into consideration else smallest side is taken so that shelf is not too big on tablets
double getDefaultShelfHeight(
BuildContext context, {
bool ignoreWidth = false,
atMin = 150.0,
perCent = 0.3,
}) {
double referenceSide;
if (ignoreWidth) {
referenceSide = MediaQuery.of(context).size.height;
} else {
referenceSide = min(
MediaQuery.of(context).size.width,
MediaQuery.of(context).size.height,
);
}
return max(atMin, referenceSide * perCent);
}
}