mirror of
https://github.com/SyncrowIOT/web.git
synced 2025-07-10 15:17:31 +00:00
fixed overflow issue for add widget
This commit is contained in:
@ -46,40 +46,50 @@ class _AddDeviceWidgetState extends State<AddDeviceWidget> {
|
|||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
final size = MediaQuery.of(context).size;
|
final size = MediaQuery.of(context).size;
|
||||||
|
|
||||||
|
// Adjust the GridView properties based on screen width
|
||||||
|
final crossAxisCount = size.width > 1200
|
||||||
|
? 8
|
||||||
|
: size.width > 800
|
||||||
|
? 5
|
||||||
|
: 3;
|
||||||
|
|
||||||
return AlertDialog(
|
return AlertDialog(
|
||||||
title: const Text('Add Devices'),
|
title: const Text('Add Devices'),
|
||||||
backgroundColor: ColorsManager.whiteColors,
|
backgroundColor: ColorsManager.whiteColors,
|
||||||
content: Container(
|
content: SingleChildScrollView(
|
||||||
width: size.width * 0.65,
|
child: Container(
|
||||||
height: size.height * 0.57,
|
width: size.width * 0.9,
|
||||||
color: ColorsManager.textFieldGreyColor,
|
height: size.height * 0.65,
|
||||||
child: Column(
|
color: ColorsManager.textFieldGreyColor,
|
||||||
children: [
|
child: Column(
|
||||||
const SizedBox(height: 16),
|
children: [
|
||||||
Expanded(
|
const SizedBox(height: 16),
|
||||||
child: Padding(
|
Expanded(
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 20.0),
|
child: Padding(
|
||||||
child: Scrollbar(
|
padding: const EdgeInsets.symmetric(horizontal: 20.0),
|
||||||
controller: _scrollController,
|
child: Scrollbar(
|
||||||
thumbVisibility: false,
|
|
||||||
child: GridView.builder(
|
|
||||||
controller: _scrollController,
|
controller: _scrollController,
|
||||||
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
|
thumbVisibility: false,
|
||||||
crossAxisCount: 6,
|
child: GridView.builder(
|
||||||
mainAxisSpacing: 10,
|
shrinkWrap: true,
|
||||||
crossAxisSpacing: 10,
|
controller: _scrollController,
|
||||||
childAspectRatio: 0.7,
|
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
|
||||||
|
crossAxisCount: crossAxisCount,
|
||||||
|
mainAxisSpacing: 6,
|
||||||
|
crossAxisSpacing: 4,
|
||||||
|
childAspectRatio: .8,
|
||||||
|
),
|
||||||
|
itemCount: widget.products?.length ?? 0,
|
||||||
|
itemBuilder: (context, index) {
|
||||||
|
final product = widget.products![index];
|
||||||
|
return _buildDeviceTypeTile(product, size);
|
||||||
|
},
|
||||||
),
|
),
|
||||||
itemCount: widget.products?.length ?? 0,
|
|
||||||
itemBuilder: (context, index) {
|
|
||||||
final product = widget.products![index];
|
|
||||||
return _buildDeviceTypeTile(product);
|
|
||||||
},
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
],
|
||||||
],
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
actions: [
|
actions: [
|
||||||
@ -101,15 +111,15 @@ class _AddDeviceWidgetState extends State<AddDeviceWidget> {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
Widget _buildDeviceTypeTile(ProductModel product) {
|
Widget _buildDeviceTypeTile(ProductModel product, Size size) {
|
||||||
final selectedProduct = productCounts.firstWhere(
|
final selectedProduct = productCounts.firstWhere(
|
||||||
(p) => p.productId == product.uuid,
|
(p) => p.productId == product.uuid,
|
||||||
orElse: () => SelectedProduct(productId: product.uuid, count: 0),
|
orElse: () => SelectedProduct(productId: product.uuid, count: 0),
|
||||||
);
|
);
|
||||||
|
|
||||||
return SizedBox(
|
return SizedBox(
|
||||||
width: 75,
|
width: size.width * 0.12,
|
||||||
height: 90,
|
height: size.height * 0.15,
|
||||||
child: Card(
|
child: Card(
|
||||||
elevation: 2,
|
elevation: 2,
|
||||||
color: ColorsManager.whiteColors,
|
color: ColorsManager.whiteColors,
|
||||||
@ -117,14 +127,15 @@ class _AddDeviceWidgetState extends State<AddDeviceWidget> {
|
|||||||
borderRadius: BorderRadius.circular(8),
|
borderRadius: BorderRadius.circular(8),
|
||||||
),
|
),
|
||||||
child: Padding(
|
child: Padding(
|
||||||
padding: const EdgeInsets.all(6.0),
|
padding: const EdgeInsets.all(4.0),
|
||||||
child: Column(
|
child: Column(
|
||||||
mainAxisAlignment: MainAxisAlignment.center,
|
mainAxisAlignment: MainAxisAlignment.start,
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.center,
|
||||||
children: [
|
children: [
|
||||||
_buildDeviceIcon(product),
|
_buildDeviceIcon(product, size),
|
||||||
const SizedBox(height: 8),
|
const SizedBox(height: 4),
|
||||||
_buildDeviceName(product),
|
_buildDeviceName(product, size),
|
||||||
const SizedBox(height: 8),
|
const SizedBox(height: 4),
|
||||||
CounterWidget(
|
CounterWidget(
|
||||||
initialCount: selectedProduct.count,
|
initialCount: selectedProduct.count,
|
||||||
onCountChanged: (newCount) {
|
onCountChanged: (newCount) {
|
||||||
@ -153,10 +164,10 @@ class _AddDeviceWidgetState extends State<AddDeviceWidget> {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
Widget _buildDeviceIcon(ProductModel product) {
|
Widget _buildDeviceIcon(ProductModel product, Size size) {
|
||||||
return Container(
|
return Container(
|
||||||
height: 80,
|
height: size.width > 800 ? 50 : 40,
|
||||||
width: 80,
|
width: size.width > 800 ? 50 : 40,
|
||||||
decoration: BoxDecoration(
|
decoration: BoxDecoration(
|
||||||
shape: BoxShape.circle,
|
shape: BoxShape.circle,
|
||||||
color: ColorsManager.textFieldGreyColor,
|
color: ColorsManager.textFieldGreyColor,
|
||||||
@ -168,16 +179,16 @@ class _AddDeviceWidgetState extends State<AddDeviceWidget> {
|
|||||||
child: Center(
|
child: Center(
|
||||||
child: SvgPicture.asset(
|
child: SvgPicture.asset(
|
||||||
product.icon ?? Assets.sensors,
|
product.icon ?? Assets.sensors,
|
||||||
width: 45,
|
width: size.width > 800 ? 30 : 20,
|
||||||
height: 45,
|
height: size.width > 800 ? 30 : 20,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
Widget _buildDeviceName(ProductModel product) {
|
Widget _buildDeviceName(ProductModel product, Size size) {
|
||||||
return SizedBox(
|
return SizedBox(
|
||||||
height: 35,
|
height: size.width > 800 ? 35 : 25,
|
||||||
child: Text(
|
child: Text(
|
||||||
product.name ?? '',
|
product.name ?? '',
|
||||||
style: context.textTheme.bodySmall?.copyWith(color: ColorsManager.blackColor),
|
style: context.textTheme.bodySmall?.copyWith(color: ColorsManager.blackColor),
|
||||||
@ -195,7 +206,7 @@ class _AddDeviceWidgetState extends State<AddDeviceWidget> {
|
|||||||
VoidCallback onPressed,
|
VoidCallback onPressed,
|
||||||
) {
|
) {
|
||||||
return SizedBox(
|
return SizedBox(
|
||||||
width: 200,
|
width: 120,
|
||||||
child: DefaultButton(
|
child: DefaultButton(
|
||||||
onPressed: onPressed,
|
onPressed: onPressed,
|
||||||
backgroundColor: backgroundColor,
|
backgroundColor: backgroundColor,
|
||||||
|
Reference in New Issue
Block a user