ammar/syncrow-web
1
0
Fork 0
mirror of https://github.com/SyncrowIOT/web.git synced 2025-07-09 22:57:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #148 from SyncrowIOT/SP-1435-FE-On-routines-page-when-the-screen-height-is-decreased-or-is-small-the-scroll-area-for-routine-cards-is-not-fitting-the-whole-screen-width

Browse Source 
Sp 1435 fe on routines page when the screen height is decreased or is small the scroll area for routine cards is not fitting the whole screen width
This commit is contained in:
Faris Armoush
2025-04-21 09:49:08 +03:00
committed by GitHub
parent 4d5adf948c 9431eb79c1
commit b9ab782c01
4 changed files with 261 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
lib/pages/routines/view/routines_view.dart
View File

@ -1,7 +1,7 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_web/pages/routines/bloc/create_routine_bloc/create_routine_event.dart';
import 'package:syncrow_web/pages/routines/bloc/create_routine_bloc/create_routine_bloc.dart'; import 'package:syncrow_web/pages/routines/bloc/create_routine_bloc/create_routine_bloc.dart';
import 'package:syncrow_web/pages/routines/bloc/create_routine_bloc/create_routine_event.dart';
import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart'; import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
import 'package:syncrow_web/pages/routines/create_new_routines/create_new_routines.dart'; import 'package:syncrow_web/pages/routines/create_new_routines/create_new_routines.dart';
import 'package:syncrow_web/pages/routines/view/create_new_routine_view.dart'; import 'package:syncrow_web/pages/routines/view/create_new_routine_view.dart';
@ -9,6 +9,7 @@ import 'package:syncrow_web/pages/routines/widgets/main_routine_view/fetch_routi
import 'package:syncrow_web/pages/routines/widgets/main_routine_view/routine_view_card.dart'; import 'package:syncrow_web/pages/routines/widgets/main_routine_view/routine_view_card.dart';
import 'package:syncrow_web/pages/space_tree/view/space_tree_view.dart'; import 'package:syncrow_web/pages/space_tree/view/space_tree_view.dart';
import 'package:syncrow_web/utils/color_manager.dart'; import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart';
class RoutinesView extends StatefulWidget { class RoutinesView extends StatefulWidget {
const RoutinesView({super.key}); const RoutinesView({super.key});
@ -27,9 +28,10 @@ class _RoutinesViewState extends State<RoutinesView> {
if (result == null) return; if (result == null) return;
final communityId = result['community']; final communityId = result['community'];
final spaceId = result['space']; final spaceId = result['space'];
final _bloc = BlocProvider.of<CreateRoutineBloc>(context); final bloc = BlocProvider.of<CreateRoutineBloc>(context);
final routineBloc = context.read<RoutineBloc>(); final routineBloc = context.read<RoutineBloc>();
_bloc.add(SaveCommunityIdAndSpaceIdEvent(communityID: communityId, spaceID: spaceId)); bloc.add(
SaveCommunityIdAndSpaceIdEvent(communityID: communityId, spaceID: spaceId));
await Future.delayed(const Duration(seconds: 1)); await Future.delayed(const Duration(seconds: 1));
routineBloc.add(const CreateNewRoutineViewEvent(createRoutineView: true)); routineBloc.add(const CreateNewRoutineViewEvent(createRoutineView: true));
} }
@ -54,13 +56,15 @@ class _RoutinesViewState extends State<RoutinesView> {
), ),
Expanded( Expanded(
flex: 4, flex: 4,
child: ListView( child: SizedBox(
children: [ height: context.screenHeight,
Container( width: context.screenWidth,
padding: const EdgeInsets.all(16), child: SingleChildScrollView(
height: MediaQuery.sizeOf(context).height, padding: const EdgeInsetsDirectional.all(16),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
spacing: 16,
children: [ children: [
Text( Text(
"Create New Routines", "Create New Routines",
@ -69,7 +73,6 @@ class _RoutinesViewState extends State<RoutinesView> {
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
), ),
), ),
const SizedBox(height: 10),
RoutineViewCard( RoutineViewCard(
isLoading: false, isLoading: false,
onChanged: (v) {}, onChanged: (v) {},
@ -84,13 +87,10 @@ class _RoutinesViewState extends State<RoutinesView> {
icon: Icons.add, icon: Icons.add,
textString: '', textString: '',
), ),
const SizedBox(height: 15), const FetchRoutineScenesAutomation(),
const Expanded(child: FetchRoutineScenesAutomation()),
], ],
), ),
), ),
const SizedBox(height: 50),
],
), ),
) )
], ],

261
lib/pages/routines/widgets/main_routine_view/fetch_routine_scenes_automation.dart
View File

@ -8,67 +8,121 @@ import 'package:syncrow_web/utils/constants/assets.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart'; import 'package:syncrow_web/utils/extension/build_context_x.dart';
import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart'; import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
class FetchRoutineScenesAutomation extends StatefulWidget { class FetchRoutineScenesAutomation extends StatelessWidget
const FetchRoutineScenesAutomation({super.key});
@override
State<FetchRoutineScenesAutomation> createState() =>
_FetchRoutineScenesState();
}
class _FetchRoutineScenesState extends State<FetchRoutineScenesAutomation>
with HelperResponsiveLayout { with HelperResponsiveLayout {
@override const FetchRoutineScenesAutomation({super.key});
void initState() {
super.initState();
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return BlocBuilder<RoutineBloc, RoutineState>( return BlocBuilder<RoutineBloc, RoutineState>(
builder: (context, state) { builder: (context, state) {
return state.isLoading if (state.isLoading) return const Center(child: CircularProgressIndicator());
? const Center(
child: CircularProgressIndicator(), return SingleChildScrollView(
)
: SingleChildScrollView(
child: Padding( child: Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0), padding: const EdgeInsets.symmetric(vertical: 16.0),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
Text( _buildListTitle(context, "Scenes (Tab to Run)"),
"Scenes (Tab to Run)", const SizedBox(height: 10),
style: Theme.of(context).textTheme.titleLarge?.copyWith( Visibility(
color: ColorsManager.grayColor, visible: state.scenes.isNotEmpty,
fontWeight: FontWeight.bold, replacement: _buildEmptyState(context, "No scenes found"),
child: SizedBox(
height: 200,
child: _buildScenes(state),
), ),
), ),
const SizedBox(height: 10), const SizedBox(height: 10),
if (state.scenes.isEmpty) _buildListTitle(context, "Automations"),
Text( const SizedBox(height: 3),
"No scenes found", Visibility(
style: context.textTheme.bodyMedium?.copyWith( visible: state.automations.isNotEmpty,
color: ColorsManager.grayColor, replacement: _buildEmptyState(context, "No automations found"),
), child: SizedBox(
),
if (state.scenes.isNotEmpty)
SizedBox(
height: 200, height: 200,
child: ListView.builder( child: _buildAutomations(state),
shrinkWrap: true, ),
)
],
),
),
);
},
);
}
Widget _buildAutomations(RoutineState state) {
return ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: state.automations.length,
itemBuilder: (context, index) {
final isLoading = state.automations.contains(state.automations[index].id);
return Column(
children: [
Padding(
padding: EdgeInsets.only(
right: isSmallScreenSize(context) ? 4.0 : 8.0,
),
child: RoutineViewCard(
isLoading: isLoading,
onChanged: (v) {
context.read<RoutineBloc>().add(
UpdateAutomationStatus(
automationId: state.automations[index].id,
automationStatusUpdate: AutomationStatusUpdate(
spaceUuid: state.automations[index].spaceId,
isEnable: v,
),
communityId: state.automations[index].communityId,
),
);
},
status: state.automations[index].status,
communityId: '',
spaceId: state.automations[index].spaceId,
sceneId: '',
automationId: state.automations[index].id,
cardType: 'automations',
spaceName: state.automations[index].spaceName,
onTap: () {
BlocProvider.of<RoutineBloc>(context).add(
const CreateNewRoutineViewEvent(
createRoutineView: true,
),
);
context.read<RoutineBloc>().add(
GetAutomationDetails(
automationId: state.automations[index].id,
isAutomation: true,
isUpdate: true,
),
);
},
textString: state.automations[index].name,
icon: state.automations[index].icon ?? Assets.automation,
),
),
],
);
},
);
}
Widget _buildScenes(RoutineState state) {
return ListView.builder(
scrollDirection: Axis.horizontal, scrollDirection: Axis.horizontal,
itemCount: state.scenes.length, itemCount: state.scenes.length,
itemBuilder: (context, index) { itemBuilder: (context, index) {
final scene = state.scenes[index]; final scene = state.scenes[index];
final isLoading = final isLoading = state.loadingSceneId == scene.id;
state.loadingSceneId == scene.id;
return Padding( return Padding(
padding: EdgeInsets.only( padding: EdgeInsets.only(
right: right: isSmallScreenSize(context) ? 4.0 : 8.0,
isSmallScreenSize(context) ? 4.0 : 8.0,
), ),
child: Column( child: Column(
children: [ children: [
@ -78,141 +132,58 @@ class _FetchRoutineScenesState extends State<FetchRoutineScenesAutomation>
context.read<RoutineBloc>().add( context.read<RoutineBloc>().add(
SceneTrigger( SceneTrigger(
sceneId: scene.id, sceneId: scene.id,
name: scene.name)); name: scene.name,
),
);
}, },
status: state.scenes[index].status, status: state.scenes[index].status,
communityId: communityId: state.scenes[index].communityId,
state.scenes[index].communityId ??
'',
spaceId: state.scenes[index].spaceId, spaceId: state.scenes[index].spaceId,
sceneId: sceneId: state.scenes[index].sceneTuyaId!,
state.scenes[index].sceneTuyaId!,
automationId: state.scenes[index].id, automationId: state.scenes[index].id,
cardType: 'scenes', cardType: 'scenes',
spaceName: spaceName: state.scenes[index].spaceName,
state.scenes[index].spaceName,
onTap: () { onTap: () {
BlocProvider.of<RoutineBloc>(context) BlocProvider.of<RoutineBloc>(context).add(
.add(
const CreateNewRoutineViewEvent( const CreateNewRoutineViewEvent(
createRoutineView: true), createRoutineView: true,
),
); );
context.read<RoutineBloc>().add( context.read<RoutineBloc>().add(
GetSceneDetails( GetSceneDetails(
sceneId: sceneId: state.scenes[index].id,
state.scenes[index].id,
isTabToRun: true, isTabToRun: true,
isUpdate: true, isUpdate: true,
), ),
); );
}, },
textString: state.scenes[index].name, textString: state.scenes[index].name,
icon: state.scenes[index].icon ?? icon: state.scenes[index].icon ?? Assets.logoHorizontal,
Assets.logoHorizontal,
isFromScenes: true, isFromScenes: true,
iconInBytes: iconInBytes: state.scenes[index].iconInBytes,
state.scenes[index].iconInBytes,
), ),
], ],
), ),
); );
}), });
), }
const SizedBox(height: 10),
Text( Widget _buildListTitle(BuildContext context, String title) {
"Automations", return Text(
title,
style: Theme.of(context).textTheme.titleLarge?.copyWith( style: Theme.of(context).textTheme.titleLarge?.copyWith(
color: ColorsManager.grayColor, color: ColorsManager.grayColor,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
), ),
), );
const SizedBox(height: 3), }
if (state.automations.isEmpty)
Text( Widget _buildEmptyState(BuildContext context, String title) {
"No automations found", return Text(
title,
style: context.textTheme.bodyMedium?.copyWith( style: context.textTheme.bodyMedium?.copyWith(
color: ColorsManager.grayColor, color: ColorsManager.grayColor,
), ),
),
if (state.automations.isNotEmpty)
SizedBox(
height: 200,
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: state.automations.length,
itemBuilder: (context, index) {
final isLoading = state.automations!
.contains(state.automations[index].id);
return Column(
children: [
Padding(
padding: EdgeInsets.only(
right: isSmallScreenSize(context)
? 4.0
: 8.0,
),
child: RoutineViewCard(
isLoading: isLoading,
onChanged: (v) {
context.read<RoutineBloc>().add(
UpdateAutomationStatus(
automationId: state
.automations[index].id,
automationStatusUpdate:
AutomationStatusUpdate(
spaceUuid: state
.automations[
index]
.spaceId,
isEnable: v),
communityId: state
.automations[index]
.communityId,
),
);
},
status: state.automations[index].status,
communityId: '',
spaceId:
state.automations[index].spaceId,
sceneId: '',
automationId:
state.automations[index].id,
cardType: 'automations',
spaceName:
state.automations[index].spaceName,
onTap: () {
BlocProvider.of<RoutineBloc>(context)
.add(
const CreateNewRoutineViewEvent(
createRoutineView: true),
);
context.read<RoutineBloc>().add(
GetAutomationDetails(
automationId: state
.automations[index].id,
isAutomation: true,
isUpdate: true),
);
},
textString:
state.automations[index].name,
icon: state.automations[index].icon ??
Assets.automation,
),
),
],
);
}),
),
],
),
),
);
},
); );
} }
} }

28
lib/pages/routines/widgets/main_routine_view/routine_view_card.dart
View File

@ -1,4 +1,5 @@
import 'dart:async'; import 'dart:async';
import 'package:flutter/cupertino.dart'; import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; import 'package:flutter/services.dart';
@ -66,7 +67,6 @@ class _RoutineViewCardState extends State<RoutineViewCard> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
// Use widget.<mixinMethod> instead of just <mixinMethod>
final double cardWidth = widget.isSmallScreenSize(context) final double cardWidth = widget.isSmallScreenSize(context)
? 120 ? 120
: widget.isMediumScreenSize(context) : widget.isMediumScreenSize(context)
@ -127,22 +127,23 @@ class _RoutineViewCardState extends State<RoutineViewCard> {
) )
else else
CupertinoSwitch( CupertinoSwitch(
activeColor: ColorsManager.primaryColor, activeTrackColor: ColorsManager.primaryColor,
value: widget.status == 'enable', value: widget.status == 'enable',
onChanged: widget.onChanged, onChanged: widget.onChanged,
) )
], ],
) )
: const SizedBox(), : const SizedBox(),
InkWell( Column(
onTap: widget.onTap,
child: Column(
children: [ children: [
Center( Center(
child: InkWell(
customBorder: const CircleBorder(),
onTap: widget.onTap,
child: Container( child: Container(
decoration: BoxDecoration( decoration: BoxDecoration(
color: ColorsManager.graysColor, color: ColorsManager.graysColor,
borderRadius: BorderRadius.circular(120), shape: BoxShape.circle,
border: Border.all( border: Border.all(
color: ColorsManager.greyColor, color: ColorsManager.greyColor,
width: 2.0, width: 2.0,
@ -158,7 +159,8 @@ class _RoutineViewCardState extends State<RoutineViewCard> {
height: iconSize, height: iconSize,
width: iconSize, width: iconSize,
fit: BoxFit.contain, fit: BoxFit.contain,
errorBuilder: (context, error, stackTrace) => Image.asset( errorBuilder: (context, error, stackTrace) =>
Image.asset(
Assets.logo, Assets.logo,
height: iconSize, height: iconSize,
width: iconSize, width: iconSize,
@ -171,7 +173,8 @@ class _RoutineViewCardState extends State<RoutineViewCard> {
width: iconSize, width: iconSize,
fit: BoxFit.contain, fit: BoxFit.contain,
) )
: (widget.icon is String && widget.icon.endsWith('.svg')) : (widget.icon is String &&
widget.icon.endsWith('.svg'))
? SvgPicture.asset( ? SvgPicture.asset(
height: iconSize, height: iconSize,
width: iconSize, width: iconSize,
@ -181,7 +184,10 @@ class _RoutineViewCardState extends State<RoutineViewCard> {
: Icon( : Icon(
widget.icon, widget.icon,
color: ColorsManager.dialogBlueTitle, color: ColorsManager.dialogBlueTitle,
size: widget.isSmallScreenSize(context) ? 30 : 40, size: widget.isSmallScreenSize(context)
? 30
: 40,
),
), ),
), ),
), ),
@ -216,7 +222,8 @@ class _RoutineViewCardState extends State<RoutineViewCard> {
maxLines: 1, maxLines: 1,
style: context.textTheme.bodySmall?.copyWith( style: context.textTheme.bodySmall?.copyWith(
color: ColorsManager.blackColor, color: ColorsManager.blackColor,
fontSize: widget.isSmallScreenSize(context) ? 10 : 12, fontSize:
widget.isSmallScreenSize(context) ? 10 : 12,
), ),
), ),
], ],
@ -226,7 +233,6 @@ class _RoutineViewCardState extends State<RoutineViewCard> {
), ),
], ],
), ),
),
], ],
), ),
), ),

2
lib/pages/space_tree/view/custom_expansion.dart
View File

@ -31,7 +31,7 @@ class CustomExpansionTileSpaceTree extends StatelessWidget {
children: [ children: [
Checkbox( Checkbox(
value: isSoldCheck ? null : isSelected, value: isSoldCheck ? null : isSelected,
onChanged: (value) => onItemSelected ?? () {}, onChanged: (value) => onItemSelected?.call(),
tristate: true, tristate: true,
side: WidgetStateBorderSide.resolveWith( side: WidgetStateBorderSide.resolveWith(
(states) => const BorderSide(color: ColorsManager.grayBorder), (states) => const BorderSide(color: ColorsManager.grayBorder),