ammar/syncrow-web
1
0
Fork 0
mirror of https://github.com/SyncrowIOT/web.git synced 2025-07-09 22:57:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor AddDeviceTypeWidget and ProductTypeCard Components:

Browse Source 
- Replaced ProductTypeCard with ProductsGrid in AddDeviceTypeWidget for improved layout and maintainability.
- Converted ProductTypeCardCounter from StatefulWidget to StatelessWidget, simplifying its implementation.
- Updated ProductTypeCard to accept count and increment/decrement callbacks, enhancing its reusability and interaction.
- Introduced ProductsGrid to manage product display in a grid format, improving UI organization and responsiveness.
This commit is contained in:
Faris Armoush
2025-07-07 10:15:33 +03:00
parent f0bfe085a4
commit df87e41d61
4 changed files with 93 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
lib/pages/space_management_v2/modules/tags/presentation/widgets/add_device_type_widget.dart
View File

@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_web/pages/space_management_v2/modules/products/data/services/remote_products_service.dart';
import 'package:syncrow_web/pages/space_management_v2/modules/products/presentation/bloc/products_bloc.dart';
import 'package:syncrow_web/pages/space_management_v2/modules/tags/presentation/widgets/product_type_card.dart';
import 'package:syncrow_web/pages/space_management_v2/modules/tags/presentation/widgets/products_grid.dart';
import 'package:syncrow_web/services/api/http_service.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart';
@ -12,13 +12,6 @@ class AddDeviceTypeWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
final crossAxisCount = switch (context.screenWidth) {
> 1200 => 8,
> 800 => 5,
_ => 3,
};
return BlocProvider(
create: (_) => ProductsBloc(RemoteProductsService(HTTPService()))
..add(const LoadProducts()),
@ -27,57 +20,24 @@ class AddDeviceTypeWidget extends StatelessWidget {
title: const Text('Add Devices'),
backgroundColor: ColorsManager.whiteColors,
content: BlocBuilder<ProductsBloc, ProductsState>(
builder: (context, state) {
return switch (state) {
ProductsInitial() => const Center(
child: CircularProgressIndicator(),
),
ProductsLoading() => const Center(
child: CircularProgressIndicator(),
),
ProductsLoaded(:final products) => SingleChildScrollView(
child: Container(
width: size.width * 0.9,
height: size.height * 0.65,
decoration: BoxDecoration(
color: ColorsManager.textFieldGreyColor,
borderRadius: BorderRadius.circular(8),
),
child: Column(
children: [
const SizedBox(height: 16),
Expanded(
child: GridView.builder(
padding: const EdgeInsets.symmetric(
horizontal: 20,
),
shrinkWrap: true,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: crossAxisCount,
mainAxisSpacing: 6,
crossAxisSpacing: 4,
childAspectRatio: 0.8,
),
itemCount: products.length,
itemBuilder: (context, index) => ProductTypeCard(
product: products[index],
),
),
),
],
),
builder: (context, state) => switch (state) {
ProductsInitial() => const Center(
child: CircularProgressIndicator(),
),
ProductsLoading() => const Center(
child: CircularProgressIndicator(),
),
ProductsLoaded(:final products) => ProductsGrid(
products: products,
),
ProductsFailure(:final errorMessage) => Center(
child: Text(
errorMessage,
style: context.textTheme.bodyMedium?.copyWith(
color: context.theme.colorScheme.error,
),
),
ProductsFailure(:final errorMessage) => Center(
child: Text(
errorMessage,
style: context.textTheme.bodyMedium?.copyWith(
color: context.theme.colorScheme.error,
),
),
),
};
),
},
),
),

23
lib/pages/space_management_v2/modules/tags/presentation/widgets/product_type_card.dart
View File

@ -1,6 +1,6 @@
import 'package:flutter/material.dart';
import 'package:syncrow_web/pages/space_management_v2/modules/products/domain/models/product.dart';
import 'package:syncrow_web/pages/spaces_management/all_spaces/widgets/counter_widget.dart';
import 'package:syncrow_web/pages/space_management_v2/modules/tags/presentation/widgets/product_type_card_counter.dart';
import 'package:syncrow_web/pages/spaces_management/tag_model/widgets/device_icon_widget.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart';
@ -8,9 +8,16 @@ import 'package:syncrow_web/utils/extension/build_context_x.dart';
class ProductTypeCard extends StatelessWidget {
const ProductTypeCard({
required this.product,
required this.count,
required this.onIncrement,
required this.onDecrement,
super.key,
});
final Product product;
final int count;
final void Function() onIncrement;
final void Function() onDecrement;
@override
Widget build(BuildContext context) {
@ -27,16 +34,12 @@ class ProductTypeCard extends StatelessWidget {
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: DeviceIconWidget(
icon: product.icon,
),
),
Expanded(child: DeviceIconWidget(icon: product.icon)),
_buildName(context, product.name),
CounterWidget(
isCreate: false,
initialCount: 0,
onCountChanged: (newCount) {},
ProductTypeCardCounter(
onIncrement: onIncrement,
onDecrement: onDecrement,
count: count,
),
const SizedBox(height: 4),
],

19
lib/pages/space_management_v2/modules/tags/presentation/widgets/product_type_card_counter.dart
View File

@ -1,7 +1,8 @@
import 'package:flutter/material.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart';
class ProductTypeCardCounter extends StatefulWidget {
class ProductTypeCardCounter extends StatelessWidget {
const ProductTypeCardCounter({
super.key,
required this.onIncrement,
@ -10,19 +11,11 @@ class ProductTypeCardCounter extends StatefulWidget {
});
final int count;
final void Function() onIncrement;
final void Function() onDecrement;
@override
State<ProductTypeCardCounter> createState() => _ProductTypeCardCounterState();
}
class _ProductTypeCardCounterState extends State<ProductTypeCardCounter> {
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
decoration: BoxDecoration(
@ -35,15 +28,15 @@ class _ProductTypeCardCounterState extends State<ProductTypeCardCounter> {
children: [
_buildCounterButton(
Icons.remove,
widget.onDecrement,
onDecrement,
),
Text(
widget.count.toString(),
style: theme.textTheme.bodyLarge?.copyWith(
count.toString(),
style: context.textTheme.bodyLarge?.copyWith(
color: ColorsManager.spaceColor,
),
),
_buildCounterButton(Icons.add, widget.onIncrement),
_buildCounterButton(Icons.add, onIncrement),
],
),
);

57
lib/pages/space_management_v2/modules/tags/presentation/widgets/products_grid.dart Normal file
View File

@ -0,0 +1,57 @@
import 'package:flutter/material.dart';
import 'package:syncrow_web/pages/space_management_v2/modules/products/domain/models/product.dart';
import 'package:syncrow_web/pages/space_management_v2/modules/tags/presentation/widgets/product_type_card.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart';
class ProductsGrid extends StatelessWidget {
const ProductsGrid({required this.products, super.key});
final List<Product> products;
@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
final crossAxisCount = switch (context.screenWidth) {
> 1200 => 8,
> 800 => 5,
_ => 3,
};
return SingleChildScrollView(
child: Container(
width: size.width * 0.9,
height: size.height * 0.65,
decoration: BoxDecoration(
color: ColorsManager.textFieldGreyColor,
borderRadius: BorderRadius.circular(8),
),
child: Column(
children: [
const SizedBox(height: 16),
Expanded(
child: GridView.builder(
padding: const EdgeInsets.symmetric(
horizontal: 20,
),
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: crossAxisCount,
mainAxisSpacing: 6,
crossAxisSpacing: 4,
childAspectRatio: 0.8,
),
itemCount: products.length,
itemBuilder: (context, index) => ProductTypeCard(
product: products[index],
count: 0,
onIncrement: () {},
onDecrement: () {},
),
),
),
],
),
),
);
}
}