ammar/syncrow-app
1
0
Fork 0
mirror of https://github.com/SyncrowIOT/syncrow-app.git synced 2025-07-14 09:17:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

push bottom sheet design of the scenes

Browse Source
This commit is contained in:
ashrafzarkanisala
2024-06-12 21:06:27 +03:00
parent 17e9826b21
commit 8c8e46f250
10 changed files with 135 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
assets/icons/delay.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="13" height="20" viewBox="0 0 13 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.7236 3.01562C11.7298 2.02969 11.2763 1.07305 10.3752 0.171875H2.51501C1.61383 1.07305 1.16032 2.02969 1.16657 3.01562C1.18688 6.10781 5.85915 8.58242 5.85915 9.96094C5.85915 11.3746 1.18766 13.9207 1.18532 17.0258C1.18454 18.0023 1.6318 18.9453 2.51501 19.8285C2.51696 19.8305 4.48102 19.8316 6.44508 19.8316C8.40915 19.8316 10.3732 19.8305 10.3752 19.8285C11.2584 18.9453 11.7056 18.0023 11.7048 17.0258C11.7025 13.9238 7.03102 11.3715 7.03102 9.96094C7.03102 8.57773 11.7033 6.11523 11.7236 3.01562Z" fill="#F0F7FF"/>
<path d="M11.7238 3.01562C11.7301 2.02969 11.2766 1.07305 10.3754 0.171875H6.44531V19.8316C8.40937 19.8316 10.3734 19.8305 10.3754 19.8285C11.2586 18.9453 11.7059 18.0023 11.7051 17.0258C11.7027 13.9238 7.03125 11.3715 7.03125 9.96094C7.03125 8.57773 11.7035 6.11523 11.7238 3.01562Z" fill="#DFE7F4"/>
<path d="M8.77183 17.6511H4.1187C3.81206 17.6511 3.53003 17.4132 3.53003 17.0304C3.53354 16.0229 5.30073 14.4843 6.03315 13.7233C6.14761 13.6104 6.29644 13.5542 6.44526 13.5542C6.59409 13.5542 6.74292 13.6104 6.85737 13.7233C7.58472 14.4792 9.35698 16.0202 9.3605 17.0323C9.3605 17.4136 9.07769 17.6511 8.77183 17.6511Z" fill="#FED843"/>
<path d="M9.36055 17.0323C9.35703 16.0202 7.58477 14.4792 6.85742 13.7233C6.74297 13.6104 6.59414 13.5542 6.44531 13.5542V17.6511H8.77187C9.07773 17.6511 9.36055 17.4136 9.36055 17.0323Z" fill="#FABE2C"/>
<path d="M12.8906 19.4141C12.8906 19.0906 12.6281 18.8281 12.3047 18.8281H0.585938C0.2625 18.8281 0 19.0906 0 19.4141C0 19.7379 0.2625 20 0.585938 20H12.3047C12.6281 20 12.8906 19.7379 12.8906 19.4141Z" fill="#474F54"/>
<path d="M12.8906 19.4141C12.8906 19.0906 12.6281 18.8281 12.3047 18.8281H6.44531V20H12.3047C12.6281 20 12.8906 19.7379 12.8906 19.4141Z" fill="#32393F"/>
<path d="M12.8906 0.585938C12.8906 0.2625 12.6281 0 12.3047 0H0.585938C0.2625 0 0 0.2625 0 0.585938C0 0.909766 0.2625 1.17188 0.585938 1.17188H12.3047C12.6281 1.17188 12.8906 0.909766 12.8906 0.585938Z" fill="#474F54"/>
<path d="M12.8906 0.585938C12.8906 0.2625 12.6281 0 12.3047 0H6.44531V1.17188H12.3047C12.6281 1.17188 12.8906 0.909766 12.8906 0.585938Z" fill="#32393F"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

6
assets/icons/player.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 0V20C15.5229 20 20 15.5229 20 10C20 4.47714 15.5229 0 10 0Z" fill="#3B88F5"/>
<path d="M18.7928 10C18.7928 4.47714 14.8561 0 10 0C4.47714 0 0 4.47714 0 10C0 15.5229 4.47714 20 10 20C14.8561 20 18.7928 15.5229 18.7928 10Z" fill="#28ABFA"/>
<path d="M15.1703 8.95398C15.1703 8.95358 8.32114 4.99921 8.32114 4.99921C8.1133 4.87949 7.87317 4.8238 7.63301 4.84022L7.63281 15.1594C7.87297 15.1758 8.11309 15.1201 8.32078 15.0002L15.1703 11.0457C15.5315 10.837 15.7748 10.4469 15.7748 9.99982C15.7748 9.55269 15.5315 9.16263 15.1703 8.95398Z" fill="#C4F3FF"/>
<path d="M14.0416 11.0458C14.3558 10.8371 14.5674 10.4471 14.5674 9.99993C14.5674 9.55281 14.3558 9.16275 14.0416 8.95409C14.0416 8.95369 8.08485 4.99933 8.08485 4.99933C7.94645 4.90766 7.79157 4.85341 7.63281 4.84033C7.45507 4.85244 7.27732 4.90387 7.11261 4.99896C6.72537 5.22255 6.50923 5.62826 6.50915 6.0454C6.50879 6.0456 6.50879 13.9543 6.50879 13.9543C6.50923 14.3717 6.72537 14.7774 7.11261 15.001C7.27724 15.096 7.45499 15.1475 7.63261 15.1596C7.79136 15.1465 7.94621 15.0922 8.08452 15.0004L14.0416 11.0458Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

80
lib/features/scene/view/widgets/if_then_containers/bottom_sheet_widget.dart Normal file
View File

@ -0,0 +1,80 @@
import 'package:flutter/material.dart';
import 'package:syncrow_app/features/scene/view/widgets/scene_list_tile.dart';
import 'package:syncrow_app/features/shared_widgets/light_divider.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/context_extension.dart';
import 'package:syncrow_app/utils/resource_manager/color_manager.dart';
class CustomBottomSheetWidget extends StatelessWidget {
const CustomBottomSheetWidget({
super.key,
});
@override
Widget build(BuildContext context) {
return SizedBox(
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.only(top: 16, bottom: 8),
child: BodyLarge(
text: 'Add Task',
style: context.bodyLarge.copyWith(
fontWeight: FontWeight.w700,
color: ColorsManager.primaryColorWithOpacity,
),
textAlign: TextAlign.center,
),
),
SizedBox(
width: context.width * 0.7,
child: const LightDivider(),
),
SceneListTile(
assetPath: Assets.assetsIconsLight,
assetHeight: 24,
minLeadingWidth: 30,
titleString: 'Control Single Device',
padding: const EdgeInsets.symmetric(horizontal: 20),
trailingWidget: const Icon(
Icons.arrow_forward_ios_rounded,
size: 16,
color: ColorsManager.greyColor,
),
onPressed: () {},
),
SceneListTile(
assetPath: Assets.player,
titleString: 'Select Automation',
minLeadingWidth: 30,
assetHeight: 24,
padding: const EdgeInsets.symmetric(horizontal: 20),
trailingWidget: const Icon(
Icons.arrow_forward_ios_rounded,
size: 16,
color: ColorsManager.greyColor,
),
onPressed: () {},
),
SceneListTile(
assetPath: Assets.delay,
titleString: 'Delay The Action',
assetHeight: 24,
minLeadingWidth: 30,
padding: const EdgeInsets.symmetric(horizontal: 20),
trailingWidget: const Icon(
Icons.arrow_forward_ios_rounded,
size: 16,
color: ColorsManager.greyColor,
),
onPressed: () {},
),
],
),
);
}
}

8
lib/features/scene/view/widgets/if_then_containers/if_container.dart
View File

@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_app/features/scene/view/widgets/scene_list_tile.dart';
import 'package:syncrow_app/features/shared_widgets/default_container.dart';
import 'package:syncrow_app/features/shared_widgets/light_divider.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/context_extension.dart';
@ -31,10 +32,7 @@ class IFDefaultContainer extends StatelessWidget {
trailingWidget: SvgPicture.asset(Assets.addIcon),
padding: EdgeInsets.zero,
),
const Divider(
color: ColorsManager.greyColor,
thickness: 0.3,
),
const LightDivider(),
const SceneListTile(
assetPath: Assets.handClickIcon,
titleString: StringsManager.tapToRun,
@ -45,3 +43,5 @@ class IFDefaultContainer extends StatelessWidget {
);
}
}

18
lib/features/scene/view/widgets/if_then_containers/then_container.dart
View File

@ -1,7 +1,9 @@
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_app/features/scene/view/widgets/scene_list_tile.dart';
import 'package:syncrow_app/features/scene/view/widgets/if_then_containers/bottom_sheet_widget.dart';
import 'package:syncrow_app/features/shared_widgets/default_container.dart';
import 'package:syncrow_app/features/shared_widgets/light_divider.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/context_extension.dart';
@ -28,7 +30,9 @@ class ThenDefaultContainer extends StatelessWidget {
),
),
trailingWidget: GestureDetector(
onTap: () => context.customBottomSheet(title: 'Add Task'),
onTap: () => context.customBottomSheet(
child: const CustomBottomSheetWidget(),
),
child: SvgPicture.asset(
Assets.addIcon,
colorFilter: const ColorFilter.mode(
@ -39,19 +43,13 @@ class ThenDefaultContainer extends StatelessWidget {
),
padding: EdgeInsets.zero,
),
const Divider(
color: ColorsManager.greyColor,
thickness: 0.3,
),
const LightDivider(),
SceneListTile(
titleString: '+ Add Task',
textAlign: TextAlign.center,
onPressed: () => context.customBottomSheet(
title: 'Add Task',
titleStyle: context.bodyLarge.copyWith(
color: ColorsManager.primaryColorWithOpacity,
fontWeight: FontWeight.bold,
)),
child: const CustomBottomSheetWidget(),
),
)
],
),

9
lib/features/scene/view/widgets/scene_list_tile.dart
View File

@ -17,6 +17,8 @@ class SceneListTile extends StatelessWidget {
this.padding,
this.textAlign,
this.onPressed,
this.assetHeight,
this.minLeadingWidth,
});
final String? assetPath;
final String? titleString;
@ -26,17 +28,20 @@ class SceneListTile extends StatelessWidget {
final EdgeInsetsGeometry? padding;
final TextAlign? textAlign;
final void Function()? onPressed;
final double? assetHeight;
final double? minLeadingWidth;
@override
Widget build(BuildContext context) {
return ListTile(
minLeadingWidth: 40,
minLeadingWidth: minLeadingWidth ?? 40,
leading: leadingWidget ??
(assetPath != null
? SvgPicture.asset(
assetPath ?? Assets.assetsImagesLogo,
width: 20,
height: 32,
height: assetHeight ?? 32,
fit: BoxFit.fitWidth,
)
: null),
trailing: trailingWidget,

108
lib/features/shared_widgets/bottom_sheet/bottom_sheet_widget.dart
View File

@ -1,108 +0,0 @@
import 'package:flutter/material.dart';
import 'package:syncrow_app/features/shared_widgets/default_button.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_medium.dart';
import 'package:syncrow_app/utils/context_extension.dart';
import 'package:syncrow_app/utils/resource_manager/color_manager.dart';
class CustomBottomSheetWidget extends StatelessWidget {
const CustomBottomSheetWidget({
required this.title,
super.key,
this.onPressed,
this.withBack = false,
this.image = '',
this.imageSize = 200,
this.description = '',
this.onPressedColor = ColorsManager.primaryTextColor,
this.titleStyle,
this.descreptionStyle,
this.backColor,
this.onPressedTitle,
this.imageSpace = 8,
});
final String image;
final double imageSize;
final double imageSpace;
final String title;
final TextStyle? titleStyle;
final String description;
final TextStyle? descreptionStyle;
final bool withBack;
final String? onPressedTitle;
final void Function()? onPressed;
final Color onPressedColor;
final Color? backColor;
@override
Widget build(BuildContext context) {
return SizedBox(
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
if (image.isNotEmpty)
Image.asset(
image,
width: imageSize,
),
if (image.isNotEmpty) SizedBox(height: imageSpace),
if (title.isNotEmpty)
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
child: Text(
title,
style: titleStyle ??
context.bodyLarge.copyWith(
fontWeight: FontWeight.w700,
),
textAlign: TextAlign.center,
),
),
if (title.isNotEmpty) const SizedBox(height: 16),
if (description.isNotEmpty)
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Text(
description,
style: descreptionStyle ?? context.bodyLarge,
textAlign: TextAlign.center,
),
),
if (onPressed != null)
Padding(
padding: EdgeInsets.only(
left: 16,
right: 16,
top: 32,
bottom: withBack ? 0 : 32,
),
child: DefaultButton(
onPressed: onPressed,
child: BodyMedium(
text: onPressedTitle ?? '',
),
),
),
if (withBack)
Padding(
padding: const EdgeInsets.fromLTRB(16, 8, 16, 32),
child: DefaultButton(
onPressed: () {
Navigator.pop(context);
},
customButtonStyle: ButtonStyle(
backgroundColor: WidgetStateProperty.all(
backColor ?? ColorsManager.primaryColor),
),
customTextStyle: context.bodyMedium.copyWith(
color: backColor ?? ColorsManager.primaryTextColor),
enabled: true,
child: const BodyMedium(text: 'Back'),
),
),
],
),
);
}
}

16
lib/features/shared_widgets/light_divider.dart Normal file
View File

@ -0,0 +1,16 @@
import 'package:flutter/material.dart';
import 'package:syncrow_app/utils/resource_manager/color_manager.dart';
class LightDivider extends StatelessWidget {
const LightDivider({
super.key,
});
@override
Widget build(BuildContext context) {
return const Divider(
color: ColorsManager.greyColor,
thickness: 0.3,
);
}
}

2
lib/generated/assets.dart
View File

@ -693,6 +693,8 @@ class Assets {
static const String handClickIcon = "assets/icons/hand_click.svg";
static const String refreshIcon = "assets/icons/refresh.svg";
static const String addIcon = "assets/icons/add.svg";
static const String player = "assets/icons/player.svg";
static const String delay = "assets/icons/delay.svg";
/// Assets for assetsImagesAutomation
/// assets/images/automation.jpg

50
lib/utils/context_extension.dart
View File

@ -1,7 +1,5 @@
import 'package:flutter/material.dart';
import 'package:syncrow_app/features/shared_widgets/bottom_sheet/bottom_sheet_widget.dart';
import 'package:syncrow_app/features/shared_widgets/bottom_sheet/custom_bottom_sheet.dart';
import 'package:syncrow_app/utils/resource_manager/color_manager.dart';
extension ContextExtension on BuildContext {
Future<void> goTo(String newRouteName) async {
@ -34,57 +32,13 @@ extension ContextExtension on BuildContext {
TextStyle get bodySmall => Theme.of(this).textTheme.bodySmall!;
void customBottomSheet({
/// this fild will show the title after image widget
required String title,
/// this showing image in top of the screen
String? image,
/// this if you need change image size
double? imageSize,
/// if you need change title styling use this fild
TextStyle? titleStyle,
/// this fild will show the title after title widget
String? descreption,
/// if you neee change descreption styling use this fild
TextStyle? descreptionStyle,
/// if you need show back bottom to closed bottom sheet
bool? withBack,
/// this calling when press action bottom
void Function()? onPressed,
/// this fild to change on press text
String? onPressedTitle,
/// this fild to change action bottom color
Color? onPressedColor,
/// this fild to change back bottom color
Color? backColor,
}) {
void customBottomSheet({Widget? child}) {
showModalBottomSheet<void>(
context: this,
isScrollControlled: true,
builder: (BuildContext context) {
return CustomBottomSheet(
child: CustomBottomSheetWidget(
image: image ?? '',
imageSize: imageSize ?? 200,
titleStyle: titleStyle,
description: descreption ?? '',
descreptionStyle: descreptionStyle,
title: title,
withBack: withBack ?? false,
onPressed: onPressed,
onPressedColor: onPressedColor ?? ColorsManager.primaryTextColor,
backColor: backColor,
),
child: child,
);
},
);