Added ceiling sensor interface

Add a new widget for displaying the interface of a ceiling sensor device.
This widget includes UI elements to show sensor data and control options.
This commit is contained in:
Mohammad Salameh
2024-04-18 09:51:23 +03:00
parent 1ec1ae76b0
commit b433cd07e6
2 changed files with 214 additions and 0 deletions

View File

@ -0,0 +1,211 @@
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_app/features/devices/model/device_model.dart';
import 'package:syncrow_app/features/shared_widgets/default_container.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_large.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_medium.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_small.dart';
import 'package:syncrow_app/generated/assets.dart';
import 'package:syncrow_app/utils/context_extension.dart';
import 'package:syncrow_app/utils/resource_manager/color_manager.dart';
import 'package:syncrow_app/utils/resource_manager/constants.dart';
import 'package:syncrow_app/utils/resource_manager/font_manager.dart';
class CeilingSensorInterface extends StatelessWidget {
const CeilingSensorInterface({super.key, required this.ceilingSensor});
final DeviceModel ceilingSensor;
@override
Widget build(BuildContext context) {
return AnnotatedRegion(
value: SystemUiOverlayStyle(
statusBarColor: ColorsManager.primaryColor.withOpacity(0.5),
statusBarIconBrightness: Brightness.light,
),
child: SafeArea(
child: Scaffold(
backgroundColor: ColorsManager.backgroundColor,
extendBodyBehindAppBar: true,
extendBody: true,
appBar: AppBar(
backgroundColor: Colors.transparent,
centerTitle: true,
title: BodyLarge(
text: ceilingSensor.name ?? "",
fontColor: ColorsManager.primaryColor,
fontWeight: FontsManager.bold,
),
),
body: Container(
width: MediaQuery.sizeOf(context).width,
height: MediaQuery.sizeOf(context).height,
padding: const EdgeInsets.all(Constants.defaultPadding),
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage(
Assets.imagesBackground,
),
fit: BoxFit.cover,
opacity: 0.4,
),
),
child: Column(
children: [
const Spacer(),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SvgPicture.asset(
Assets.presenceSensorAssetsPresenceSensorMotion,
width: 100,
height: 100,
),
BodyMedium(
text: 'Motion',
style: context.bodyMedium.copyWith(
fontWeight: FontsManager.bold,
),
),
],
),
const Spacer(),
SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: [
DefaultContainer(
padding: const EdgeInsets.symmetric(
vertical: 20, horizontal: 15),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Column(
mainAxisSize: MainAxisSize.min,
children: [
const BodySmall(text: 'Sports Para'),
BodyLarge(
text: '0',
style: context.bodyLarge.copyWith(
fontWeight: FontsManager.bold,
),
),
],
),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 10),
child: Container(
width: 1,
height: 45,
color: ColorsManager.greyColor,
),
),
Column(
mainAxisSize: MainAxisSize.min,
children: [
const BodySmall(text: 'Detection Range'),
BodyLarge(
text: '0.0M',
style: context.bodyLarge.copyWith(
fontWeight: FontsManager.bold,
),
),
],
),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 10),
child: Container(
width: 1,
height: 45,
color: ColorsManager.greyColor,
),
),
Column(
mainAxisSize: MainAxisSize.min,
children: [
const BodySmall(text: 'Movement'),
BodyLarge(
text: 'none',
style: context.bodyLarge.copyWith(
fontWeight: FontsManager.bold,
),
),
],
),
],
)),
const SizedBox(
height: 15,
),
...List.generate(
ceilingSensorButtons.length,
(index) => DefaultContainer(
margin: const EdgeInsets.only(bottom: 5),
padding: const EdgeInsets.symmetric(
vertical: 12, horizontal: 20),
onTap: () {
if (ceilingSensorButtons[index]['page'] != null) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
ceilingSensorButtons[index]['page']
as Widget,
),
);
}
},
child: Row(
children: [
SvgPicture.asset(
ceilingSensorButtons[index]['icon'] as String,
// width: 30,
// height: 50,
),
const SizedBox(
width: 25,
),
BodyMedium(
text: ceilingSensorButtons[index]['title']
as String,
style: context.bodyMedium.copyWith(
fontWeight: FontsManager.bold,
),
),
],
),
),
),
],
),
),
],
)),
),
),
);
}
}
var ceilingSensorButtons = [
{
'title': 'Parameter Settings',
'icon': Assets.presenceSensorAssetsParameterSettings,
'page': null,
},
{
'title': 'Induction History',
'icon': Assets.presenceSensorAssetsInductionRecording,
'page': null,
},
{
'title': 'Help Description',
'icon': Assets.presenceSensorAssetsHelpDescription,
'page': null,
},
];

View File

@ -11,6 +11,7 @@ import 'package:syncrow_app/features/devices/bloc/devices_cubit.dart';
import 'package:syncrow_app/features/devices/model/device_model.dart';
import 'package:syncrow_app/features/devices/view/widgets/ACs/ac_interface.dart';
import 'package:syncrow_app/features/devices/view/widgets/lights/light_interface.dart';
import 'package:syncrow_app/features/devices/view/widgets/presence_sensors/ceiling_sensor_interface.dart';
import 'package:syncrow_app/features/devices/view/widgets/smart_door/door_interface.dart';
import 'package:syncrow_app/features/devices/view/widgets/three_gang/three_gang_interface.dart';
import 'package:syncrow_app/features/shared_widgets/custom_switch.dart';
@ -87,6 +88,8 @@ void showDeviceInterface(DeviceModel device, BuildContext context) {
case DeviceType.WallSensor:
break;
case DeviceType.CeilingSensor:
navigateToInterface(
CeilingSensorInterface(ceilingSensor: device), context);
break;
case DeviceType.Curtain:
break;