Skip to content

Commit

Permalink
Restrict bottom sheet responsiveness via parent dimensions
Browse files Browse the repository at this point in the history
  • Loading branch information
thecodepapaya committed Jul 19, 2023
1 parent 0064d19 commit 584e4ed
Show file tree
Hide file tree
Showing 18 changed files with 425 additions and 334 deletions.
37 changes: 27 additions & 10 deletions lib/app/common/counter.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -46,10 +48,13 @@ class _DishCounterState extends State<DishCounter> {
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(
Expand All @@ -61,14 +66,17 @@ class _DishCounterState extends State<DishCounter> {
'$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,
),
],
);
}
Expand All @@ -77,10 +85,19 @@ class _DishCounterState extends State<DishCounter> {
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) {
Expand All @@ -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(
Expand All @@ -102,7 +119,7 @@ class _Button extends StatelessWidget {
),
child: Icon(
symbol,
size: 16.toAutoScaledWidthWithContext(context),
size: 16.toAutoScaledWidthWithParent(parentMaxWidth),
color: Colors.white,
),
),
Expand Down
15 changes: 15 additions & 0 deletions lib/app/responsive.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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 {
Expand All @@ -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;
}
1 change: 1 addition & 0 deletions lib/presentation/categories/controller.dart
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ class _CategoryController extends GetxController {
ExplorexData data;
late Rx<Menu> selectedMenu;
late Rx<String> selectedCategory;
RxDouble maxWidth = Get.size.width.obs;
// State variables END

bool get hasData => data.code == 0;
Expand Down
68 changes: 39 additions & 29 deletions lib/presentation/categories/view.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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,
);
},
),
);
}
Expand Down
44 changes: 24 additions & 20 deletions lib/presentation/categories/widgets/category_header.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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),
),
),
),
);
);
});
});
}
}
15 changes: 8 additions & 7 deletions lib/presentation/categories/widgets/category_image.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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: () {
Expand Down Expand Up @@ -50,27 +51,27 @@ 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(
menu.name,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 12.toAutoScaledWidthWithContext(context),
fontSize: 12.toAutoScaledWidthWithParent(maxWidth),
fontWeight: FontWeight.w800,
color: Colors.white,
),
Expand Down
5 changes: 3 additions & 2 deletions lib/presentation/categories/widgets/category_list.dart
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,15 @@ 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(
color: Colors.white,
child: SingleChildScrollView(
child: Column(
children: [
8.toAutoScaledHeightWithContext(context).toVerticalSpace,
8.toAutoScaledHeightWithParent(maxWidth).toVerticalSpace,
...categoriesMap.entries
.map(
(e) => _CategoryTile(
Expand All @@ -28,7 +29,7 @@ class _CategoryList extends StatelessWidget {
),
)
.toList(),
20.toAutoScaledHeightWithContext(context).toVerticalSpace,
20.toAutoScaledHeightWithParent(maxWidth).toVerticalSpace,
],
),
),
Expand Down
Loading

0 comments on commit 584e4ed

Please sign in to comment.