finished if - then - save button design

lib/features/scene/view/create_scene_view.dart

@@ -24,7 +24,7 @@ class CreateSceneView extends StatelessWidget {
             margin: const EdgeInsets.symmetric(vertical: 4),
             child: const SceneListTile(
               assetPath: Assets.handClickIcon,
-              title: StringsManager.tapToRun,
+              titleString: StringsManager.tapToRun,
               subtitle: StringsManager.turnOffAllLights,
             ),
             onTap: () => Navigator.pushNamed(
@@ -38,7 +38,7 @@ class CreateSceneView extends StatelessWidget {
             margin: const EdgeInsets.symmetric(vertical: 4),
             child: const SceneListTile(
               assetPath: Assets.refreshIcon,
-              title: StringsManager.whenDeviceStatusChanges,
+              titleString: StringsManager.whenDeviceStatusChanges,
               subtitle: StringsManager.whenUnusualActivityIsDetected,
             ),
             onTap: () => Navigator.pushNamed(

lib/features/scene/view/scene_add_tasks.dart

@@ -1,12 +1,12 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
-import 'package:syncrow_app/features/auth/view/widgets/login_divider.dart';
-import 'package:syncrow_app/features/scene/view/widgets/scene_list_tile.dart';
+import 'package:syncrow_app/features/scene/view/widgets/if_then_containers/if_container.dart';
+import 'package:syncrow_app/features/scene/view/widgets/if_then_containers/then_container.dart';
 import 'package:syncrow_app/features/shared_widgets/default_button.dart';
-import 'package:syncrow_app/features/shared_widgets/default_container.dart';
 import 'package:syncrow_app/features/shared_widgets/default_scaffold.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';
 import 'package:syncrow_app/utils/resource_manager/strings_manager.dart';
 
@@ -17,7 +17,7 @@ class SceneAddTasksView extends StatelessWidget {
   Widget build(BuildContext context) {
     return DefaultScaffold(
       title: StringsManager.createScene,
-      padding: const EdgeInsets.only(top: 24),
+      padding: EdgeInsets.zero,
       actions: [
         SizedBox(
           width: 40,
@@ -32,38 +32,49 @@ class SceneAddTasksView extends StatelessWidget {
           ),
         ),
       ],
-      child: SingleChildScrollView(
-        child: Column(
-          children: [
-            DefaultContainer(
-              padding: EdgeInsets.zero,
-              child: Column(
-                mainAxisSize: MainAxisSize.min,
-                children: [
-                  Padding(
-                    padding: const EdgeInsets.all(16.0),
-                    child: Row(
-                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                      children: [
-                        const BodyLarge(
-                          text: 'IF',
-                        ),
-                        SvgPicture.asset(Assets.addIcon),
-                      ],
-                    ),
+      child: Stack(
+        children: [
+          const SingleChildScrollView(
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                SizedBox(
+                  height: 24,
+                ),
+                // IF
+                IFDefaultContainer(),
+                SizedBox(
+                  height: 8,
+                ),
+                // THEN
+                ThenDefaultContainer(),
+                SizedBox(
+                  height: 100,
+                ),
+              ],
+            ),
+          ),
+          Positioned(
+            bottom: 16,
+            right: 40,
+            left: 40,
+            child: SizedBox(
+              width: context.width * 0.8,
+              child: DefaultButton(
+                onPressed: () {},
+                customButtonStyle: ButtonStyle(
+                  backgroundColor: WidgetStateProperty.all<Color>(
+                    ColorsManager.primaryColorWithOpacity,
                   ),
-                  const Divider(
-                    color: ColorsManager.greyColor,
-                  ),
-                  const SceneListTile(
-                    assetPath: Assets.handClickIcon,
-                    title: StringsManager.tapToRun,
-                  )
-                ],
+                ),
+                child: BodyLarge(
+                  text: 'Save',
+                  style: context.bodyLarge.copyWith(color: Colors.white),
+                ),
               ),
             ),
-          ],
-        ),
+          )
+        ],
       ),
     );
   }

lib/features/scene/view/widgets/if_then_containers/if_container.dart

@@ -0,0 +1,47 @@
+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/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';
+import 'package:syncrow_app/utils/resource_manager/strings_manager.dart';
+
+class IFDefaultContainer extends StatelessWidget {
+  const IFDefaultContainer({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return DefaultContainer(
+      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 2),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          SceneListTile(
+            leadingWidget: BodyLarge(
+              text: 'IF',
+              style: context.bodyLarge.copyWith(
+                fontWeight: FontWeight.bold,
+                color: ColorsManager.primaryTextColor,
+              ),
+            ),
+            trailingWidget: SvgPicture.asset(Assets.addIcon),
+            padding: EdgeInsets.zero,
+          ),
+          const Divider(
+            color: ColorsManager.greyColor,
+            thickness: 0.3,
+          ),
+          const SceneListTile(
+            assetPath: Assets.handClickIcon,
+            titleString: StringsManager.tapToRun,
+            padding: EdgeInsets.zero,
+          )
+        ],
+      ),
+    );
+  }
+}

lib/features/scene/view/widgets/if_then_containers/then_container.dart

@@ -0,0 +1,60 @@
+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/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 ThenDefaultContainer extends StatelessWidget {
+  const ThenDefaultContainer({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return DefaultContainer(
+      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 2),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          SceneListTile(
+            leadingWidget: BodyLarge(
+              text: 'Then',
+              style: context.bodyLarge.copyWith(
+                fontWeight: FontWeight.bold,
+                color: ColorsManager.primaryTextColor,
+              ),
+            ),
+            trailingWidget: GestureDetector(
+              onTap: () => context.customBottomSheet(title: 'Add Task'),
+              child: SvgPicture.asset(
+                Assets.addIcon,
+                colorFilter: const ColorFilter.mode(
+                  ColorsManager.primaryColor,
+                  BlendMode.srcIn,
+                ),
+              ),
+            ),
+            padding: EdgeInsets.zero,
+          ),
+          const Divider(
+            color: ColorsManager.greyColor,
+            thickness: 0.3,
+          ),
+          SceneListTile(
+            titleString: '+ Add Task',
+            textAlign: TextAlign.center,
+            onPressed: () => context.customBottomSheet(
+                title: 'Add Task',
+                titleStyle: context.bodyLarge.copyWith(
+                  color: ColorsManager.primaryColorWithOpacity,
+                  fontWeight: FontWeight.bold,
+                )),
+          )
+        ],
+      ),
+    );
+  }
+}

lib/features/scene/view/widgets/scene_list_tile.dart

@@ -2,30 +2,50 @@ import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:syncrow_app/features/shared_widgets/text_widgets/body_medium.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/context_extension.dart';
 import 'package:syncrow_app/utils/resource_manager/color_manager.dart';
 
 class SceneListTile extends StatelessWidget {
   const SceneListTile({
     super.key,
-    required this.assetPath,
-    required this.title,
+    this.assetPath,
+    this.titleString,
     this.subtitle,
+    this.leadingWidget,
+    this.trailingWidget,
+    this.padding,
+    this.textAlign,
+    this.onPressed,
   });
-  final String assetPath;
-  final String title;
+  final String? assetPath;
+  final String? titleString;
   final String? subtitle;
+  final Widget? leadingWidget;
+  final Widget? trailingWidget;
+  final EdgeInsetsGeometry? padding;
+  final TextAlign? textAlign;
+  final void Function()? onPressed;
 
   @override
   Widget build(BuildContext context) {
     return ListTile(
       minLeadingWidth: 40,
-      leading: SvgPicture.asset(
-        assetPath,
-        width: 20,
-        height: 32,
+      leading: leadingWidget ??
+          (assetPath != null
+              ? SvgPicture.asset(
+                  assetPath ?? Assets.assetsImagesLogo,
+                  width: 20,
+                  height: 32,
+                )
+              : null),
+      trailing: trailingWidget,
+      contentPadding: padding,
+      title: BodyMedium(
+        text: titleString ?? '',
+        textAlign: textAlign,
+        style: context.bodyMedium.copyWith(fontSize: 15),
       ),
-      title: BodyMedium(text: title),
       subtitle: subtitle == null
           ? null
           : BodySmall(
@@ -33,6 +53,7 @@ class SceneListTile extends StatelessWidget {
               style: context.bodySmall.copyWith(
                   fontWeight: FontWeight.w400, color: ColorsManager.greyColor),
             ),
+      onTap: onPressed,
     );
   }
 }