From 8c8e46f250a5e67ef63d8ed8b64eebf5b7472e9d Mon Sep 17 00:00:00 2001 From: ashrafzarkanisala Date: Wed, 12 Jun 2024 21:06:27 +0300 Subject: [PATCH] push bottom sheet design of the scenes --- assets/icons/delay.svg | 10 ++ assets/icons/player.svg | 6 + .../bottom_sheet_widget.dart | 80 +++++++++++++ .../if_then_containers/if_container.dart | 8 +- .../if_then_containers/then_container.dart | 18 ++- .../scene/view/widgets/scene_list_tile.dart | 9 +- .../bottom_sheet/bottom_sheet_widget.dart | 108 ------------------ .../shared_widgets/light_divider.dart | 16 +++ lib/generated/assets.dart | 2 + lib/utils/context_extension.dart | 50 +------- 10 files changed, 135 insertions(+), 172 deletions(-) create mode 100644 assets/icons/delay.svg create mode 100644 assets/icons/player.svg create mode 100644 lib/features/scene/view/widgets/if_then_containers/bottom_sheet_widget.dart delete mode 100644 lib/features/shared_widgets/bottom_sheet/bottom_sheet_widget.dart create mode 100644 lib/features/shared_widgets/light_divider.dart diff --git a/assets/icons/delay.svg b/assets/icons/delay.svg new file mode 100644 index 0000000..2285837 --- /dev/null +++ b/assets/icons/delay.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/assets/icons/player.svg b/assets/icons/player.svg new file mode 100644 index 0000000..859abdd --- /dev/null +++ b/assets/icons/player.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/lib/features/scene/view/widgets/if_then_containers/bottom_sheet_widget.dart b/lib/features/scene/view/widgets/if_then_containers/bottom_sheet_widget.dart new file mode 100644 index 0000000..a4c8202 --- /dev/null +++ b/lib/features/scene/view/widgets/if_then_containers/bottom_sheet_widget.dart @@ -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: () {}, + ), + ], + ), + ); + } +} diff --git a/lib/features/scene/view/widgets/if_then_containers/if_container.dart b/lib/features/scene/view/widgets/if_then_containers/if_container.dart index 570879f..f82675c 100644 --- a/lib/features/scene/view/widgets/if_then_containers/if_container.dart +++ b/lib/features/scene/view/widgets/if_then_containers/if_container.dart @@ -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 { ); } } + + diff --git a/lib/features/scene/view/widgets/if_then_containers/then_container.dart b/lib/features/scene/view/widgets/if_then_containers/then_container.dart index eee3574..2948d35 100644 --- a/lib/features/scene/view/widgets/if_then_containers/then_container.dart +++ b/lib/features/scene/view/widgets/if_then_containers/then_container.dart @@ -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(), + ), ) ], ), diff --git a/lib/features/scene/view/widgets/scene_list_tile.dart b/lib/features/scene/view/widgets/scene_list_tile.dart index f6af742..78e4c4d 100644 --- a/lib/features/scene/view/widgets/scene_list_tile.dart +++ b/lib/features/scene/view/widgets/scene_list_tile.dart @@ -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, diff --git a/lib/features/shared_widgets/bottom_sheet/bottom_sheet_widget.dart b/lib/features/shared_widgets/bottom_sheet/bottom_sheet_widget.dart deleted file mode 100644 index 1c9e2f1..0000000 --- a/lib/features/shared_widgets/bottom_sheet/bottom_sheet_widget.dart +++ /dev/null @@ -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'), - ), - ), - ], - ), - ); - } -} diff --git a/lib/features/shared_widgets/light_divider.dart b/lib/features/shared_widgets/light_divider.dart new file mode 100644 index 0000000..7bc81bd --- /dev/null +++ b/lib/features/shared_widgets/light_divider.dart @@ -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, + ); + } +} diff --git a/lib/generated/assets.dart b/lib/generated/assets.dart index f1893f4..89aefad 100644 --- a/lib/generated/assets.dart +++ b/lib/generated/assets.dart @@ -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 diff --git a/lib/utils/context_extension.dart b/lib/utils/context_extension.dart index 1145dbf..d021781 100644 --- a/lib/utils/context_extension.dart +++ b/lib/utils/context_extension.dart @@ -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 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( 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, ); }, );