ammar/syncrow-app
1
0
Fork 0
mirror of https://github.com/SyncrowIOT/syncrow-app.git synced 2026-10-23 08:07:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added the curtain interface

Browse Source
This commit is contained in:
Mohammad Salameh
2024-05-07 12:26:54 +03:00
parent fbe2f5fe53
commit 923e7a2d02
8 changed files with 398 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/icons/curtainsIcon/closeCurtain.svg
+56
View File
@@ -0,0 +1,56 @@
<svg width="106" height="106" viewBox="0 0 106 106" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_1285_461)">
<g filter="url(#filter1_i_1285_461)">
<path d="M85 55C85 38.4315 71.5685 25 55 25C38.4315 25 25 38.4315 25 55C25 71.5685 38.4315 85 55 85C71.5685 85 85 71.5685 85 55Z" fill="#EBECED"/>
</g>
<g filter="url(#filter2_ddi_1285_461)">
<path d="M75.2843 55.2842C75.2843 44.2385 66.33 35.2842 55.2843 35.2842C44.2386 35.2842 35.2843 44.2385 35.2843 55.2842C35.2843 66.3299 44.2386 75.2842 55.2843 75.2842C66.33 75.2842 75.2843 66.3299 75.2843 55.2842Z" fill="#F9F9F9"/>
</g>
<path d="M67.0139 65L57.0001 55L57.0011 54.9988L67.0139 45L69.7649 47.7472L62.5033 54.9988L62.5022 55L69.7649 62.2528L67.0139 65Z" fill="#023DFE" fill-opacity="0.6"/>
<path d="M42.7511 45L52.765 55L52.7639 55.0012L42.7511 65L40.0001 62.2528L47.263 55L40.0001 47.7472L42.7511 45Z" fill="#023DFE" fill-opacity="0.6"/>
</g>
<defs>
<filter id="filter0_d_1285_461" x="22" y="22" width="68" height="68" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="1" dy="1"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1285_461"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1285_461" result="shape"/>
</filter>
<filter id="filter1_i_1285_461" x="25" y="25" width="65" height="65" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="5" dy="5"/>
<feGaussianBlur stdDeviation="15"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1285_461"/>
</filter>
<filter id="filter2_ddi_1285_461" x="0.284302" y="0.28418" width="105" height="105" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="5" dy="5"/>
<feGaussianBlur stdDeviation="12.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1285_461"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="-5" dy="-5"/>
<feGaussianBlur stdDeviation="15"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_1285_461" result="effect2_dropShadow_1285_461"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1285_461" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="5" dy="5"/>
<feGaussianBlur stdDeviation="15"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/>
<feBlend mode="normal" in2="shape" result="effect3_innerShadow_1285_461"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

assets/icons/curtainsIcon/curtainHolder.svg
+34
View File
@@ -0,0 +1,34 @@
<svg width="273" height="19" viewBox="0 0 273 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.31 0H3.37V18.0724H1.31C0.59 18.0724 0 17.5304 0 16.8688V1.2036C0 0.542081 0.59 0 1.31 0Z" fill="url(#paint0_linear_1285_507)"/>
<path d="M268.85 0H270.91C271.63 0 272.22 0.542082 272.22 1.2036V16.8597C272.22 17.5212 271.63 18.0633 270.91 18.0633H268.85V0Z" fill="url(#paint1_linear_1285_507)"/>
<path d="M3.37012 18.0723L268.89 18.0723V-0.000181198L3.37012 -0.000181198V18.0723Z" fill="url(#paint2_linear_1285_507)"/>
<path style="mix-blend-mode:multiply" opacity="0.1" d="M268.89 0H265.1V18.0724H268.89V0Z" fill="url(#paint3_linear_1285_507)"/>
<path style="mix-blend-mode:multiply" opacity="0.1" d="M7.16 0H3.37V18.0724H7.16V0Z" fill="url(#paint4_linear_1285_507)"/>
<path style="mix-blend-mode:multiply" opacity="0.3" d="M268.89 16.3359H3.37012V18.0724H268.89V16.3359Z" fill="url(#paint5_linear_1285_507)"/>
<defs>
<linearGradient id="paint0_linear_1285_507" x1="0" y1="9.03163" x2="3.37" y2="9.03163" gradientUnits="userSpaceOnUse">
<stop stop-color="#B8B8B8"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint1_linear_1285_507" x1="268.85" y1="9.03163" x2="272.22" y2="9.03163" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#B8B8B8"/>
</linearGradient>
<linearGradient id="paint2_linear_1285_507" x1="136.13" y1="26.9385" x2="136.13" y2="-8.12222" gradientUnits="userSpaceOnUse">
<stop offset="0.19" stop-color="white"/>
<stop offset="1" stop-color="#B8B8B8"/>
</linearGradient>
<linearGradient id="paint3_linear_1285_507" x1="265.55" y1="9.03163" x2="268.99" y2="9.03163" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1"/>
</linearGradient>
<linearGradient id="paint4_linear_1285_507" x1="6.71" y1="9.03163" x2="3.27" y2="9.03163" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1"/>
</linearGradient>
<linearGradient id="paint5_linear_1285_507" x1="136.13" y1="16.5289" x2="136.13" y2="18.1092" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

assets/icons/curtainsIcon/openCurtain.svg
+56
View File
@@ -0,0 +1,56 @@
<svg width="106" height="106" viewBox="0 0 106 106" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_1285_477)">
<g filter="url(#filter1_i_1285_477)">
<path d="M85 55C85 38.4315 71.5685 25 55 25C38.4315 25 25 38.4315 25 55C25 71.5685 38.4315 85 55 85C71.5685 85 85 71.5685 85 55Z" fill="#EBECED"/>
</g>
<g filter="url(#filter2_ddi_1285_477)">
<path d="M75.2843 55.2842C75.2843 44.2385 66.33 35.2842 55.2843 35.2842C44.2386 35.2842 35.2843 44.2385 35.2843 55.2842C35.2843 66.3299 44.2386 75.2842 55.2843 75.2842C66.33 75.2842 75.2843 66.3299 75.2843 55.2842Z" fill="#F9F9F9"/>
</g>
<path d="M50.0139 65L40.0001 55L40.0011 54.9988L50.0139 45L52.7649 47.7472L45.5033 54.9988L45.5022 55L52.7649 62.2528L50.0139 65Z" fill="#023DFE" fill-opacity="0.6"/>
<path d="M59.751 45L69.7648 55L69.7638 55.0012L59.751 65L57 62.2528L64.2628 55L57 47.7472L59.751 45Z" fill="#023DFE" fill-opacity="0.6"/>
</g>
<defs>
<filter id="filter0_d_1285_477" x="22" y="22" width="68" height="68" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="1" dy="1"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1285_477"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1285_477" result="shape"/>
</filter>
<filter id="filter1_i_1285_477" x="25" y="25" width="65" height="65" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="5" dy="5"/>
<feGaussianBlur stdDeviation="15"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1285_477"/>
</filter>
<filter id="filter2_ddi_1285_477" x="0.284302" y="0.28418" width="105" height="105" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="5" dy="5"/>
<feGaussianBlur stdDeviation="12.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1285_477"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="-5" dy="-5"/>
<feGaussianBlur stdDeviation="15"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_1285_477" result="effect2_dropShadow_1285_477"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1285_477" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="5" dy="5"/>
<feGaussianBlur stdDeviation="15"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/>
<feBlend mode="normal" in2="shape" result="effect3_innerShadow_1285_477"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

assets/icons/curtainsIcon/verticalBlade.svg
+32
View File
@@ -0,0 +1,32 @@
<svg width="33" height="319" viewBox="0 0 33 319" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.559326 6.07198V318.219L2.69933 319V5.29102L0.559326 6.07198Z" fill="url(#paint0_linear_1285_538)"/>
<path d="M32.7092 315.619L2.69922 319V5.29102L32.7092 8.68132V315.619Z" fill="url(#paint1_linear_1285_538)"/>
<path d="M15.2593 0.0722656H20.1493V7.5144C20.1493 8.50669 19.2693 9.31522 18.1893 9.31522H17.2193C16.1393 9.31522 15.2593 8.50669 15.2593 7.5144V0.0722656Z" fill="url(#paint2_linear_1285_538)"/>
<defs>
<linearGradient id="paint0_linear_1285_538" x1="-48.9107" y1="20.5612" x2="42.5356" y2="323.172" gradientUnits="userSpaceOnUse">
<stop stop-color="#E9E9E9"/>
<stop offset="0.26" stop-color="#E4E4E4"/>
<stop offset="0.51" stop-color="#D8D8D8"/>
<stop offset="0.77" stop-color="#C4C4C4"/>
<stop offset="0.78" stop-color="#C4C4C4"/>
<stop offset="1" stop-color="#C6C6C6"/>
</linearGradient>
<linearGradient id="paint1_linear_1285_538" x1="2.69922" y1="-18.0001" x2="32.7092" y2="-18.0001" gradientUnits="userSpaceOnUse">
<stop stop-color="#F5F5F5"/>
<stop offset="0.22" stop-color="#F0F0F0"/>
<stop offset="0.45" stop-color="#E4E4E4"/>
<stop offset="0.67" stop-color="#D0D0D0"/>
<stop offset="0.78" stop-color="#C4C4C4"/>
<stop offset="1" stop-color="#C6C6C6"/>
</linearGradient>
<linearGradient id="paint2_linear_1285_538" x1="15.2593" y1="-18.0002" x2="20.1593" y2="-18.0002" gradientUnits="userSpaceOnUse">
<stop stop-color="#C4C4C4"/>
<stop offset="0.41" stop-color="#F8F8F8"/>
<stop offset="0.49" stop-color="#F0F0F0"/>
<stop offset="0.6" stop-color="#DCDCDC"/>
<stop offset="0.75" stop-color="#BABABA"/>
<stop offset="0.79" stop-color="#AEAEAE"/>
<stop offset="1" stop-color="#BEBEBE"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

lib/features/devices/view/widgets/curtains/curtain_buttons.dart
+116
View File
@@ -0,0 +1,116 @@
part of "curtain_view.dart";
class CurtainButtons extends StatelessWidget {
const CurtainButtons({super.key, required this.curtain});
final DeviceModel curtain;
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Stack(
alignment: Alignment.center,
children: [
DecoratedBox(
decoration: BoxDecoration(shape: BoxShape.circle, boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 1,
blurRadius: 5,
offset: const Offset(3, 3),
),
]),
child: InkWell(
overlayColor: MaterialStateProperty.all(Colors.transparent),
onTap: () {
DevicesCubit.get(context).openCurtain(curtain.productType!);
},
child: const SizedBox.square(
dimension: 60,
),
),
),
Padding(
padding: const EdgeInsets.only(right: 5, bottom: 5),
child: InkWell(
overlayColor: MaterialStateProperty.all(Colors.transparent),
onTap: () {
DevicesCubit.get(context).openCurtain(curtain.productType!);
},
child: SvgPicture.asset(
Assets.assetsIconsCurtainsIconOpenCurtain,
width: 110,
height: 110,
),
),
)
],
),
DecoratedBox(
decoration: BoxDecoration(shape: BoxShape.circle, boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 1,
blurRadius: 5,
offset: const Offset(3, 3),
),
]),
child: InkWell(
overlayColor: MaterialStateProperty.all(Colors.transparent),
onTap: () {
DevicesCubit.get(context).pauseCurtain();
},
child: Image.asset(
Assets.assetsImagesPause,
width: 60,
height: 60,
),
),
),
Stack(
alignment: Alignment.center,
children: [
DecoratedBox(
decoration: BoxDecoration(shape: BoxShape.circle, boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 1,
blurRadius: 5,
offset: const Offset(3, 3),
),
]),
child: const SizedBox.square(
dimension: 60,
),
// InkWell(
// overlayColor: MaterialStateProperty.all(Colors.transparent),
// onTap: () {
// DevicesCubit.get(context).closeCurtain(curtain.productType!);
// },
// child: SvgPicture.asset(
// Assets.assetsIconsCurtainsIconCloseCurtain,
// width: 60,
// height: 60,
// ),
// ),
),
Padding(
padding: const EdgeInsets.only(right: 5, bottom: 5),
child: InkWell(
overlayColor: MaterialStateProperty.all(Colors.transparent),
onTap: () {
DevicesCubit.get(context).closeCurtain(curtain.productType!);
},
child: SvgPicture.asset(
Assets.assetsIconsCurtainsIconCloseCurtain,
width: 110,
height: 110,
),
),
)
],
),
],
);
}
}
lib/features/devices/view/widgets/curtains/curtain_list_view.dart
+22
View File
@@ -0,0 +1,22 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_app/features/devices/bloc/devices_cubit.dart';
import 'package:syncrow_app/features/devices/view/widgets/ACs/category_view_app_bar.dart';
import 'package:syncrow_app/features/devices/view/widgets/curtains/curtain_list.dart';
import 'package:syncrow_app/features/shared_widgets/default_scaffold.dart';
class CurtainListView extends StatelessWidget {
const CurtainListView({super.key});
@override
Widget build(BuildContext context) {
return BlocBuilder<DevicesCubit, DevicesState>(
builder: (context, state) {
return const DefaultScaffold(
appBar: CategoryViewAppBar(),
child: CurtainList(),
);
},
);
}
}
lib/features/devices/view/widgets/curtains/curtain_view.dart
+76 -11
View File
@@ -1,22 +1,87 @@
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_app/features/devices/bloc/devices_cubit.dart';
import 'package:syncrow_app/features/devices/view/widgets/ACs/category_view_app_bar.dart';
import 'package:syncrow_app/features/devices/view/widgets/curtains/curtain_list.dart';
import 'package:syncrow_app/features/devices/model/device_model.dart';
import 'package:syncrow_app/features/shared_widgets/default_scaffold.dart';
import 'package:syncrow_app/generated/assets.dart';
part "curtain_buttons.dart";
class CurtainView extends StatelessWidget {
const CurtainView({super.key});
const CurtainView({super.key, required this.curtain});
final DeviceModel curtain;
@override
Widget build(BuildContext context) {
return BlocBuilder<DevicesCubit, DevicesState>(
builder: (context, state) {
return const DefaultScaffold(
appBar: CategoryViewAppBar(),
child: CurtainList(),
);
},
return BlocProvider(
create: (context) => DevicesCubit.getInstance(),
child: BlocBuilder<DevicesCubit, DevicesState>(
builder: (context, state) => DefaultScaffold(
title: curtain.name,
child: Column(
children: [
Stack(
alignment: Alignment.centerLeft,
children: [
Container(
height: 340,
width: 365,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage(
Assets.assetsImagesWindow,
),
),
),
),
Padding(
padding: const EdgeInsets.all(40),
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
curve: Curves.linear,
height: 310,
width: DevicesCubit.getInstance().curtainWidth,
child: Stack(
children: List.generate(
10,
(index) {
double spacing =
DevicesCubit.getInstance().curtainWidth / 9;
double leftMostPosition = index * spacing;
return AnimatedPositioned(
duration: const Duration(milliseconds: 200),
curve: Curves.linear,
left: leftMostPosition,
child: SizedBox(
height: 320,
width: 32,
child: SvgPicture.asset(
Assets.assetsIconsCurtainsIconVerticalBlade,
fit: BoxFit.fill,
),
),
);
},
),
),
),
),
Positioned(
top: 27,
left: 43,
child: SvgPicture.asset(
Assets.assetsIconsCurtainsIconCurtainHolder)),
],
),
const SizedBox(height: 80),
CurtainButtons(
curtain: curtain,
),
],
),
),
),
);
}
}
pubspec.yaml
+6 -1
View File
@@ -43,6 +43,11 @@ dev_dependencies:
sdk: flutter
flutter_lints: ^3.0.1
flutter_assets:
assets_path: assets/
output_path: lib/generated2/
filename: Assets.assetsIconsDart
flutter:
uses-material-design: true
@@ -61,7 +66,7 @@ flutter:
- assets/icons/MenuIcons/LeagalInfoIcons/
- assets/icons/MenuIcons/MessagesCenterIcons/
- assets/icons/MenuIcons/SecurityAndPrivacyIcons/
- assets/icons/curtainsIcon/
fonts:
- family: Aftika
fonts: