add custom scroll view to access managment screen and devices screen

This commit is contained in:
ashrafzarkanisala
2024-08-27 03:29:35 +03:00
parent 7d700f47dd
commit 56edcaf788
8 changed files with 403 additions and 425 deletions

View File

@ -15,304 +15,279 @@ import 'package:syncrow_web/web_layout/web_scaffold.dart';
class AccessManagementPage extends StatelessWidget { class AccessManagementPage extends StatelessWidget {
const AccessManagementPage({super.key}); const AccessManagementPage({super.key});
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size; Size size = MediaQuery.of(context).size;
return WebScaffold( return WebScaffold(
enableMenuSideba: false, enableMenuSideba: false,
appBarTitle: Row( appBarTitle: Row(
children: [ children: [
Text(
'Access Management',
style: Theme.of(context).textTheme.headlineLarge,
)
],
),
appBarBody: [
Text( Text(
'Physical Access', 'Access Management',
style: Theme.of(context) style: Theme.of(context).textTheme.headlineLarge,
.textTheme )
.headlineMedium!
.copyWith(color: Colors.white),
),
], ],
scaffoldBody: BlocProvider( ),
create: (BuildContext context) => appBarBody: [
AccessBloc()..add(FetchTableData()), Text(
child: BlocConsumer<AccessBloc, AccessState>( 'Physical Access',
listener: (context, state) {}, style: Theme.of(context)
builder: (context, state) { .textTheme
final accessBloc = BlocProvider.of<AccessBloc>(context); .headlineMedium!
final filteredData = accessBloc.filteredData; .copyWith(color: Colors.white),
return state is AccessLoaded ),
? const Center(child: CircularProgressIndicator()) ],
: Container( scaffoldBody: BlocProvider(
padding: EdgeInsets.all(30), create: (BuildContext context) => AccessBloc()..add(FetchTableData()),
height: size.height, child: BlocConsumer<AccessBloc, AccessState>(
width: size.width, listener: (context, state) {},
builder: (context, state) {
final accessBloc = BlocProvider.of<AccessBloc>(context);
final filteredData = accessBloc.filteredData;
return state is AccessLoaded
? const Center(child: CircularProgressIndicator())
: CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.all(30),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Container( _buildTabSelector(context, accessBloc, size),
decoration: containerDecoration, const SizedBox(height: 20),
height: size.height * 0.05, _buildSearchFilters(context, accessBloc, size),
child: Flexible( const SizedBox(height: 20),
child: ListView.builder( _buildActionButtons(context, accessBloc, size),
scrollDirection: Axis.horizontal, const SizedBox(height: 20),
itemCount:
BlocProvider.of<AccessBloc>(context)
.tabs
.length,
shrinkWrap: true,
itemBuilder: (context, index) {
final isSelected = index ==
BlocProvider.of<AccessBloc>(context)
.selectedIndex;
return InkWell(
onTap: () {
BlocProvider.of<AccessBloc>(context)
.add(TabChangedEvent(index));
},
child: Container(
decoration: BoxDecoration(
color: ColorsManager.boxColor,
border: Border.all(
color: isSelected
? Colors.blue
: Colors.transparent,
width: 2.0,
),
borderRadius: index == 0
? const BorderRadius.only(
topLeft:
Radius.circular(10),
bottomLeft:
Radius.circular(10))
: index == 3
? const BorderRadius.only(
topRight:
Radius.circular(10),
bottomRight:
Radius.circular(10))
: null,
),
padding: const EdgeInsets.only(
left: 10, right: 10),
child: Center(
child: Text(
BlocProvider.of<AccessBloc>(
context)
.tabs[index],
style: TextStyle(
color: isSelected
? Colors.blue
: Colors.black,
),
),
),
),
);
},
),
),
),
const SizedBox(
height: 20,
),
Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.end,
textBaseline: TextBaseline.ideographic,
children: [
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
'Name',
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(
color: Colors.black,
fontSize: 13),
),
const SizedBox(
height: 5,
),
Container(
height: 43,
width: size.width * 0.15,
decoration: containerDecoration,
child: TextFormField(
controller: accessBloc.passwordName,
style: const TextStyle(
color: Colors.black),
decoration: textBoxDecoration()!
.copyWith(
hintText: 'Please enter'),
)),
],
),
const SizedBox(
width: 15,
),
DateTimeWebWidget(
icon: Assets.calendarIcon,
isRequired: false,
title: 'Access Time',
size: size,
endTime: () {
accessBloc.add(SelectTime(
context: context, isStart: false));
},
startTime: () {
accessBloc.add(SelectTime(
context: context, isStart: true));
},
firstString:
BlocProvider.of<AccessBloc>(context)
.startTime,
secondString:
BlocProvider.of<AccessBloc>(context)
.endTime,
),
const SizedBox(
width: 15,
),
SizedBox(
height: 45,
width: size.width * 0.06,
child: Container(
decoration: containerDecoration,
child: DefaultButton(
onPressed: () {
accessBloc.add(FilterDataEvent(
selectedTabIndex: BlocProvider
.of<AccessBloc>(
context)
.selectedIndex, // Pass the selected tab index
passwordName: accessBloc
.passwordName.text
.toLowerCase(),
startTime: accessBloc
.effectiveTimeTimeStamp,
endTime: accessBloc
.expirationTimeTimeStamp));
},
borderRadius: 9,
child: const Text('Search'))),
),
const SizedBox(
width: 10,
),
SizedBox(
height: 45,
width: size.width * 0.06,
child: Container(
decoration: containerDecoration,
child: DefaultButton(
onPressed: () {
accessBloc.add(ResetSearch());
},
backgroundColor:
ColorsManager.whiteColors,
borderRadius: 9,
child: Text(
'Reset',
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(color: Colors.black),
),
),
),
),
],
),
const SizedBox(
height: 20,
),
Wrap(
children: [
Container(
width: size.width * 0.15,
decoration: containerDecoration,
child: DefaultButton(
onPressed: () {
showDialog(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return const VisitorPasswordDialog();
},
).then((v) {
if (v != null) {
accessBloc.add(FetchTableData());
}
});
},
borderRadius: 8,
child: const Text(
'+ Create Visitor Password ')),
),
const SizedBox(
width: 10,
),
Container(
width: size.width * 0.12,
decoration: containerDecoration,
child: DefaultButton(
borderRadius: 8,
backgroundColor:
ColorsManager.whiteColors,
child: Text(
'Admin Password',
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(color: Colors.black),
)))
],
),
const SizedBox(
height: 20,
),
Expanded(
child: DynamicTable(
isEmpty: filteredData.isEmpty,
withCheckBox: false,
size: size,
cellDecoration: containerDecoration,
headers: const [
'Name',
'Access Type',
'Access Period',
'Accessible Device',
'Authorizer',
'Authorization Date & Time',
'Access Status'
],
data: filteredData.map((item) {
return [
item.passwordName.toString(),
item.passwordType.value,
('${accessBloc.timestampToDate(item.effectiveTime)} - ${accessBloc.timestampToDate(item.invalidTime)}'),
item.deviceUuid.toString(),
'',
'',
item.passwordStatus.value
];
}).toList(),
)
// : const Center(child: CircularProgressIndicator()),
)
], ],
), ),
); ),
}))); ),
SliverFillRemaining(
child: DynamicTable(
isEmpty: filteredData.isEmpty,
withCheckBox: false,
size: size,
cellDecoration: containerDecoration,
headers: const [
'Name',
'Access Type',
'Access Period',
'Accessible Device',
'Authorizer',
'Authorization Date & Time',
'Access Status'
],
data: filteredData.map((item) {
return [
item.passwordName.toString(),
item.passwordType.value,
('${accessBloc.timestampToDate(item.effectiveTime)} - ${accessBloc.timestampToDate(item.invalidTime)}'),
item.deviceUuid.toString(),
'',
'',
item.passwordStatus.value
];
}).toList(),
),
),
],
);
},
),
),
);
}
Widget _buildTabSelector(
BuildContext context, AccessBloc accessBloc, Size size) {
return Container(
decoration: containerDecoration,
height: size.height * 0.05,
child: Flexible(
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: accessBloc.tabs.length,
shrinkWrap: true,
itemBuilder: (context, index) {
final isSelected = index == accessBloc.selectedIndex;
return InkWell(
onTap: () {
accessBloc.add(TabChangedEvent(index));
},
child: Container(
decoration: BoxDecoration(
color: ColorsManager.boxColor,
border: Border.all(
color: isSelected ? Colors.blue : Colors.transparent,
width: 2.0,
),
borderRadius: index == 0
? const BorderRadius.only(
topLeft: Radius.circular(10),
bottomLeft: Radius.circular(10))
: index == accessBloc.tabs.length - 1
? const BorderRadius.only(
topRight: Radius.circular(10),
bottomRight: Radius.circular(10))
: null,
),
padding: const EdgeInsets.only(left: 10, right: 10),
child: Center(
child: Text(
accessBloc.tabs[index],
style: TextStyle(
color: isSelected ? Colors.blue : Colors.black,
),
),
),
),
);
},
),
),
);
}
Widget _buildSearchFilters(
BuildContext context, AccessBloc accessBloc, Size size) {
return Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.end,
textBaseline: TextBaseline.ideographic,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Name',
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(color: Colors.black, fontSize: 13),
),
const SizedBox(height: 5),
Container(
height: 43,
width: size.width * 0.15,
decoration: containerDecoration,
child: TextFormField(
controller: accessBloc.passwordName,
style: const TextStyle(color: Colors.black),
decoration:
textBoxDecoration()!.copyWith(hintText: 'Please enter'),
),
),
],
),
const SizedBox(width: 15),
DateTimeWebWidget(
icon: Assets.calendarIcon,
isRequired: false,
title: 'Access Time',
size: size,
endTime: () {
accessBloc.add(SelectTime(context: context, isStart: false));
},
startTime: () {
accessBloc.add(SelectTime(context: context, isStart: true));
},
firstString: accessBloc.startTime,
secondString: accessBloc.endTime,
),
const SizedBox(width: 15),
SizedBox(
height: 45,
width: size.width * 0.06,
child: Container(
decoration: containerDecoration,
child: DefaultButton(
onPressed: () {
accessBloc.add(FilterDataEvent(
selectedTabIndex:
accessBloc.selectedIndex, // Pass the selected tab index
passwordName: accessBloc.passwordName.text.toLowerCase(),
startTime: accessBloc.effectiveTimeTimeStamp,
endTime: accessBloc.expirationTimeTimeStamp,
));
},
borderRadius: 9,
child: const Text('Search'),
),
),
),
const SizedBox(width: 10),
SizedBox(
height: 45,
width: size.width * 0.06,
child: Container(
decoration: containerDecoration,
child: DefaultButton(
onPressed: () {
accessBloc.add(ResetSearch());
},
backgroundColor: ColorsManager.whiteColors,
borderRadius: 9,
child: Text(
'Reset',
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(color: Colors.black),
),
),
),
),
],
);
}
Widget _buildActionButtons(
BuildContext context, AccessBloc accessBloc, Size size) {
return Wrap(
children: [
Container(
width: size.width * 0.15,
decoration: containerDecoration,
child: DefaultButton(
onPressed: () {
showDialog(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return const VisitorPasswordDialog();
},
).then((v) {
if (v != null) {
accessBloc.add(FetchTableData());
}
});
},
borderRadius: 8,
child: const Text('+ Create Visitor Password '),
),
),
const SizedBox(width: 10),
Container(
width: size.width * 0.12,
decoration: containerDecoration,
child: DefaultButton(
borderRadius: 8,
backgroundColor: ColorsManager.whiteColors,
child: Text(
'Admin Password',
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(color: Colors.black),
),
),
)
],
);
} }
} }

View File

@ -47,11 +47,9 @@ class _DynamicTableState extends State<DynamicTable> {
void _toggleRowSelection(int index) { void _toggleRowSelection(int index) {
setState(() { setState(() {
// Deselect all rows
for (int i = 0; i < _selected.length; i++) { for (int i = 0; i < _selected.length; i++) {
_selected[i] = false; _selected[i] = false;
} }
// Select the clicked row
_selected[index] = true; _selected[index] = true;
if (widget.onRowSelected != null) { if (widget.onRowSelected != null) {
@ -64,85 +62,80 @@ class _DynamicTableState extends State<DynamicTable> {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Container( return Container(
decoration: widget.cellDecoration, decoration: widget.cellDecoration,
child: Padding( child: SingleChildScrollView(
padding: const EdgeInsets.all(2.0), scrollDirection: Axis.horizontal,
child: ListView( child: SizedBox(
scrollDirection: Axis.horizontal, width: widget.size.width,
children: [ child: Column(
SizedBox( children: [
width: widget.size.width, Container(
child: Column( decoration: widget.headerDecoration ??
children: [ BoxDecoration(color: Colors.grey[200]),
Container( child: Row(
decoration: widget.headerDecoration ?? children: [
BoxDecoration(color: Colors.grey[200]), if (widget.withCheckBox) _buildSelectAllCheckbox(),
child: Row( ...widget.headers
children: [ .map((header) => _buildTableHeaderCell(header))
if (widget.withCheckBox) _buildSelectAllCheckbox(), .toList(),
...widget.headers ],
.map((header) => _buildTableHeaderCell(header)) ),
.toList(), ),
], widget.isEmpty
), ? Expanded(
), child: Column(
widget.isEmpty mainAxisAlignment: MainAxisAlignment.center,
? Expanded( children: [
child: Column( Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
Row( Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
Column( SvgPicture.asset(Assets.emptyTable),
children: [ const SizedBox(
SvgPicture.asset(Assets.emptyTable), height: 15,
const SizedBox(
height: 15,
),
Text(
'No Devices',
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(
color: ColorsManager.grayColor),
)
],
), ),
Text(
'No Devices',
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(
color: ColorsManager.grayColor),
)
], ],
), ),
], ],
), ),
) ],
: Expanded( ),
child: Container( )
color: Colors.white, : Expanded(
child: ListView.builder( child: Container(
shrinkWrap: true, color: Colors.white,
itemCount: widget.data.length, child: ListView.builder(
itemBuilder: (context, index) { shrinkWrap: true,
final row = widget.data[index]; itemCount: widget.data.length,
return Row( itemBuilder: (context, index) {
children: [ final row = widget.data[index];
if (widget.withCheckBox) return Row(
_buildRowCheckbox( children: [
index, widget.size.height * 0.10), if (widget.withCheckBox)
...row _buildRowCheckbox(
.map((cell) => _buildTableCell( index, widget.size.height * 0.10),
cell.toString(), ...row
widget.size.height * 0.10)) .map((cell) => _buildTableCell(
.toList(), cell.toString(),
], widget.size.height * 0.10))
); .toList(),
}, ],
), );
), },
), ),
], ),
), ),
), ],
], ),
), ),
), ),
); );
@ -150,7 +143,7 @@ class _DynamicTableState extends State<DynamicTable> {
Widget _buildSelectAllCheckbox() { Widget _buildSelectAllCheckbox() {
return Container( return Container(
width: 50, // Fixed width to align with the checkbox column width: 50,
padding: const EdgeInsets.all(8.0), padding: const EdgeInsets.all(8.0),
decoration: const BoxDecoration( decoration: const BoxDecoration(
border: Border.symmetric( border: Border.symmetric(
@ -159,14 +152,14 @@ class _DynamicTableState extends State<DynamicTable> {
), ),
child: Checkbox( child: Checkbox(
value: _selected.every((element) => element == true), value: _selected.every((element) => element == true),
onChanged: null, // Disabling the toggle as we're not using select all onChanged: null,
), ),
); );
} }
Widget _buildRowCheckbox(int index, double size) { Widget _buildRowCheckbox(int index, double size) {
return Container( return Container(
width: 50, // Fixed width to align with the checkbox column width: 50,
padding: const EdgeInsets.all(8.0), padding: const EdgeInsets.all(8.0),
height: size, height: size,
decoration: const BoxDecoration( decoration: const BoxDecoration(
@ -214,7 +207,6 @@ class _DynamicTableState extends State<DynamicTable> {
} }
Widget _buildTableCell(String content, double size) { Widget _buildTableCell(String content, double size) {
// Check if the content is a battery level percentage
bool isBatteryLevel = content.endsWith('%'); bool isBatteryLevel = content.endsWith('%');
double? batteryLevel; double? batteryLevel;

View File

@ -36,7 +36,7 @@ class AcDeviceControl extends StatelessWidget with HelperResponsiveLayout {
: isMedium : isMedium
? 2 ? 2
: 1, : 1,
mainAxisExtent: 133, mainAxisExtent: 140,
crossAxisSpacing: 12, crossAxisSpacing: 12,
mainAxisSpacing: 12, mainAxisSpacing: 12,
), ),

View File

@ -48,52 +48,61 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
'Low Battery ($lowBatteryCount)', 'Low Battery ($lowBatteryCount)',
]; ];
return Container( return CustomScrollView(
padding: isLargeScreenSize(context) slivers: [
? const EdgeInsets.all(30) SliverToBoxAdapter(
: const EdgeInsets.all(15), child: Container(
height: context.screenHeight, padding: isLargeScreenSize(context)
width: context.screenWidth, ? const EdgeInsets.all(30)
child: Column( : const EdgeInsets.all(15),
crossAxisAlignment: CrossAxisAlignment.start, child: Column(
children: [ crossAxisAlignment: CrossAxisAlignment.start,
FilterWidget( children: [
size: MediaQuery.of(context).size, FilterWidget(
tabs: tabs, size: MediaQuery.of(context).size,
selectedIndex: selectedIndex, tabs: tabs,
onTabChanged: (index) { selectedIndex: selectedIndex,
context onTabChanged: (index) {
.read<DeviceManagementBloc>() context
.add(SelectedFilterChanged(index)); .read<DeviceManagementBloc>()
}, .add(SelectedFilterChanged(index));
), },
const SizedBox(height: 20), ),
const DeviceSearchFilters(), const SizedBox(height: 20),
const SizedBox(height: 12), const DeviceSearchFilters(),
Container( const SizedBox(height: 12),
height: 43, Container(
width: isSmallScreenSize(context) ? double.infinity : 100, height: 43,
decoration: containerDecoration, width: isSmallScreenSize(context) ? double.infinity : 100,
child: Center( decoration: containerDecoration,
child: DefaultButton( child: Center(
onPressed: () { child: DefaultButton(
final selectedDevice = onPressed: () {
context.read<DeviceManagementBloc>().selectedDevice; final selectedDevice = context
if (selectedDevice != null) { .read<DeviceManagementBloc>()
showDialog( .selectedDevice;
context: context, if (selectedDevice != null) {
builder: (context) => showDialog(
DeviceControlDialog(device: selectedDevice), context: context,
); builder: (context) =>
} DeviceControlDialog(device: selectedDevice),
}, );
borderRadius: 9, }
child: const Text('Control'), },
), borderRadius: 9,
child: const Text('Control'),
),
),
),
],
), ),
), ),
const SizedBox(height: 12), ),
Expanded( SliverFillRemaining(
child: Padding(
padding: isLargeScreenSize(context)
? const EdgeInsets.all(30)
: const EdgeInsets.all(15),
child: DynamicTable( child: DynamicTable(
cellDecoration: containerDecoration, cellDecoration: containerDecoration,
onRowSelected: (index, isSelected, row) { onRowSelected: (index, isSelected, row) {
@ -136,8 +145,8 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
isEmpty: devicesToShow.isEmpty, isEmpty: devicesToShow.isEmpty,
), ),
), ),
], ),
), ],
); );
}, },
); );

View File

@ -45,14 +45,18 @@ class CeilingSensorControls extends StatelessWidget
); );
}, },
onClose: () { onClose: () {
context.read<CeilingSensorBloc>().add(BackToCeilingGridViewEvent()); context
.read<CeilingSensorBloc>()
.add(BackToCeilingGridViewEvent());
}, },
); );
} else if (state is ShowCeilingDescriptionState) { } else if (state is ShowCeilingDescriptionState) {
return DescriptionView( return DescriptionView(
description: state.description, description: state.description,
onClose: () { onClose: () {
context.read<CeilingSensorBloc>().add(BackToCeilingGridViewEvent()); context
.read<CeilingSensorBloc>()
.add(BackToCeilingGridViewEvent());
}, },
); );
} else if (state is CeilingReportsFailedState) { } else if (state is CeilingReportsFailedState) {
@ -77,7 +81,7 @@ class CeilingSensorControls extends StatelessWidget
: isMedium : isMedium
? 2 ? 2
: 1, : 1,
mainAxisExtent: 133, mainAxisExtent: 140,
crossAxisSpacing: 12, crossAxisSpacing: 12,
mainAxisSpacing: 12, mainAxisSpacing: 12,
), ),
@ -125,19 +129,17 @@ class CeilingSensorControls extends StatelessWidget
), ),
), ),
PresenceUpdateData( PresenceUpdateData(
value: value: (model.noBodyTime.toDouble() / 3600).roundToDouble(),
(model.noBodyTime.toDouble() / 3600).roundToDouble(),
title: 'Nobody Time:', title: 'Nobody Time:',
minValue: 0, minValue: 0,
maxValue: 300000, maxValue: 300000,
steps: 5000, steps: 5000,
description: 'hr', description: 'hr',
action: (int value) => context action: (int value) =>
.read<CeilingSensorBloc>() context.read<CeilingSensorBloc>().add(CeilingChangeValueEvent(
.add(CeilingChangeValueEvent( code: 'none_body_time',
code: 'none_body_time', value: value,
value: value, ))),
))),
GestureDetector( GestureDetector(
onTap: () { onTap: () {
context.read<CeilingSensorBloc>().add(GetCeilingDeviceReportsEvent( context.read<CeilingSensorBloc>().add(GetCeilingDeviceReportsEvent(

View File

@ -34,7 +34,7 @@ class GateWayControls extends StatelessWidget with HelperResponsiveLayout {
: isMedium : isMedium
? 2 ? 2
: 1, : 1,
mainAxisExtent: 133, mainAxisExtent: 140,
crossAxisSpacing: 12, crossAxisSpacing: 12,
mainAxisSpacing: 12, mainAxisSpacing: 12,
), ),

View File

@ -47,7 +47,7 @@ class LivingRoomDeviceControl extends StatelessWidget
: isMedium : isMedium
? 2 ? 2
: 1, : 1,
mainAxisExtent: 133, mainAxisExtent: 140,
crossAxisSpacing: 12, crossAxisSpacing: 12,
mainAxisSpacing: 12, mainAxisSpacing: 12,
), ),

View File

@ -75,7 +75,7 @@ class WallSensorControls extends StatelessWidget with HelperResponsiveLayout {
: isMedium : isMedium
? 2 ? 2
: 1, : 1,
mainAxisExtent: 133, mainAxisExtent: 140,
crossAxisSpacing: 12, crossAxisSpacing: 12,
mainAxisSpacing: 12, mainAxisSpacing: 12,
), ),