mirror of
https://github.com/SyncrowIOT/syncrow-app.git
synced 2025-11-26 22:14:55 +00:00
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.
This commit is contained in:
Mohammad Salameh
107
lib/features/devices/view/widgets/smart_door/door_button.dart
Normal file
107
lib/features/devices/view/widgets/smart_door/door_button.dart
Normal file
@ -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<DoorLockButton> createState() => _DoorLockButtonState();
|
||||
}
|
||||
|
||||
class _DoorLockButtonState extends State<DoorLockButton>
|
||||
with SingleTickerProviderStateMixin {
|
||||
late AnimationController _animationController;
|
||||
late Animation<double> _animation;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_animationController = AnimationController(
|
||||
vsync: this,
|
||||
duration: const Duration(seconds: 2),
|
||||
);
|
||||
_animation = Tween<double>(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<Color>(
|
||||
ColorsManager.primaryColor,
|
||||
),
|
||||
strokeWidth: 10,
|
||||
),
|
||||
),
|
||||
const Image(
|
||||
image: AssetImage(Assets.doorlockAssetsDoorlockButtonTwo),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
49
lib/features/devices/view/widgets/smart_door/door_grid.dart
Normal file
49
lib/features/devices/view/widgets/smart_door/door_grid.dart
Normal file
@ -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,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -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<String, String> doorLockButtons = {
|
||||
'Unlocking Records': Assets.doorlockAssetsUnlockingRecords,
|
||||
'Memebers Managment': Assets.doorlockAssetsMembersManagement,
|
||||
'Temporary Password': Assets.doorlockAssetsTemporaryPassword,
|
||||
'Smart Linkage': Assets.doorlockAssetsSmartLinkage,
|
||||
};
|
||||
|
||||
@ -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),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user