|
|
|
@ -29,11 +29,19 @@ class OrganSelectorPage extends StatefulWidget {
|
|
|
|
State<OrganSelectorPage> createState() => _OrganSelectorPageState();
|
|
|
|
State<OrganSelectorPage> createState() => _OrganSelectorPageState();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
class _OrganSelectorPageState extends State<OrganSelectorPage> {
|
|
|
|
class _OrganSelectorPageState extends State<OrganSelectorPage> with SingleTickerProviderStateMixin {
|
|
|
|
|
|
|
|
static const double _expandedBodyZoomFactor = 1.08;
|
|
|
|
|
|
|
|
static const double _expandedSheetHeightFactor = 0.3;
|
|
|
|
|
|
|
|
static const bool _enableTutorialOverlay = false;
|
|
|
|
|
|
|
|
static const bool _enableSwipeToFlip = false;
|
|
|
|
|
|
|
|
|
|
|
|
late final AppState _appState;
|
|
|
|
late final AppState _appState;
|
|
|
|
late final DialogService dialogService;
|
|
|
|
late final DialogService dialogService;
|
|
|
|
late final CacheService cacheService;
|
|
|
|
late final CacheService cacheService;
|
|
|
|
|
|
|
|
late final AnimationController _introZoomHintController;
|
|
|
|
|
|
|
|
late final Animation<double> _introZoomHintAnimation;
|
|
|
|
bool _showTutorial = false;
|
|
|
|
bool _showTutorial = false;
|
|
|
|
|
|
|
|
bool _hasPlayedIntroZoomHint = false;
|
|
|
|
|
|
|
|
|
|
|
|
@override
|
|
|
|
@override
|
|
|
|
void initState() {
|
|
|
|
void initState() {
|
|
|
|
@ -41,10 +49,52 @@ class _OrganSelectorPageState extends State<OrganSelectorPage> {
|
|
|
|
_appState = getIt.get<AppState>();
|
|
|
|
_appState = getIt.get<AppState>();
|
|
|
|
dialogService = getIt<DialogService>();
|
|
|
|
dialogService = getIt<DialogService>();
|
|
|
|
cacheService = getIt<CacheService>();
|
|
|
|
cacheService = getIt<CacheService>();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
_introZoomHintController = AnimationController(
|
|
|
|
|
|
|
|
vsync: this,
|
|
|
|
|
|
|
|
duration: const Duration(milliseconds: 2000),
|
|
|
|
|
|
|
|
)..addListener(() {
|
|
|
|
|
|
|
|
if (mounted) setState(() {});
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
_introZoomHintAnimation = TweenSequence<double>([
|
|
|
|
|
|
|
|
TweenSequenceItem(
|
|
|
|
|
|
|
|
tween: Tween<double>(begin: 1.0, end: 1.25),
|
|
|
|
|
|
|
|
weight: 45,
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
TweenSequenceItem(
|
|
|
|
|
|
|
|
tween: Tween<double>(begin: 1.25, end: 1.0),
|
|
|
|
|
|
|
|
weight: 55,
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
]).animate(CurvedAnimation(
|
|
|
|
|
|
|
|
parent: _introZoomHintController,
|
|
|
|
|
|
|
|
curve: Curves.easeInOut,
|
|
|
|
|
|
|
|
));
|
|
|
|
|
|
|
|
|
|
|
|
_checkAndShowTutorial();
|
|
|
|
_checkAndShowTutorial();
|
|
|
|
|
|
|
|
_playIntroZoomHint();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@override
|
|
|
|
|
|
|
|
void dispose() {
|
|
|
|
|
|
|
|
_introZoomHintController.dispose();
|
|
|
|
|
|
|
|
super.dispose();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Future<void> _playIntroZoomHint() async {
|
|
|
|
|
|
|
|
if (_hasPlayedIntroZoomHint) return;
|
|
|
|
|
|
|
|
_hasPlayedIntroZoomHint = true;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
await Future.delayed(const Duration(milliseconds: 700));
|
|
|
|
|
|
|
|
if (!mounted) return;
|
|
|
|
|
|
|
|
_introZoomHintController.forward(from: 0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
Future<void> _checkAndShowTutorial() async {
|
|
|
|
Future<void> _checkAndShowTutorial() async {
|
|
|
|
|
|
|
|
if (!_enableTutorialOverlay) {
|
|
|
|
|
|
|
|
_showTutorial = false;
|
|
|
|
|
|
|
|
return;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// final hasSeenTutorial = cacheService.getBool(key: CacheConst.organSelectorTutorialShown) ?? false;
|
|
|
|
// final hasSeenTutorial = cacheService.getBool(key: CacheConst.organSelectorTutorialShown) ?? false;
|
|
|
|
// if (!hasSeenTutorial) {
|
|
|
|
// if (!hasSeenTutorial) {
|
|
|
|
// Show tutorial after a short delay to ensure the screen is fully built
|
|
|
|
// Show tutorial after a short delay to ensure the screen is fully built
|
|
|
|
@ -118,7 +168,11 @@ class _OrganSelectorPageState extends State<OrganSelectorPage> {
|
|
|
|
Expanded(
|
|
|
|
Expanded(
|
|
|
|
child: Stack(
|
|
|
|
child: Stack(
|
|
|
|
children: [
|
|
|
|
children: [
|
|
|
|
_buildBodyViewer(viewModel),
|
|
|
|
SafeArea(
|
|
|
|
|
|
|
|
top: false,
|
|
|
|
|
|
|
|
bottom: false,
|
|
|
|
|
|
|
|
child: _buildBodyViewer(viewModel),
|
|
|
|
|
|
|
|
),
|
|
|
|
_buildViewToggleButtons(viewModel),
|
|
|
|
_buildViewToggleButtons(viewModel),
|
|
|
|
// _buildViewZoomButtons(viewModel),
|
|
|
|
// _buildViewZoomButtons(viewModel),
|
|
|
|
_buildBottomSheet(viewModel),
|
|
|
|
_buildBottomSheet(viewModel),
|
|
|
|
@ -131,7 +185,7 @@ class _OrganSelectorPageState extends State<OrganSelectorPage> {
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
// Tutorial overlay
|
|
|
|
// Tutorial overlay
|
|
|
|
if (_showTutorial)
|
|
|
|
if (_enableTutorialOverlay && _showTutorial)
|
|
|
|
PinchZoomTutorialOverlay(
|
|
|
|
PinchZoomTutorialOverlay(
|
|
|
|
onComplete: _onTutorialComplete,
|
|
|
|
onComplete: _onTutorialComplete,
|
|
|
|
),
|
|
|
|
),
|
|
|
|
@ -152,7 +206,13 @@ class _OrganSelectorPageState extends State<OrganSelectorPage> {
|
|
|
|
height: 24.h,
|
|
|
|
height: 24.h,
|
|
|
|
),
|
|
|
|
),
|
|
|
|
padding: EdgeInsetsDirectional.only(start: 12, end: 12),
|
|
|
|
padding: EdgeInsetsDirectional.only(start: 12, end: 12),
|
|
|
|
onPressed: () => Navigator.pop(context),
|
|
|
|
onPressed: () {
|
|
|
|
|
|
|
|
// Clear selected organs and sheet status when going back
|
|
|
|
|
|
|
|
final viewModel = context.read<SymptomsCheckerViewModel>();
|
|
|
|
|
|
|
|
viewModel.clearAllSelections();
|
|
|
|
|
|
|
|
viewModel.setBottomSheetExpanded(false);
|
|
|
|
|
|
|
|
Navigator.pop(context);
|
|
|
|
|
|
|
|
},
|
|
|
|
highlightColor: Colors.transparent,
|
|
|
|
highlightColor: Colors.transparent,
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
@ -175,45 +235,82 @@ class _OrganSelectorPageState extends State<OrganSelectorPage> {
|
|
|
|
|
|
|
|
|
|
|
|
Widget _buildBodyViewer(SymptomsCheckerViewModel viewModel) {
|
|
|
|
Widget _buildBodyViewer(SymptomsCheckerViewModel viewModel) {
|
|
|
|
return GestureDetector(
|
|
|
|
return GestureDetector(
|
|
|
|
onHorizontalDragEnd: (details) {
|
|
|
|
onHorizontalDragEnd: !_enableSwipeToFlip
|
|
|
|
// Swipe left or right to toggle view
|
|
|
|
? null
|
|
|
|
if (details.primaryVelocity != null) {
|
|
|
|
: (details) {
|
|
|
|
if (details.primaryVelocity! < -200 || details.primaryVelocity! > 200) {
|
|
|
|
// Swipe left or right to toggle view
|
|
|
|
viewModel.toggleView();
|
|
|
|
if (details.primaryVelocity != null) {
|
|
|
|
}
|
|
|
|
if (details.primaryVelocity! < -200 || details.primaryVelocity! > 200) {
|
|
|
|
}
|
|
|
|
viewModel.toggleView();
|
|
|
|
},
|
|
|
|
}
|
|
|
|
child: Padding(
|
|
|
|
}
|
|
|
|
padding: EdgeInsets.fromLTRB(16.h, 16.h, 16.h, 60.h),
|
|
|
|
|
|
|
|
child: AnimatedSwitcher(
|
|
|
|
|
|
|
|
duration: const Duration(milliseconds: 600),
|
|
|
|
|
|
|
|
transitionBuilder: (child, animation) => _build3DFlipTransition(child, animation),
|
|
|
|
|
|
|
|
switchInCurve: Curves.easeInOut,
|
|
|
|
|
|
|
|
switchOutCurve: Curves.easeInOut,
|
|
|
|
|
|
|
|
child: Builder(
|
|
|
|
|
|
|
|
key: ValueKey<BodyView>(viewModel.currentView),
|
|
|
|
|
|
|
|
builder: (context) {
|
|
|
|
|
|
|
|
// Detect female gender from viewModel; allow Arabic value as fallback
|
|
|
|
|
|
|
|
final bool isFemale =
|
|
|
|
|
|
|
|
(viewModel.selectedGender != null && (viewModel.selectedGender!.toLowerCase() == 'female' || viewModel.selectedGender == 'أنثى'));
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
final String bodyAsset = viewModel.currentView == BodyView.front
|
|
|
|
|
|
|
|
? (isFemale ? AppAssets.fullBodyFrontFemale : AppAssets.fullBodyFrontMale)
|
|
|
|
|
|
|
|
: (isFemale ? AppAssets.fullBodyBackFemale : AppAssets.fullBodyBackMale);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return InteractiveBodyWidget(
|
|
|
|
|
|
|
|
bodyImageAsset: bodyAsset,
|
|
|
|
|
|
|
|
organs: viewModel.currentOrgans,
|
|
|
|
|
|
|
|
selectedOrganIds: viewModel.selectedOrganIds,
|
|
|
|
|
|
|
|
onOrganTap: viewModel.toggleOrganSelection,
|
|
|
|
|
|
|
|
isBodyHidden: viewModel.isBodyHidden,
|
|
|
|
|
|
|
|
tooltipOrganId: viewModel.tooltipOrganId,
|
|
|
|
|
|
|
|
isArabic: _appState.isArabic(),
|
|
|
|
|
|
|
|
zoomScale: viewModel.currentZoomScale,
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
),
|
|
|
|
child: LayoutBuilder(
|
|
|
|
),
|
|
|
|
builder: (context, constraints) {
|
|
|
|
|
|
|
|
final bool isExpanded = viewModel.isBottomSheetExpanded;
|
|
|
|
|
|
|
|
final double screenHeight = MediaQuery.of(context).size.height;
|
|
|
|
|
|
|
|
final double extraBottomInset = isExpanded ? screenHeight * _expandedSheetHeightFactor : 0;
|
|
|
|
|
|
|
|
final bool isUserZoomedIn = viewModel.currentZoomScale > 1.01;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Widget buildInteractiveBody({required bool useExpandedZoom}) {
|
|
|
|
|
|
|
|
return AnimatedSwitcher(
|
|
|
|
|
|
|
|
duration: const Duration(milliseconds: 600),
|
|
|
|
|
|
|
|
transitionBuilder: (child, animation) => _build3DFlipTransition(child, animation),
|
|
|
|
|
|
|
|
switchInCurve: Curves.easeInOut,
|
|
|
|
|
|
|
|
switchOutCurve: Curves.easeInOut,
|
|
|
|
|
|
|
|
child: Builder(
|
|
|
|
|
|
|
|
key: ValueKey<BodyView>(viewModel.currentView),
|
|
|
|
|
|
|
|
builder: (context) {
|
|
|
|
|
|
|
|
final bool isFemale = (viewModel.selectedGender != null && (viewModel.selectedGender!.toLowerCase() == 'female' || viewModel.selectedGender == 'أنثى'));
|
|
|
|
|
|
|
|
final double effectiveZoomScale = viewModel.currentZoomScale * _introZoomHintAnimation.value;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
final String bodyAsset = viewModel.currentView == BodyView.front
|
|
|
|
|
|
|
|
? (isFemale ? AppAssets.fullBodyFrontFemale : AppAssets.fullBodyFrontMale)
|
|
|
|
|
|
|
|
: (isFemale ? AppAssets.fullBodyBackFemale : AppAssets.fullBodyBackMale);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
final body = InteractiveBodyWidget(
|
|
|
|
|
|
|
|
bodyImageAsset: bodyAsset,
|
|
|
|
|
|
|
|
organs: viewModel.currentOrgans,
|
|
|
|
|
|
|
|
selectedOrganIds: viewModel.selectedOrganIds,
|
|
|
|
|
|
|
|
onOrganTap: viewModel.toggleOrganSelection,
|
|
|
|
|
|
|
|
isBodyHidden: viewModel.isBodyHidden,
|
|
|
|
|
|
|
|
tooltipOrganId: viewModel.tooltipOrganId,
|
|
|
|
|
|
|
|
isArabic: _appState.isArabic(),
|
|
|
|
|
|
|
|
zoomScale: effectiveZoomScale,
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return body;
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (!isExpanded) {
|
|
|
|
|
|
|
|
return Padding(
|
|
|
|
|
|
|
|
padding: EdgeInsets.fromLTRB(16.h, 16.h, 16.h, 60.h),
|
|
|
|
|
|
|
|
child: buildInteractiveBody(useExpandedZoom: false),
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return SingleChildScrollView(
|
|
|
|
|
|
|
|
physics: isExpanded && !isUserZoomedIn ? const ClampingScrollPhysics() : const NeverScrollableScrollPhysics(),
|
|
|
|
|
|
|
|
child: ConstrainedBox(
|
|
|
|
|
|
|
|
constraints: BoxConstraints(
|
|
|
|
|
|
|
|
minHeight: constraints.maxHeight + extraBottomInset,
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
child: Padding(
|
|
|
|
|
|
|
|
padding: EdgeInsets.only(
|
|
|
|
|
|
|
|
bottom: extraBottomInset,
|
|
|
|
|
|
|
|
top: 24.h,
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
child: Padding(
|
|
|
|
|
|
|
|
padding: EdgeInsets.fromLTRB(16.h, 16.h, 16.h, 60.h),
|
|
|
|
|
|
|
|
child: buildInteractiveBody(useExpandedZoom: true),
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
},
|
|
|
|
),
|
|
|
|
),
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -408,37 +505,73 @@ class _OrganSelectorPageState extends State<OrganSelectorPage> {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
Widget _buildExpandCollapseButton(SymptomsCheckerViewModel viewModel) {
|
|
|
|
Widget _buildExpandCollapseButton(SymptomsCheckerViewModel viewModel) {
|
|
|
|
|
|
|
|
final organCount = viewModel.selectedOrgans.length;
|
|
|
|
|
|
|
|
final showBadge = !viewModel.isBottomSheetExpanded && organCount > 0;
|
|
|
|
|
|
|
|
|
|
|
|
return PositionedDirectional(
|
|
|
|
return PositionedDirectional(
|
|
|
|
end: 24.w,
|
|
|
|
end: 24.w,
|
|
|
|
top: -24.h,
|
|
|
|
top: -24.h,
|
|
|
|
child: GestureDetector(
|
|
|
|
child: GestureDetector(
|
|
|
|
onTap: viewModel.toggleBottomSheet,
|
|
|
|
onTap: viewModel.toggleBottomSheet,
|
|
|
|
behavior: HitTestBehavior.opaque,
|
|
|
|
behavior: HitTestBehavior.opaque,
|
|
|
|
child: Container(
|
|
|
|
child: SizedBox(
|
|
|
|
width: 70.w,
|
|
|
|
width: 70.w,
|
|
|
|
height: 70.h,
|
|
|
|
height: 70.h,
|
|
|
|
alignment: Alignment.center,
|
|
|
|
child: Stack(
|
|
|
|
child: Container(
|
|
|
|
clipBehavior: Clip.none,
|
|
|
|
width: 48.w,
|
|
|
|
children: [
|
|
|
|
height: 48.h,
|
|
|
|
Align(
|
|
|
|
decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
|
|
|
|
alignment: Alignment.center,
|
|
|
|
color: AppColors.whiteColor,
|
|
|
|
child: Container(
|
|
|
|
borderRadius: 11.r,
|
|
|
|
width: 48.w,
|
|
|
|
),
|
|
|
|
height: 48.h,
|
|
|
|
child: Center(
|
|
|
|
decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
|
|
|
|
child: Transform.flip(
|
|
|
|
color: AppColors.whiteColor,
|
|
|
|
flipX: _appState.isArabic(),
|
|
|
|
borderRadius: 11.r,
|
|
|
|
child: AnimatedRotation(
|
|
|
|
),
|
|
|
|
duration: const Duration(milliseconds: 300),
|
|
|
|
child: Center(
|
|
|
|
turns: viewModel.isBottomSheetExpanded ? 0.25 : -0.25,
|
|
|
|
child: Transform.flip(
|
|
|
|
child: Utils.buildSvgWithAssets(
|
|
|
|
flipX: _appState.isArabic(),
|
|
|
|
icon: AppAssets.arrowRight,
|
|
|
|
child: AnimatedRotation(
|
|
|
|
width: 25.w,
|
|
|
|
duration: const Duration(milliseconds: 300),
|
|
|
|
height: 25.h,
|
|
|
|
turns: viewModel.isBottomSheetExpanded ? 0.25 : -0.25,
|
|
|
|
|
|
|
|
child: Utils.buildSvgWithAssets(
|
|
|
|
|
|
|
|
icon: AppAssets.arrowRight,
|
|
|
|
|
|
|
|
width: 25.w,
|
|
|
|
|
|
|
|
height: 25.h,
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
if (showBadge)
|
|
|
|
|
|
|
|
PositionedDirectional(
|
|
|
|
|
|
|
|
top: 8.h,
|
|
|
|
|
|
|
|
end: 8.w,
|
|
|
|
|
|
|
|
child: Container(
|
|
|
|
|
|
|
|
width: 22.w,
|
|
|
|
|
|
|
|
height: 22.h,
|
|
|
|
|
|
|
|
alignment: Alignment.center,
|
|
|
|
|
|
|
|
decoration: BoxDecoration(
|
|
|
|
|
|
|
|
color: AppColors.primaryRedColor,
|
|
|
|
|
|
|
|
shape: BoxShape.circle,
|
|
|
|
|
|
|
|
border: Border.all(
|
|
|
|
|
|
|
|
color: AppColors.whiteColor,
|
|
|
|
|
|
|
|
width: 1.5,
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
child: Text(
|
|
|
|
|
|
|
|
'$organCount',
|
|
|
|
|
|
|
|
style: TextStyle(
|
|
|
|
|
|
|
|
color: AppColors.whiteColor,
|
|
|
|
|
|
|
|
fontSize: 10.f,
|
|
|
|
|
|
|
|
fontWeight: FontWeight.w700,
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
],
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
|
