Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: minor design fixes in nutrition_page_loaded.dart #1475

Merged
merged 4 commits into from
Apr 4, 2022
Merged

feat: minor design fixes in nutrition_page_loaded.dart #1475

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ed60aa7
feat: use appbar button actions in nutrition_page_loaded.dart
VaiTon Apr 3, 2022
6830058
feat: add dialog to confirm save or back press in nutrition_page_load…
VaiTon Apr 3, 2022
71048eb
feat: use material style for dialog
VaiTon Apr 3, 2022
efe1511
Merge branch 'develop' into ux/nutrition_page
M123-dev Apr 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions packages/smooth_app/lib/l10n/app_en.arb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
"description": "A label on a button that says 'Next', pressing the button takes the user to the next screen."
},
"save": "Save",
"save_confirmation": "Are you sure you want to save?",
"skip": "Skip",
"cancel": "Cancel",
"@cancel": {},
Expand All @@ -38,6 +39,7 @@
"@label_web": {},
"learnMore": "Learn more",
"@learnMore": {},
"general_confirmation": "Are you sure?",
"incompatible": "Incompatible",
"@incompatible": {
"description": "Short label for product list view: the product is incompatible with your preferences"
Expand All @@ -57,7 +59,7 @@
"description": "Looking for: ${BARCODE}"
},
"@Introduction screen": {},
"welcomeToOpenFoodFacts": "Welcome to Open Food Facts",
"welcomeToOpenFoodFacts": "Welcome to Open\u00A0Food\u00A0Facts",
"@welcomeToOpenFoodFacts": {},
"whatIsOff": "Open Food Facts is a global non-profit powered by local communities.",
"@whatIsOff": {
Expand Down Expand Up @@ -352,6 +354,7 @@
},
"nutrition": "Nutrition",
"@nutrition": {},
"nutrition_page_close_confirmation": "Are you sure you want to close without saving?",
"nutrition_facts_photo": "Nutrition facts photo",
"@nutrition_facts_photo": {
"description": "Button label: For adding a picture of the nutrition facts of a product"
Expand Down Expand Up @@ -587,7 +590,7 @@
"count": {}
}
},
"compare_products_mode": "Original",
"compare_products_mode": "Compare",
"@compare_products_mode": {
"description": "Button to switch to 'compare products mode'"
},
Expand Down
160 changes: 109 additions & 51 deletions packages/smooth_app/lib/pages/product/nutrition_page_loaded.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import 'package:provider/provider.dart';
import 'package:smooth_app/database/local_database.dart';
import 'package:smooth_app/database/product_query.dart';
import 'package:smooth_app/generic_lib/design_constants.dart';
import 'package:smooth_app/generic_lib/widgets/smooth_card.dart';
import 'package:smooth_app/pages/product/common/product_refresher.dart';
import 'package:smooth_app/pages/product/nutrition_container.dart';

Expand Down Expand Up @@ -68,35 +69,45 @@ class _NutritionPageLoadedState extends State<NutritionPageLoaded> {

@override
Widget build(BuildContext context) {
final AppLocalizations appLocalizations = AppLocalizations.of(context)!;
final AppLocalizations localizations = AppLocalizations.of(context)!;
final LocalDatabase localDatabase = context.read<LocalDatabase>();
final List<Widget> children = <Widget>[];
children.add(_switchNoNutrition(appLocalizations));
children.add(_switchNoNutrition(localizations));
if (!_unspecified) {
children.add(_getServingField(appLocalizations));
children.add(_getServingSwitch(appLocalizations));
children.add(_getServingField(localizations));
children.add(_getServingSwitch(localizations));
for (final OrderedNutrient orderedNutrient
in _nutritionContainer.getDisplayableNutrients()) {
children.add(
_getNutrientRow(appLocalizations, orderedNutrient),
_getNutrientRow(localizations, orderedNutrient),
);
}
children.add(_addNutrientButton(appLocalizations));
children.add(_addNutrientButton(localizations));
}
children.add(_addCancelSaveButtons(
appLocalizations,
localDatabase,
));

return Scaffold(
appBar: AppBar(title: Text(appLocalizations.nutrition_page_title)),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Form(
key: _formKey,
child: ListView(children: children),
return WillPopScope(
child: Scaffold(
appBar: AppBar(
title: Text(localizations.nutrition_page_title),
actions: <Widget>[
IconButton(
onPressed: () => _validateAndSave(localizations, localDatabase),
icon: const Icon(Icons.check),
)
],
),
body: Padding(
padding: const EdgeInsets.symmetric(
horizontal: LARGE_SPACE,
vertical: SMALL_SPACE,
),
child: Form(
key: _formKey,
child: ListView(children: children),
),
),
),
onWillPop: () => _showCancelPopup(localizations),
);
}

Expand Down Expand Up @@ -216,7 +227,7 @@ class _NutritionPageLoadedState extends State<NutritionPageLoaded> {
}

Widget _getServingSwitch(final AppLocalizations appLocalizations) => Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(appLocalizations.nutrition_page_per_100g),
Expand All @@ -229,26 +240,27 @@ class _NutritionPageLoadedState extends State<NutritionPageLoaded> {
],
);

Widget _switchNoNutrition(final AppLocalizations appLocalizations) =>
Container(
Widget _switchNoNutrition(final AppLocalizations localizations) => SmoothCard(
color: Theme.of(context).colorScheme.primary,
padding: const EdgeInsets.symmetric(
horizontal: MEDIUM_SPACE,
vertical: SMALL_SPACE,
),
margin: EdgeInsets.zero,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Switch(
value: _unspecified,
onChanged: (final bool value) =>
setState(() => _unspecified = !_unspecified),
),
SizedBox(
width: getColumnSizeFromContext(context, 0.6),
child: Text(
appLocalizations.nutrition_page_unspecified,
style: const TextStyle(color: Colors.white),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
Text(
localizations.nutrition_page_unspecified,
style: Theme.of(context).primaryTextTheme.bodyText1,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
],
),
Expand All @@ -260,8 +272,10 @@ class _NutritionPageLoadedState extends State<NutritionPageLoaded> {
final List<OrderedNutrient> leftovers = List<OrderedNutrient>.from(
_nutritionContainer.getLeftoverNutrients(),
);

leftovers.sort((final OrderedNutrient a, final OrderedNutrient b) =>
a.name!.compareTo(b.name!));

final OrderedNutrient? selected = await showDialog<OrderedNutrient>(
context: context,
builder: (BuildContext context) {
Expand Down Expand Up @@ -294,33 +308,77 @@ class _NutritionPageLoadedState extends State<NutritionPageLoaded> {
setState(() => _nutritionContainer.add(selected));
}
},
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
const RoundedRectangleBorder(
borderRadius: ROUNDED_BORDER_RADIUS,
side: BorderSide.none,
),
),
),
icon: const Icon(Icons.add),
label: Text(appLocalizations.nutrition_page_add_nutrient),
);

Widget _addCancelSaveButtons(
final AppLocalizations appLocalizations,
final LocalDatabase localDatabase,
) =>
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: () => Navigator.pop(context),
child: Text(appLocalizations.cancel),
Future<bool> _showCancelPopup(AppLocalizations localizations) async =>
await showDialog<bool>(
context: context,
builder: (BuildContext context) => AlertDialog(
shape: const RoundedRectangleBorder(
borderRadius: ROUNDED_BORDER_RADIUS,
),
ElevatedButton(
onPressed: () async {
if (!_formKey.currentState!.validate()) {
return;
}
await _save(localDatabase);
},
child: Text(appLocalizations.save),
),
],
);
title: Text(localizations.general_confirmation),
content: Text(localizations.nutrition_page_close_confirmation),
actions: <TextButton>[
TextButton(
child: Text(localizations.cancel.toUpperCase()),
onPressed: () => Navigator.pop(context, false),
),
TextButton(
child: Text(localizations.close.toUpperCase()),
onPressed: () => Navigator.pop(context, true),
),
],
),
) ??
false;

Future<void> _validateAndSave(final AppLocalizations localizations,
final LocalDatabase localDatabase) async {
if (!_formKey.currentState!.validate()) {
return;
}

await _showSavePopup(localizations, localDatabase);
}

Future<void> _showSavePopup(
AppLocalizations localizations, LocalDatabase localDatabase) async {
final bool shouldSave = await showDialog<bool>(
context: context,
builder: (BuildContext context) => AlertDialog(
title: Text(localizations.general_confirmation),
content: Text(localizations.save_confirmation),
shape: const RoundedRectangleBorder(
borderRadius: ROUNDED_BORDER_RADIUS,
),
actions: <TextButton>[
TextButton(
child: Text(localizations.cancel.toUpperCase()),
onPressed: () => Navigator.pop(context, false),
),
TextButton(
child: Text(localizations.save.toUpperCase()),
onPressed: () => Navigator.pop(context, true),
),
],
)) ??
false;

if (shouldSave) {
_save(localDatabase);
}
}

Future<void> _save(final LocalDatabase localDatabase) async {
for (final String key in _controllers.keys) {
Expand Down