From cbe4fb285b71bd2281f36bc058687dd145af42dc Mon Sep 17 00:00:00 2001 From: Mohammad Salameh Date: Tue, 16 Apr 2024 14:51:18 +0300 Subject: [PATCH] Add smart door widgets Added new widgets for a smart door feature including a door button, grid, status bar, and interface. Also included assets and functionality for door lock buttons. --- .../view/widgets/smart_door/door_button.dart | 107 +++++++++++ .../view/widgets/smart_door/door_grid.dart | 49 +++++ .../widgets/smart_door/door_interface.dart | 174 +++++++++--------- .../widgets/smart_door/door_status_bar.dart | 20 ++ 4 files changed, 261 insertions(+), 89 deletions(-) create mode 100644 lib/features/devices/view/widgets/smart_door/door_button.dart create mode 100644 lib/features/devices/view/widgets/smart_door/door_grid.dart create mode 100644 lib/features/devices/view/widgets/smart_door/door_status_bar.dart diff --git a/lib/features/devices/view/widgets/smart_door/door_button.dart b/lib/features/devices/view/widgets/smart_door/door_button.dart new file mode 100644 index 0000000..f009e8c --- /dev/null +++ b/lib/features/devices/view/widgets/smart_door/door_button.dart @@ -0,0 +1,107 @@ +import 'package:flutter/material.dart'; +import 'package:flutter/widgets.dart'; +import 'package:syncrow_app/generated/assets.dart'; +import 'package:syncrow_app/utils/resource_manager/color_manager.dart'; + +class DoorLockButton extends StatefulWidget { + const DoorLockButton({ + super.key, + }); + + @override + State createState() => _DoorLockButtonState(); +} + +class _DoorLockButtonState extends State + with SingleTickerProviderStateMixin { + late AnimationController _animationController; + late Animation _animation; + + @override + void initState() { + super.initState(); + _animationController = AnimationController( + vsync: this, + duration: const Duration(seconds: 2), + ); + _animation = Tween(begin: 0, end: 1.0).animate(_animationController) + ..addListener(() { + if (_animation.status == AnimationStatus.completed) { + //TODO send a request to lock the door but check if the door is already locked + } else if (_animation.status == AnimationStatus.dismissed) { + //TODO send a request to unlock the door but check if the door is already unlocked + } + setState(() {}); + }); + } + + @override + void dispose() { + _animationController.dispose(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return ConstrainedBox( + constraints: const BoxConstraints(maxHeight: 290, minHeight: 290), + child: InkWell( + overlayColor: MaterialStateProperty.all( + ColorsManager.primaryColor.withOpacity(.06)), + borderRadius: BorderRadius.circular(500), + onTapDown: (details) { + if (_animationController.status == AnimationStatus.dismissed) { + _animationController.forward(); + } else if (_animationController.status == AnimationStatus.completed) { + _animationController.reverse(); + } else if (_animationController.status == AnimationStatus.forward) { + _animationController.reverse(); + } else if (_animationController.status == AnimationStatus.reverse) { + _animationController.forward(); + } + }, + onTapUp: (details) { + if (_animationController.status == AnimationStatus.forward) { + _animationController.reverse(); + } else if (_animationController.status == AnimationStatus.reverse) { + _animationController.forward(); + } + }, + child: Stack( + alignment: Alignment.center, + children: [ + Container( + width: 250, + decoration: const ShapeDecoration( + shadows: [ + BoxShadow( + color: Colors.grey, + blurRadius: 18, + offset: Offset(6, 7), + blurStyle: BlurStyle.outer, + ), + ], + color: Color(0xFFEBECED), + shape: CircleBorder(), + ), + ), + SizedBox.square( + dimension: 215, + child: CircularProgressIndicator( + value: _animation.value, + backgroundColor: Colors.transparent, + valueColor: const AlwaysStoppedAnimation( + ColorsManager.primaryColor, + ), + strokeWidth: 10, + ), + ), + const Image( + image: AssetImage(Assets.doorlockAssetsDoorlockButtonTwo), + ), + ], + ), + ), + ); + } +} diff --git a/lib/features/devices/view/widgets/smart_door/door_grid.dart b/lib/features/devices/view/widgets/smart_door/door_grid.dart new file mode 100644 index 0000000..b75c47d --- /dev/null +++ b/lib/features/devices/view/widgets/smart_door/door_grid.dart @@ -0,0 +1,49 @@ +import 'package:flutter/material.dart'; +import 'package:syncrow_app/features/devices/view/widgets/smart_door/door_interface.dart'; +import 'package:syncrow_app/features/shared_widgets/default_container.dart'; +import 'package:syncrow_app/features/shared_widgets/text_widgets/body_small.dart'; + +class DoorLockGrid extends StatelessWidget { + const DoorLockGrid({ + super.key, + }); + + @override + Widget build(BuildContext context) { + return ConstrainedBox( + constraints: const BoxConstraints(maxHeight: 270), + child: GridView.builder( + // shrinkWrap: true, + physics: const NeverScrollableScrollPhysics(), + gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( + crossAxisCount: 2, + mainAxisSpacing: 10, + crossAxisSpacing: 10, + childAspectRatio: 1.75 / 1, + ), + itemCount: 4, + itemBuilder: (context, index) => DefaultContainer( + child: Column( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + ConstrainedBox( + constraints: const BoxConstraints(maxHeight: 46, maxWidth: 50), + child: Image( + image: AssetImage(doorLockButtons.values.elementAt(index)), + ), + ), + const SizedBox( + height: 15, + ), + BodySmall( + text: doorLockButtons.keys.elementAt(index), + textAlign: TextAlign.center, + ), + ], + ), + ), + ), + ); + } +} diff --git a/lib/features/devices/view/widgets/smart_door/door_interface.dart b/lib/features/devices/view/widgets/smart_door/door_interface.dart index cf2a2ff..23d065d 100644 --- a/lib/features/devices/view/widgets/smart_door/door_interface.dart +++ b/lib/features/devices/view/widgets/smart_door/door_interface.dart @@ -1,92 +1,88 @@ -// 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/generated/assets.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'; +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/devices/view/widgets/smart_door/door_button.dart'; +import 'package:syncrow_app/features/devices/view/widgets/smart_door/door_grid.dart'; +import 'package:syncrow_app/features/devices/view/widgets/smart_door/door_status_bar.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_small.dart'; +import 'package:syncrow_app/generated/assets.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 DoorInterface extends StatelessWidget { -// const DoorInterface({super.key, required this.doorlock}); +class DoorInterface extends StatelessWidget { + const DoorInterface({super.key, required this.doorlock}); -// final DeviceModel doorlock; + final DeviceModel doorlock; -// @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: doorlock.name ?? "", -// fontColor: ColorsManager.primaryColor, -// fontWeight: FontsManager.bold, -// ), -// ), -// body: Container( -// width: MediaQuery.sizeOf(context).width, -// height: MediaQuery.sizeOf(context).height, -// decoration: const BoxDecoration( -// image: DecorationImage( -// image: AssetImage( -// Assets.imagesBackground, -// ), -// fit: BoxFit.cover, -// opacity: 0.4, -// ), -// ), -// child: Padding( -// padding: EdgeInsets.only( -// top: Constants.appBarHeight, -// left: Constants.defaultPadding, -// right: Constants.defaultPadding, -// bottom: Constants.bottomNavBarHeight, -// ), -// child: Column( -// children: [ -// Row( -// mainAxisAlignment: MainAxisAlignment.spaceBetween, -// children: [ -// SvgPicture.asset(Assets.iconsWifi), -// SvgPicture.asset(Assets.iconsBatteryIndicator), -// ], -// ), -// SizedBox.square( -// dimension: 255, -// ), -// SizedBox( -// height: 80, -// ), -// GridView.builder( -// shrinkWrap: true, -// gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( -// crossAxisCount: 2, -// mainAxisSpacing: 10, -// crossAxisSpacing: 10, -// ), -// itemBuilder: (context, index) => DefaultContainer( -// child: SizedBox.shrink(), -// width: 175, -// height: 100, -// ), -// ), -// ], -// )), -// ), -// ), -// ), -// ); -// } -// } + @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: doorlock.name ?? "", + fontColor: ColorsManager.primaryColor, + fontWeight: FontsManager.bold, + ), + ), + body: Container( + width: MediaQuery.sizeOf(context).width, + height: MediaQuery.sizeOf(context).height, + decoration: const BoxDecoration( + image: DecorationImage( + image: AssetImage( + Assets.imagesBackground, + ), + fit: BoxFit.cover, + opacity: 0.4, + ), + ), + child: Padding( + padding: EdgeInsets.only( + top: Constants.appBarHeight, + left: Constants.defaultPadding, + right: Constants.defaultPadding, + // bottom: Constants.bottomNavBarHeight / 2, + ), + child: const Column( + children: [ + DoorLockStatusBar(), + Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + DoorLockButton(), + DoorLockGrid(), + SizedBox( + height: 50, + ), + ], + ) + ], + )), + ), + ), + ), + ); + } +} + +Map doorLockButtons = { + 'Unlocking Records': Assets.doorlockAssetsUnlockingRecords, + 'Memebers Managment': Assets.doorlockAssetsMembersManagement, + 'Temporary Password': Assets.doorlockAssetsTemporaryPassword, + 'Smart Linkage': Assets.doorlockAssetsSmartLinkage, +}; diff --git a/lib/features/devices/view/widgets/smart_door/door_status_bar.dart b/lib/features/devices/view/widgets/smart_door/door_status_bar.dart new file mode 100644 index 0000000..1be19d1 --- /dev/null +++ b/lib/features/devices/view/widgets/smart_door/door_status_bar.dart @@ -0,0 +1,20 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_svg/svg.dart'; +import 'package:syncrow_app/generated/assets.dart'; + +class DoorLockStatusBar extends StatelessWidget { + const DoorLockStatusBar({ + super.key, + }); + + @override + Widget build(BuildContext context) { + return Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + SvgPicture.asset(Assets.iconsWifi), + SvgPicture.asset(Assets.dmOffPerOnchargOfflowOffpmOffstDefaultdmOff), + ], + ); + } +}