ammar/syncrow-app
1
0
Fork 0
mirror of https://github.com/SyncrowIOT/syncrow-app.git synced 2025-11-27 03:04:54 +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

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,
);
}
}