From 584e4ed87a2c930950e78865eeee6606a8f3a8bb Mon Sep 17 00:00:00 2001 From: thecodepapaya Date: Wed, 19 Jul 2023 22:18:37 +0530 Subject: [PATCH] Restrict bottom sheet responsiveness via parent dimensions --- lib/app/common/counter.dart | 37 ++++-- lib/app/responsive.dart | 15 +++ lib/presentation/categories/controller.dart | 1 + lib/presentation/categories/view.dart | 68 ++++++----- .../categories/widgets/category_header.dart | 44 ++++---- .../categories/widgets/category_image.dart | 15 +-- .../categories/widgets/category_list.dart | 5 +- .../categories/widgets/category_tile.dart | 104 ++++++++--------- .../categories/widgets/close_button.dart | 20 ++-- .../categories/widgets/menu_types.dart | 50 +++++---- .../widgets/scroll_down_button.dart | 74 ++++++------ lib/presentation/dish/controller.dart | 2 + lib/presentation/dish/view.dart | 30 +++-- lib/presentation/dish/widgets/button_row.dart | 106 +++++++++--------- .../dish/widgets/close_button.dart | 22 ++-- .../dish/widgets/dish_header.dart | 96 ++++++++-------- .../dish/widgets/image_header.dart | 66 ++++++----- lib/presentation/menu/widgets/dish_card.dart | 4 +- 18 files changed, 425 insertions(+), 334 deletions(-) diff --git a/lib/app/common/counter.dart b/lib/app/common/counter.dart index e062945..bbde741 100644 --- a/lib/app/common/counter.dart +++ b/lib/app/common/counter.dart @@ -4,10 +4,12 @@ import 'package:flutter/material.dart'; class DishCounter extends StatefulWidget { final int initialCount; + final double parentMaxWidth; const DishCounter({ super.key, this.initialCount = 0, + required this.parentMaxWidth, }); @override @@ -46,10 +48,13 @@ class _DishCounterState extends State { mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.center, children: [ - _Button.dec(onPressed: _onDecrease), + _Button.dec( + onPressed: _onDecrease, + parentMaxWidth: widget.parentMaxWidth, + ), Container( - height: 42.toAutoScaledHeightWithContext(context), - width: 47.toAutoScaledWidthWithContext(context), + height: 42.toAutoScaledHeightWithParent(widget.parentMaxWidth), + width: 47.toAutoScaledWidthWithParent(widget.parentMaxWidth), decoration: BoxDecoration( color: const Color(0xFFE0E4FF), border: Border.all( @@ -61,14 +66,17 @@ class _DishCounterState extends State { '$count', textAlign: TextAlign.center, style: TextStyle( - fontSize: 12.toAutoScaledWidthWithContext(context), + fontSize: 12.toAutoScaledWidthWithParent(widget.parentMaxWidth), fontWeight: FontWeight.w600, color: const Color(0xFF3D54FF), ), ), ), ), - _Button.inc(onPressed: _onIncrease), + _Button.inc( + onPressed: _onIncrease, + parentMaxWidth: widget.parentMaxWidth, + ), ], ); } @@ -77,10 +85,19 @@ class _DishCounterState extends State { class _Button extends StatelessWidget { final IconData symbol; final VoidCallback onPressed; + final double parentMaxWidth; - const _Button.dec({super.key, required this.onPressed}) : symbol = Icons.remove; + const _Button.dec({ + super.key, + required this.onPressed, + required this.parentMaxWidth, + }) : symbol = Icons.remove; - const _Button.inc({super.key, required this.onPressed}) : symbol = Icons.add; + const _Button.inc({ + super.key, + required this.onPressed, + required this.parentMaxWidth, + }) : symbol = Icons.add; @override Widget build(BuildContext context) { @@ -89,8 +106,8 @@ class _Button extends StatelessWidget { return InkWell( onTap: onPressed, child: Container( - height: 42.toAutoScaledHeightWithContext(context), - width: 36.toAutoScaledWidthWithContext(context), + height: 42.toAutoScaledHeightWithParent(parentMaxWidth), + width: 36.toAutoScaledWidthWithParent(parentMaxWidth), decoration: BoxDecoration( color: const Color(0xFF3D54FF), borderRadius: BorderRadius.only( @@ -102,7 +119,7 @@ class _Button extends StatelessWidget { ), child: Icon( symbol, - size: 16.toAutoScaledWidthWithContext(context), + size: 16.toAutoScaledWidthWithParent(parentMaxWidth), color: Colors.white, ), ), diff --git a/lib/app/responsive.dart b/lib/app/responsive.dart index 7117a3b..3044356 100644 --- a/lib/app/responsive.dart +++ b/lib/app/responsive.dart @@ -14,6 +14,12 @@ extension Responsive on num { return this * widthFactor; } + double toAutoScaledWidthWithParent(double maxWidth) { + final widthFactor = ResponsiveDesign.widthScaleFactorWithParent(maxWidth); + + return this * widthFactor; + } + double get toAutoScaledHeight { final widthFactor = ResponsiveDesign.widthScaleFactor; @@ -25,6 +31,12 @@ extension Responsive on num { return this * widthFactor; } + + double toAutoScaledHeightWithParent(double maxWidth) { + final widthFactor = ResponsiveDesign.widthScaleFactorWithParent(maxWidth); + + return this * widthFactor; + } } class ResponsiveDesign { @@ -39,5 +51,8 @@ class ResponsiveDesign { static double heightScaleFactorWithContext(BuildContext context) => MediaQuery.of(context).size.height / _designHeight; + static double heightScaleFactorWithParent(double height) => height / _designHeight; + static double widthScaleFactorWithContext(BuildContext context) => MediaQuery.of(context).size.width / _designWidth; + static double widthScaleFactorWithParent(double width) => width / _designWidth; } diff --git a/lib/presentation/categories/controller.dart b/lib/presentation/categories/controller.dart index 70aa434..3d2418a 100644 --- a/lib/presentation/categories/controller.dart +++ b/lib/presentation/categories/controller.dart @@ -14,6 +14,7 @@ class _CategoryController extends GetxController { ExplorexData data; late Rx selectedMenu; late Rx selectedCategory; + RxDouble maxWidth = Get.size.width.obs; // State variables END bool get hasData => data.code == 0; diff --git a/lib/presentation/categories/view.dart b/lib/presentation/categories/view.dart index eafc2c8..031511b 100644 --- a/lib/presentation/categories/view.dart +++ b/lib/presentation/categories/view.dart @@ -5,6 +5,7 @@ import 'package:explorex/app/helpers.dart'; import 'package:explorex/app/responsive.dart'; import 'package:explorex/domains/explorex_data.dart'; import 'package:flutter/material.dart'; +import 'package:flutter/rendering.dart'; import 'package:flutter_svg/svg.dart'; import 'package:get/get.dart'; @@ -41,37 +42,46 @@ class CategoryPage extends StatelessWidget { return WillPopScope( onWillPop: controller._returnToMenuScreen, - child: Scaffold( - backgroundColor: Colors.transparent, - body: Column( - crossAxisAlignment: CrossAxisAlignment.stretch, - children: [ - const _CloseButton(), - 8.toAutoScaledHeightWithContext(context).toVerticalSpace, - Container( - padding: EdgeInsets.only( - top: 24.toAutoScaledHeightWithContext(context), - bottom: 16.toAutoScaledWidthWithContext(context), - ), - decoration: const BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.only( - topLeft: Radius.circular(16), - topRight: Radius.circular(16), + child: LayoutBuilder( + builder: (context, constraints) { + final maxWidth = constraints.maxWidth; + + controller.maxWidth.value = maxWidth; + + return Scaffold( + backgroundColor: Colors.transparent, + body: Column( + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + 80.toAutoScaledHeightWithParent(maxWidth).toVerticalSpace, + const _CloseButton(), + 8.toAutoScaledHeightWithParent(maxWidth).toVerticalSpace, + Container( + padding: EdgeInsets.only( + top: 24.toAutoScaledHeightWithParent(maxWidth), + bottom: 16.toAutoScaledWidthWithParent(maxWidth), + ), + decoration: const BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.only( + topLeft: Radius.circular(16), + topRight: Radius.circular(16), + ), + ), + child: const MenuType(), ), - ), - child: const MenuType(), - ), - const Divider( - height: 0.5, - color: Color(0xFFA9AAAE), + const Divider( + height: 0.5, + color: Color(0xFFA9AAAE), + ), + const _CategoryHeader(), + const _CategoryList(), + ], ), - const _CategoryHeader(), - const _CategoryList(), - ], - ), - floatingActionButton: _ScrollDownButton(), - floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat, + floatingActionButton: const _ScrollDownButton(), + floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat, + ); + }, ), ); } diff --git a/lib/presentation/categories/widgets/category_header.dart b/lib/presentation/categories/widgets/category_header.dart index a22b363..7b0a4db 100644 --- a/lib/presentation/categories/widgets/category_header.dart +++ b/lib/presentation/categories/widgets/category_header.dart @@ -11,29 +11,33 @@ class _CategoryHeader extends StatelessWidget { final categoriesCount = controller.generateCategoriesMap(selectedMenu).length; - return Container( - decoration: BoxDecoration( - color: Colors.white, - border: Border.all( - width: 0, + return Obx(() { + final maxWidth = controller.maxWidth.value; + + return Container( + decoration: BoxDecoration( color: Colors.white, + border: Border.all( + width: 0, + color: Colors.white, + ), + ), + padding: EdgeInsets.only( + top: 24.toAutoScaledHeightWithParent(maxWidth), + bottom: 8.toAutoScaledHeightWithParent(maxWidth), + left: 16.toAutoScaledWidthWithParent(maxWidth), + right: 16.toAutoScaledWidthWithParent(maxWidth), ), - ), - padding: EdgeInsets.only( - top: 24.toAutoScaledHeightWithContext(context), - bottom: 8.toAutoScaledHeightWithContext(context), - left: 16.toAutoScaledWidthWithContext(context), - right: 16.toAutoScaledWidthWithContext(context), - ), - child: Text( - "CATEGORIES ($categoriesCount)", - style: TextStyle( - fontSize: 12.toAutoScaledWidthWithContext(context), - fontWeight: FontWeight.w600, - color: Color(0xFFA9AAAE), + child: Text( + "CATEGORIES ($categoriesCount)", + style: TextStyle( + fontSize: 12.toAutoScaledWidthWithParent(maxWidth), + fontWeight: FontWeight.w600, + color: Color(0xFFA9AAAE), + ), ), - ), - ); + ); + }); }); } } diff --git a/lib/presentation/categories/widgets/category_image.dart b/lib/presentation/categories/widgets/category_image.dart index 6ae0c81..1e926f1 100644 --- a/lib/presentation/categories/widgets/category_image.dart +++ b/lib/presentation/categories/widgets/category_image.dart @@ -16,6 +16,7 @@ class _CategoryImage extends StatelessWidget { () { final selectedMenu = controller.selectedMenu; final isSelected = selectedMenu.value.id == menu.id; + final maxWidth = controller.maxWidth.value; return InkWell( onTap: () { @@ -50,19 +51,19 @@ class _CategoryImage extends StatelessWidget { errorBuilder: (context, error, stackTrace) { return Image.asset( "assets/images/no_image.jpeg", - height: 36.toAutoScaledHeightWithContext(context), - width: 164.toAutoScaledWidthWithContext(context), + height: 36.toAutoScaledHeightWithParent(maxWidth), + width: 164.toAutoScaledWidthWithParent(maxWidth), fit: BoxFit.cover, ); }, - height: 36.toAutoScaledHeightWithContext(context), - width: 164.toAutoScaledWidthWithContext(context), + height: 36.toAutoScaledHeightWithParent(maxWidth), + width: 164.toAutoScaledWidthWithParent(maxWidth), fit: BoxFit.cover, ), ), Positioned( - bottom: 9.toAutoScaledHeightWithContext(context), - left: 16.toAutoScaledWidthWithContext(context), + bottom: 9.toAutoScaledHeightWithParent(maxWidth), + left: 16.toAutoScaledWidthWithParent(maxWidth), child: SizedBox( width: 100, child: Text( @@ -70,7 +71,7 @@ class _CategoryImage extends StatelessWidget { maxLines: 1, overflow: TextOverflow.ellipsis, style: TextStyle( - fontSize: 12.toAutoScaledWidthWithContext(context), + fontSize: 12.toAutoScaledWidthWithParent(maxWidth), fontWeight: FontWeight.w800, color: Colors.white, ), diff --git a/lib/presentation/categories/widgets/category_list.dart b/lib/presentation/categories/widgets/category_list.dart index 74216d2..2d06caa 100644 --- a/lib/presentation/categories/widgets/category_list.dart +++ b/lib/presentation/categories/widgets/category_list.dart @@ -11,6 +11,7 @@ class _CategoryList extends StatelessWidget { final selectedMenu = controller.selectedMenu.value; final selectedCategory = controller.selectedCategory.value; final categoriesMap = controller.generateCategoriesMap(selectedMenu); + final maxWidth = controller.maxWidth.value; return Expanded( child: Container( @@ -18,7 +19,7 @@ class _CategoryList extends StatelessWidget { child: SingleChildScrollView( child: Column( children: [ - 8.toAutoScaledHeightWithContext(context).toVerticalSpace, + 8.toAutoScaledHeightWithParent(maxWidth).toVerticalSpace, ...categoriesMap.entries .map( (e) => _CategoryTile( @@ -28,7 +29,7 @@ class _CategoryList extends StatelessWidget { ), ) .toList(), - 20.toAutoScaledHeightWithContext(context).toVerticalSpace, + 20.toAutoScaledHeightWithParent(maxWidth).toVerticalSpace, ], ), ), diff --git a/lib/presentation/categories/widgets/category_tile.dart b/lib/presentation/categories/widgets/category_tile.dart index 8f4bfe8..cfec776 100644 --- a/lib/presentation/categories/widgets/category_tile.dart +++ b/lib/presentation/categories/widgets/category_tile.dart @@ -18,62 +18,66 @@ class _CategoryTile extends StatelessWidget { final controller = Get.find<_CategoryController>(); - return InkWell( - onTap: () { - controller.onCategoryTilePressed(value); - }, - child: Container( - margin: EdgeInsets.symmetric( - horizontal: 16.toAutoScaledWidthWithContext(context), - vertical: 4.toAutoScaledHeightWithContext(context), - ), - padding: EdgeInsets.symmetric( - horizontal: 8.toAutoScaledWidthWithContext(context), - vertical: 12.toAutoScaledHeightWithContext(context), - ), - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(8), - color: isSelected ? const Color(0xFFE0E4FF) : Colors.white, - ), - child: Row( - children: [ - Transform.scale( - scale: 1.1, - child: Radio( - fillColor: const MaterialStatePropertyAll(Color(0xFF3D54FF)), - value: value, - groupValue: selectedValue, - onChanged: (_) {}, - visualDensity: VisualDensity.compact, - materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, + return Obx(() { + final maxWidth = controller.maxWidth.value; + + return InkWell( + onTap: () { + controller.onCategoryTilePressed(value); + }, + child: Container( + margin: EdgeInsets.symmetric( + horizontal: 16.toAutoScaledWidthWithParent(maxWidth), + vertical: 4.toAutoScaledHeightWithParent(maxWidth), + ), + padding: EdgeInsets.symmetric( + horizontal: 8.toAutoScaledWidthWithParent(maxWidth), + vertical: 12.toAutoScaledHeightWithParent(maxWidth), + ), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(8), + color: isSelected ? const Color(0xFFE0E4FF) : Colors.white, + ), + child: Row( + children: [ + Transform.scale( + scale: 1.1, + child: Radio( + fillColor: const MaterialStatePropertyAll(Color(0xFF3D54FF)), + value: value, + groupValue: selectedValue, + onChanged: (_) {}, + visualDensity: VisualDensity.compact, + materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, + ), + ), + 12.toAutoScaledWidthWithParent(maxWidth).toHorizontalSpace, + SizedBox( + width: 220.toAutoScaledWidthWithParent(maxWidth), + child: Text( + value, + maxLines: 2, + overflow: TextOverflow.ellipsis, + style: TextStyle( + color: isSelected ? const Color(0xFF3D54FF) : Colors.black, + fontSize: 12.toAutoScaledWidthWithParent(maxWidth), + fontWeight: isSelected ? FontWeight.w700 : FontWeight.w400, + ), + ), ), - ), - 12.toAutoScaledWidthWithContext(context).toHorizontalSpace, - SizedBox( - width: 220.toAutoScaledWidthWithContext(context), - child: Text( - value, - maxLines: 2, - overflow: TextOverflow.ellipsis, + const Expanded(child: SizedBox()), + Text( + "($valueCount)", style: TextStyle( color: isSelected ? const Color(0xFF3D54FF) : Colors.black, - fontSize: 12.toAutoScaledWidthWithContext(context), + fontSize: 12.toAutoScaledWidthWithParent(maxWidth), fontWeight: isSelected ? FontWeight.w700 : FontWeight.w400, ), ), - ), - const Expanded(child: SizedBox()), - Text( - "($valueCount)", - style: TextStyle( - color: isSelected ? const Color(0xFF3D54FF) : Colors.black, - fontSize: 12.toAutoScaledWidthWithContext(context), - fontWeight: isSelected ? FontWeight.w700 : FontWeight.w400, - ), - ), - ], + ], + ), ), - ), - ); + ); + }); } } diff --git a/lib/presentation/categories/widgets/close_button.dart b/lib/presentation/categories/widgets/close_button.dart index 1c9ce63..0989469 100644 --- a/lib/presentation/categories/widgets/close_button.dart +++ b/lib/presentation/categories/widgets/close_button.dart @@ -7,13 +7,17 @@ class _CloseButton extends StatelessWidget { Widget build(BuildContext context) { final controller = Get.find<_CategoryController>(); - return IconButton( - onPressed: controller._returnToMenuScreen, - icon: SvgPicture.asset( - "assets/icons/close_icon.svg", - height: 24.toAutoScaledHeightWithContext(context), - width: 24.toAutoScaledWidthWithContext(context), - ), - ); + return Obx(() { + final maxWidth = controller.maxWidth.value; + + return IconButton( + onPressed: controller._returnToMenuScreen, + icon: SvgPicture.asset( + "assets/icons/close_icon.svg", + height: 24.toAutoScaledHeightWithParent(maxWidth), + width: 24.toAutoScaledWidthWithParent(maxWidth), + ), + ); + }); } } diff --git a/lib/presentation/categories/widgets/menu_types.dart b/lib/presentation/categories/widgets/menu_types.dart index 6ff06fd..deb6d1f 100644 --- a/lib/presentation/categories/widgets/menu_types.dart +++ b/lib/presentation/categories/widgets/menu_types.dart @@ -10,29 +10,33 @@ class MenuType extends StatelessWidget { final menus = controller.data.description.menus; final menuTypeLength = menus.length; - return Padding( - padding: EdgeInsets.symmetric(horizontal: 16.toAutoScaledWidthWithContext(context)), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - "MENU TYPE ($menuTypeLength)", - style: TextStyle( - color: const Color(0xFFA9AAAE), - fontSize: 12.toAutoScaledWidthWithContext(context), - fontWeight: FontWeight.w600, + return Obx(() { + final maxWidth = controller.maxWidth.value; + + return Padding( + padding: EdgeInsets.symmetric(horizontal: 16.toAutoScaledWidthWithParent(maxWidth)), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + "MENU TYPE ($menuTypeLength)", + style: TextStyle( + color: const Color(0xFFA9AAAE), + fontSize: 12.toAutoScaledWidthWithParent(maxWidth), + fontWeight: FontWeight.w600, + ), ), - ), - ...menus - .map( - (m) => Padding( - padding: EdgeInsets.only(top: 16.toAutoScaledHeightWithContext(context)), - child: _CategoryImage(menu: m), - ), - ) - .toList(), - ], - ), - ); + ...menus + .map( + (m) => Padding( + padding: EdgeInsets.only(top: 16.toAutoScaledHeightWithParent(maxWidth)), + child: _CategoryImage(menu: m), + ), + ) + .toList(), + ], + ), + ); + }); } } diff --git a/lib/presentation/categories/widgets/scroll_down_button.dart b/lib/presentation/categories/widgets/scroll_down_button.dart index 19df068..8b85814 100644 --- a/lib/presentation/categories/widgets/scroll_down_button.dart +++ b/lib/presentation/categories/widgets/scroll_down_button.dart @@ -61,43 +61,49 @@ class _ScrollDownButtonState extends State<_ScrollDownButton> with SingleTickerP @override Widget build(BuildContext context) { - return InkWell( - child: Padding( - padding: EdgeInsets.only(bottom: padding.toAutoScaledHeightWithContext(context)), - child: Material( - elevation: 26, - borderRadius: BorderRadius.circular(40), - child: Container( - decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.circular(40), - ), - padding: EdgeInsets.only( - top: 24.toAutoScaledHeightWithContext(context) - padding.toAutoScaledHeightWithContext(context), - left: 10.toAutoScaledWidthWithContext(context), - right: 10.toAutoScaledWidthWithContext(context), - bottom: 12.toAutoScaledHeightWithContext(context), - ), - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - Icon( - Icons.keyboard_arrow_down_rounded, - size: 24.toAutoScaledWidthWithContext(context), - ), - 4.toAutoScaledHeightWithContext(context).toVerticalSpace, - Text( - 'Scroll\nDown', - textAlign: TextAlign.center, - style: TextStyle( - fontSize: 8.toAutoScaledWidthWithContext(context), + final controller = Get.find<_CategoryController>(); + + return Obx(() { + final maxWidth = controller.maxWidth.value; + + return InkWell( + child: Padding( + padding: EdgeInsets.only(bottom: padding.toAutoScaledHeightWithParent(maxWidth)), + child: Material( + elevation: 26, + borderRadius: BorderRadius.circular(40), + child: Container( + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(40), + ), + padding: EdgeInsets.only( + top: 24.toAutoScaledHeightWithParent(maxWidth) - padding.toAutoScaledHeightWithParent(maxWidth), + left: 10.toAutoScaledWidthWithParent(maxWidth), + right: 10.toAutoScaledWidthWithParent(maxWidth), + bottom: 12.toAutoScaledHeightWithParent(maxWidth), + ), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Icon( + Icons.keyboard_arrow_down_rounded, + size: 24.toAutoScaledWidthWithParent(maxWidth), ), - ), - ], + 4.toAutoScaledHeightWithParent(maxWidth).toVerticalSpace, + Text( + 'Scroll\nDown', + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 8.toAutoScaledWidthWithParent(maxWidth), + ), + ), + ], + ), ), ), ), - ), - ); + ); + }); } } diff --git a/lib/presentation/dish/controller.dart b/lib/presentation/dish/controller.dart index 290bdfa..7a1e433 100644 --- a/lib/presentation/dish/controller.dart +++ b/lib/presentation/dish/controller.dart @@ -5,6 +5,8 @@ class _DishController extends GetxController { final Entry dishEntry; + RxDouble maxWidth = Get.size.width.obs; + @override void onReady() { log('onReady'); diff --git a/lib/presentation/dish/view.dart b/lib/presentation/dish/view.dart index f96b04f..957ff4f 100644 --- a/lib/presentation/dish/view.dart +++ b/lib/presentation/dish/view.dart @@ -36,22 +36,28 @@ class _DishPageState extends State { @override Widget build(BuildContext context) { - final _ = Get.put(_DishController(dishEntry: widget.dishEntry)); + final controller = Get.put(_DishController(dishEntry: widget.dishEntry)); return Scaffold( key: ObjectKey(widget.dishEntry), backgroundColor: Colors.transparent, - body: Column( - crossAxisAlignment: CrossAxisAlignment.stretch, - children: [ - const Expanded(child: SizedBox()), - const _CloseButton(), - 8.toAutoScaledHeightWithContext(context).toVerticalSpace, - const _ImageHeader(), - const _DishHeader(), - const _ButtonRow(), - ], - ), + body: LayoutBuilder(builder: (context, constraints) { + final maxWidth = constraints.maxWidth; + + controller.maxWidth.value = maxWidth; + + return Column( + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + const Expanded(child: SizedBox()), + const _CloseButton(), + 8.toAutoScaledHeightWithParent(maxWidth).toVerticalSpace, + const _ImageHeader(), + const _DishHeader(), + const _ButtonRow(), + ], + ); + }), ); } } diff --git a/lib/presentation/dish/widgets/button_row.dart b/lib/presentation/dish/widgets/button_row.dart index 19d282c..9b48fa5 100644 --- a/lib/presentation/dish/widgets/button_row.dart +++ b/lib/presentation/dish/widgets/button_row.dart @@ -9,62 +9,66 @@ class _ButtonRow extends StatelessWidget { final price = controller.dishEntry.sellingPrice; - return Container( - decoration: BoxDecoration( - color: Colors.white, - border: Border.all( - width: 0, + return Obx(() { + final maxWidth = controller.maxWidth.value; + + return Container( + decoration: BoxDecoration( color: Colors.white, + border: Border.all( + width: 0, + color: Colors.white, + ), ), - ), - padding: EdgeInsets.only( - right: 16.toAutoScaledWidthWithContext(context), - left: 32.toAutoScaledWidthWithContext(context), - bottom: 16.toAutoScaledHeightWithContext(context), - top: 16.toAutoScaledHeightWithContext(context), - ), - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - const DishCounter(initialCount: 1), - 16.toAutoScaledWidthWithContext(context).toHorizontalSpace, - InkWell( - onTap: Get.back, - child: Container( - width: 176.toAutoScaledWidthWithContext(context), - height: 42.toAutoScaledHeightWithContext(context), - padding: EdgeInsets.symmetric( - horizontal: 16.toAutoScaledWidthWithContext(context), - ), - decoration: BoxDecoration( - color: Color(0xFF3D54FF), - borderRadius: BorderRadius.circular(8), - ), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Text( - "Add to Cart", - style: TextStyle( - color: Colors.white, - fontWeight: FontWeight.w600, - fontSize: 12.toAutoScaledWidthWithContext(context), + padding: EdgeInsets.only( + right: 16.toAutoScaledWidthWithParent(maxWidth), + left: 32.toAutoScaledWidthWithParent(maxWidth), + bottom: 16.toAutoScaledHeightWithParent(maxWidth), + top: 16.toAutoScaledHeightWithParent(maxWidth), + ), + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + DishCounter(initialCount: 1, parentMaxWidth: maxWidth), + 16.toAutoScaledWidthWithParent(maxWidth).toHorizontalSpace, + InkWell( + onTap: Get.back, + child: Container( + width: 176.toAutoScaledWidthWithParent(maxWidth), + height: 42.toAutoScaledHeightWithParent(maxWidth), + padding: EdgeInsets.symmetric( + horizontal: 16.toAutoScaledWidthWithParent(maxWidth), + ), + decoration: BoxDecoration( + color: Color(0xFF3D54FF), + borderRadius: BorderRadius.circular(8), + ), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + "Add to Cart", + style: TextStyle( + color: Colors.white, + fontWeight: FontWeight.w600, + fontSize: 12.toAutoScaledWidthWithParent(maxWidth), + ), ), - ), - Text( - "₹$price", - style: TextStyle( - color: Colors.white, - fontWeight: FontWeight.w600, - fontSize: 12.toAutoScaledWidthWithContext(context), + Text( + "₹$price", + style: TextStyle( + color: Colors.white, + fontWeight: FontWeight.w600, + fontSize: 12.toAutoScaledWidthWithParent(maxWidth), + ), ), - ), - ], + ], + ), ), ), - ), - ], - ), - ); + ], + ), + ); + }); } } diff --git a/lib/presentation/dish/widgets/close_button.dart b/lib/presentation/dish/widgets/close_button.dart index 00bc2e4..678e544 100644 --- a/lib/presentation/dish/widgets/close_button.dart +++ b/lib/presentation/dish/widgets/close_button.dart @@ -5,15 +5,19 @@ class _CloseButton extends StatelessWidget { @override Widget build(BuildContext context) { - final _ = Get.find<_DishController>(); + final controller = Get.find<_DishController>(); - return IconButton( - onPressed: Get.back, - icon: SvgPicture.asset( - "assets/icons/close_icon.svg", - height: 24.toAutoScaledHeightWithContext(context), - width: 24.toAutoScaledWidthWithContext(context), - ), - ); + return Obx(() { + final maxWidth = controller.maxWidth.value; + + return IconButton( + onPressed: Get.back, + icon: SvgPicture.asset( + "assets/icons/close_icon.svg", + height: 24.toAutoScaledHeightWithParent(maxWidth), + width: 24.toAutoScaledWidthWithParent(maxWidth), + ), + ); + }); } } diff --git a/lib/presentation/dish/widgets/dish_header.dart b/lib/presentation/dish/widgets/dish_header.dart index 69fcca1..ba9f30f 100644 --- a/lib/presentation/dish/widgets/dish_header.dart +++ b/lib/presentation/dish/widgets/dish_header.dart @@ -11,59 +11,63 @@ class _DishHeader extends StatelessWidget { final description = dish.description?.isEmpty ?? true ? "No description " : dish.description!; - return Container( - decoration: BoxDecoration( - color: Colors.white, - border: Border.all( - width: 0, + return Obx(() { + final maxWidth = controller.maxWidth.value; + + return Container( + decoration: BoxDecoration( color: Colors.white, + border: Border.all( + width: 0, + color: Colors.white, + ), ), - ), - padding: EdgeInsets.only( - bottom: 16.toAutoScaledHeightWithContext(context), - left: 16.toAutoScaledWidthWithContext(context), - right: 16.toAutoScaledWidthWithContext(context), - ), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisSize: MainAxisSize.min, - children: [ - Row( - children: [ - SvgPicture.asset( - "assets/icons/${_meatStatusAsset(dish.meatStatus)}", - height: 16.toAutoScaledHeightWithContext(context), - width: 16.toAutoScaledWidthWithContext(context), - ), - 8.toAutoScaledWidthWithContext(context).toHorizontalSpace, - Text( - dish.name, - style: TextStyle( - fontSize: 16.toAutoScaledWidthWithContext(context), - fontWeight: FontWeight.w600, + padding: EdgeInsets.only( + bottom: 16.toAutoScaledHeightWithParent(maxWidth), + left: 16.toAutoScaledWidthWithParent(maxWidth), + right: 16.toAutoScaledWidthWithParent(maxWidth), + ), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisSize: MainAxisSize.min, + children: [ + Row( + children: [ + SvgPicture.asset( + "assets/icons/${_meatStatusAsset(dish.meatStatus)}", + height: 16.toAutoScaledHeightWithParent(maxWidth), + width: 16.toAutoScaledWidthWithParent(maxWidth), ), - ), - ], - ), - 16.toAutoScaledHeightWithContext(context).toVerticalSpace, - ConstrainedBox( - constraints: BoxConstraints( - maxHeight: 78.toAutoScaledHeightWithContext(context), - minHeight: 78.toAutoScaledHeightWithContext(context), + 8.toAutoScaledWidthWithParent(maxWidth).toHorizontalSpace, + Text( + dish.name, + style: TextStyle( + fontSize: 16.toAutoScaledWidthWithParent(maxWidth), + fontWeight: FontWeight.w600, + ), + ), + ], ), - child: SingleChildScrollView( - child: Text( - description, - style: TextStyle( - fontSize: 12.toAutoScaledWidthWithContext(context), - color: Color(0xFFA9AAAE), + 16.toAutoScaledHeightWithParent(maxWidth).toVerticalSpace, + ConstrainedBox( + constraints: BoxConstraints( + maxHeight: 78.toAutoScaledHeightWithParent(maxWidth), + minHeight: 78.toAutoScaledHeightWithParent(maxWidth), + ), + child: SingleChildScrollView( + child: Text( + description, + style: TextStyle( + fontSize: 12.toAutoScaledWidthWithParent(maxWidth), + color: Color(0xFFA9AAAE), + ), ), ), ), - ), - ], - ), - ); + ], + ), + ); + }); } String _meatStatusAsset(MeatStatus? meatStatus) { diff --git a/lib/presentation/dish/widgets/image_header.dart b/lib/presentation/dish/widgets/image_header.dart index 35be919..9d15c66 100644 --- a/lib/presentation/dish/widgets/image_header.dart +++ b/lib/presentation/dish/widgets/image_header.dart @@ -11,39 +11,43 @@ class _ImageHeader extends StatelessWidget { final imageUrl = dish.hasImage ? dish.image! : ''; - return Container( - padding: EdgeInsets.symmetric( - vertical: 16.toAutoScaledHeightWithContext(context), - horizontal: 16.toAutoScaledWidthWithContext(context), - ), - decoration: BoxDecoration( - color: Colors.white, - border: Border.all( - width: 0, - color: Colors.white, + return Obx(() { + final maxWidth = controller.maxWidth.value; + + return Container( + padding: EdgeInsets.symmetric( + vertical: 16.toAutoScaledHeightWithParent(maxWidth), + horizontal: 16.toAutoScaledWidthWithParent(maxWidth), ), - borderRadius: const BorderRadius.only( - topLeft: Radius.circular(16), - topRight: Radius.circular(16), + decoration: BoxDecoration( + color: Colors.white, + border: Border.all( + width: 0, + color: Colors.white, + ), + borderRadius: const BorderRadius.only( + topLeft: Radius.circular(16), + topRight: Radius.circular(16), + ), ), - ), - child: ClipRRect( - borderRadius: BorderRadius.circular(8), - child: Image.network( - imageUrl, - errorBuilder: (context, error, stackTrace) { - return Image.asset( - "assets/images/no_image.jpeg", - height: 180.toAutoScaledHeightWithContext(context), - width: 343.toAutoScaledWidthWithContext(context), - fit: BoxFit.cover, - ); - }, - height: 180.toAutoScaledHeightWithContext(context), - width: 343.toAutoScaledWidthWithContext(context), - fit: BoxFit.cover, + child: ClipRRect( + borderRadius: BorderRadius.circular(8), + child: Image.network( + imageUrl, + errorBuilder: (context, error, stackTrace) { + return Image.asset( + "assets/images/no_image.jpeg", + height: 180.toAutoScaledHeightWithParent(maxWidth), + width: 343.toAutoScaledWidthWithParent(maxWidth), + fit: BoxFit.cover, + ); + }, + height: 180.toAutoScaledHeightWithParent(maxWidth), + width: 343.toAutoScaledWidthWithParent(maxWidth), + fit: BoxFit.cover, + ), ), - ), - ); + ); + }); } } diff --git a/lib/presentation/menu/widgets/dish_card.dart b/lib/presentation/menu/widgets/dish_card.dart index 15cb69c..6d866e1 100644 --- a/lib/presentation/menu/widgets/dish_card.dart +++ b/lib/presentation/menu/widgets/dish_card.dart @@ -184,9 +184,9 @@ class _ImageData extends StatelessWidget { ), ), ), - const Align( + Align( alignment: Alignment.bottomCenter, - child: DishCounter(), + child: DishCounter(parentMaxWidth: Get.size.width), ), ], ),