Skip to content

Commit

Permalink
feat: Improvements for the product page (Part 2) (#5764)
Browse files Browse the repository at this point in the history 
* Improvements for the product page

* Fix Android issues

* Remove unused variable
  • Loading branch information
@g123k
g123k authored Oct 28, 2024
1 parent 493ac30 commit 688ddc2
Show file tree
Hide file tree
Showing 7 changed files with 272 additions and 187 deletions.
117 changes: 96 additions & 21 deletions packages/smooth_app/lib/helpers/product_cards_helper.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import 'package:smooth_app/generic_lib/widgets/smooth_card.dart';
import 'package:smooth_app/helpers/image_field_extension.dart';
import 'package:smooth_app/helpers/ui_helpers.dart';
import 'package:smooth_app/query/product_query.dart';
import 'package:smooth_app/themes/smooth_theme_colors.dart';
import 'package:smooth_app/themes/theme_provider.dart';
import 'package:smooth_app/widgets/smooth_app_bar.dart';

SmoothAppBar buildEditProductAppBar({
Expand Down Expand Up @@ -88,26 +90,99 @@ const EdgeInsets SMOOTH_CARD_PADDING = EdgeInsets.symmetric(
/// A SmoothCard on Product cards using default margin and padding.
Widget buildProductSmoothCard({
Widget? header,
Widget? title,
EdgeInsetsGeometry? titlePadding,
required Widget body,
EdgeInsets? padding = EdgeInsets.zero,
EdgeInsets? margin = const EdgeInsets.symmetric(
EdgeInsetsGeometry? padding = EdgeInsets.zero,
EdgeInsetsGeometry? margin = const EdgeInsets.symmetric(
horizontal: SMALL_SPACE,
),
}) =>
SmoothCard(
margin: margin,
padding: padding,
child: switch (header) {
Object _ => Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
if (header != null) header,
body,
],
}) {
assert(
(header != null && title == null) || header == null,
"You can't pass a header and a title at the same time",
);

Widget child;

if (title != null) {
child = Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
_ProductSmoothCardTitle(
title: title,
padding: titlePadding,
),
body,
],
);
} else if (header != null) {
child = Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
header,
body,
],
);
} else {
child = body;
}

return SmoothCard(
margin: margin,
padding: padding,
child: child,
);
}

class _ProductSmoothCardTitle extends StatelessWidget {
const _ProductSmoothCardTitle({
required this.title,
this.padding,
});

final Widget title;
final EdgeInsetsGeometry? padding;

@override
Widget build(BuildContext context) {
final SmoothColorsThemeExtension colors =
Theme.of(context).extension<SmoothColorsThemeExtension>()!;
final EdgeInsetsGeometry effectivePadding = padding ??
const EdgeInsetsDirectional.symmetric(
vertical: MEDIUM_SPACE,
);
final TextStyle titleStyle =
Theme.of(context).textTheme.displaySmall ?? const TextStyle();
final double fontSize = titleStyle.fontSize ?? 15.0;

return Container(
constraints: BoxConstraints(
minHeight:
MEDIUM_SPACE * 2 + MediaQuery.textScalerOf(context).scale(fontSize),
),
decoration: BoxDecoration(
color: context.lightTheme()
? colors.primaryMedium
: colors.primarySemiDark,
borderRadius: const BorderRadius.vertical(
top: ROUNDED_RADIUS,
),
),
padding: effectivePadding,
child: Center(
child: DefaultTextStyle(
style: titleStyle,
textAlign: TextAlign.center,
child: SizedBox(
width: double.infinity,
child: title,
),
_ => body
},
),
),
);
}
}

// used to be in now defunct `AttributeListExpandable`
List<Attribute> getPopulatedAttributes(
Expand Down Expand Up @@ -170,7 +245,7 @@ List<Attribute> getSortedAttributes(
}
final Map<String, List<Attribute>> mandatoryAttributesByGroup =
<String, List<Attribute>>{};
// collecting all the mandatory attributes, by group
// collecting all the mandatory attributes, by group
for (final AttributeGroup attributeGroup in product.attributeGroups!) {
mandatoryAttributesByGroup[attributeGroup.id!] = getFilteredAttributes(
attributeGroup,
Expand All @@ -181,7 +256,7 @@ List<Attribute> getSortedAttributes(
);
}

// now ordering by attribute group order
// now ordering by attribute group order
for (final String attributeGroupId in attributeGroupOrder) {
final List<Attribute>? attributes =
mandatoryAttributesByGroup[attributeGroupId];
Expand Down Expand Up @@ -266,7 +341,7 @@ ProductImageData getProductImageData(
language,
);
if (productImage != null) {
// we found a localized version for this image
// we found a localized version for this image
return ProductImageData(
imageId: productImage.imgid,
imageField: imageField,
Expand Down Expand Up @@ -344,7 +419,7 @@ List<ProductImage> getRawProductImages(
for (final ProductImage productImage in rawImages) {
final int? imageId = int.tryParse(productImage.imgid!);
if (imageId == null) {
// highly unlikely
// highly unlikely
continue;
}
final ProductImage? previous = map[imageId];
Expand All @@ -354,12 +429,12 @@ List<ProductImage> getRawProductImages(
}
final ImageSize? currentImageSize = productImage.size;
if (currentImageSize == null) {
// highly unlikely
// highly unlikely
continue;
}
final ImageSize? previousImageSize = previous.size;
if (previousImageSize == imageSize) {
// we already have the best
// we already have the best
continue;
}
map[imageId] = productImage;
Expand Down
14 changes: 12 additions & 2 deletions packages/smooth_app/lib/knowledge_panel/knowledge_panels/knowledge_panel_group_card.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import 'package:openfoodfacts/openfoodfacts.dart';
import 'package:provider/provider.dart';
import 'package:smooth_app/generic_lib/design_constants.dart';
import 'package:smooth_app/knowledge_panel/knowledge_panels/knowledge_panel_card.dart';
import 'package:smooth_app/themes/smooth_theme_colors.dart';
import 'package:smooth_app/themes/theme_provider.dart';

class KnowledgePanelGroupCard extends StatelessWidget {
const KnowledgePanelGroupCard({
Expand All @@ -19,6 +21,9 @@ class KnowledgePanelGroupCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
final ThemeData themeData = Theme.of(context);
final SmoothColorsThemeExtension themeExtension =
themeData.extension<SmoothColorsThemeExtension>()!;

return Provider<KnowledgePanelPanelGroupElement>(
lazy: true,
create: (_) => groupElement,
Expand All @@ -32,8 +37,13 @@ class KnowledgePanelGroupCard extends StatelessWidget {
explicitChildNodes: true,
child: Text(
groupElement.title!,
style:
themeData.textTheme.titleSmall!.apply(color: Colors.grey),
style: themeData.textTheme.titleSmall!.copyWith(
fontSize: 15.5,
fontWeight: FontWeight.w700,
color: context.lightTheme()
? themeExtension.primaryUltraBlack
: themeExtension.primaryLight,
),
),
),
),
Expand Down
42 changes: 8 additions & 34 deletions packages/smooth_app/lib/knowledge_panel/knowledge_panels/knowledge_panel_product_cards.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ import 'package:flutter/material.dart';
import 'package:smooth_app/generic_lib/design_constants.dart';
import 'package:smooth_app/helpers/product_cards_helper.dart';
import 'package:smooth_app/knowledge_panel/knowledge_panels_builder.dart';
import 'package:smooth_app/themes/smooth_theme_colors.dart';
import 'package:smooth_app/themes/theme_provider.dart';

class KnowledgePanelProductCards extends StatelessWidget {
const KnowledgePanelProductCards(this.knowledgePanelWidgets);
Expand All @@ -13,9 +11,6 @@ class KnowledgePanelProductCards extends StatelessWidget {

@override
Widget build(BuildContext context) {
final SmoothColorsThemeExtension colors =
Theme.of(context).extension<SmoothColorsThemeExtension>()!;

final List<Widget> widgetsWrappedInSmoothCards =
knowledgePanelWidgets.map((Widget widget) {
/// When we have a panel with a title (e.g. "Health"), we change
Expand All @@ -26,31 +21,12 @@ class KnowledgePanelProductCards extends StatelessWidget {

if (hasTitle) {
content = buildProductSmoothCard(
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: context.lightTheme()
? colors.primaryMedium
: colors.primarySemiDark,
borderRadius: const BorderRadius.vertical(
top: ROUNDED_RADIUS,
),
),
width: double.infinity,
padding: const EdgeInsetsDirectional.symmetric(
vertical: SMALL_SPACE,
),
child: Center(child: widget.children.first),
),
Padding(
padding: SMOOTH_CARD_PADDING,
child: Column(
children: widget.children.sublist(1),
),
),
],
title: Text((widget.children.first as KnowledgePanelTitle).title),
body: Padding(
padding: SMOOTH_CARD_PADDING,
child: Column(
children: widget.children.sublist(1),
),
),
padding: EdgeInsets.zero,
margin: EdgeInsets.zero,
Expand All @@ -71,10 +47,8 @@ class KnowledgePanelProductCards extends StatelessWidget {

return Center(
child: Padding(
padding: const EdgeInsetsDirectional.only(
bottom: SMALL_SPACE,
start: SMALL_SPACE,
end: SMALL_SPACE,
padding: const EdgeInsetsDirectional.symmetric(
horizontal: SMALL_SPACE,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
Expand Down
Loading

0 comments on commit 688ddc2

Please sign in to comment.