From 551475328893121d0329e55ed54e53d7beddfcad Mon Sep 17 00:00:00 2001 From: "Mirza.Shafique" Date: Mon, 25 Oct 2021 17:10:08 +0300 Subject: [PATCH] Zoom Avatar implementation --- .../prescription_details_page.dart | 54 ++++++++++---- .../prescription_items_page.dart | 72 +++++++++++++------ lib/widgets/avatar/large_avatar.dart | 42 ++++++----- .../medical/time_line_new_widget.dart | 1 + lib/widgets/hospital_location.dart | 14 ++-- lib/widgets/show_zoom_image_dialog.dart | 48 +++++++++++++ 6 files changed, 170 insertions(+), 61 deletions(-) create mode 100644 lib/widgets/show_zoom_image_dialog.dart diff --git a/lib/pages/medical/prescriptions/prescription_details_page.dart b/lib/pages/medical/prescriptions/prescription_details_page.dart index ebc3c241..3fbc2baf 100644 --- a/lib/pages/medical/prescriptions/prescription_details_page.dart +++ b/lib/pages/medical/prescriptions/prescription_details_page.dart @@ -10,9 +10,11 @@ import 'package:diplomaticquarterapp/uitl/app_toast.dart'; import 'package:diplomaticquarterapp/uitl/date_uitl.dart'; import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart'; import 'package:diplomaticquarterapp/uitl/utils.dart'; +import 'package:diplomaticquarterapp/uitl/utils_new.dart'; import 'package:diplomaticquarterapp/widgets/buttons/defaultButton.dart'; import 'package:diplomaticquarterapp/widgets/new_design/doctor_header.dart'; import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart'; +import 'package:diplomaticquarterapp/widgets/show_zoom_image_dialog.dart'; import 'package:diplomaticquarterapp/widgets/transitions/fade_page.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; @@ -78,20 +80,46 @@ class PrescriptionDetailsPage extends StatelessWidget { children: [ Row( children: [ - Container( - decoration: BoxDecoration( - border: Border.all(width: 1.0, color: Color(0xffEBEBEB)), - borderRadius: BorderRadius.all(Radius.circular(30.0)), - ), - child: ClipRRect( - borderRadius: BorderRadius.all(Radius.circular(30)), - child: Image.network( - prescriptionReport.imageSRCUrl, - fit: BoxFit.cover, - width: 48, - height: 48, - ), + // Container( + // decoration: BoxDecoration( + // border: Border.all(width: 1.0, color: Color(0xffEBEBEB)), + // borderRadius: BorderRadius.all(Radius.circular(30.0)), + // ), + // child: ClipRRect( + // borderRadius: BorderRadius.all(Radius.circular(30)), + // child: Image.network( + // prescriptionReport.imageSRCUrl, + // fit: BoxFit.cover, + // width: 48, + // height: 48, + // ), + // ), + // ), + InkWell( + child: Stack( + alignment: Alignment.center, + children: [ + Container( + child: Image.network( + prescriptionReport.imageSRCUrl, + fit: BoxFit.cover, + width: 48, + height: 49, + ), + margin: EdgeInsets.zero, + clipBehavior: Clip.antiAlias, + decoration: cardRadius(2000), + ), + Container( + child: Icon(Icons.search,size: 18,color: Colors.white,), + padding: EdgeInsets.all(6), + decoration: containerRadius(Colors.black.withOpacity(0.3), 200), + ) + ], ), + onTap: (){ + showZoomImageDialog(context, prescriptionReport.imageSRCUrl); + }, ), SizedBox(width: 12), Expanded( diff --git a/lib/pages/medical/prescriptions/prescription_items_page.dart b/lib/pages/medical/prescriptions/prescription_items_page.dart index 6e30a3f7..4611eed1 100644 --- a/lib/pages/medical/prescriptions/prescription_items_page.dart +++ b/lib/pages/medical/prescriptions/prescription_items_page.dart @@ -14,6 +14,7 @@ import 'package:diplomaticquarterapp/widgets/buttons/defaultButton.dart'; import 'package:diplomaticquarterapp/widgets/my_rich_text.dart'; import 'package:diplomaticquarterapp/widgets/new_design/doctor_header.dart'; import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart'; +import 'package:diplomaticquarterapp/widgets/show_zoom_image_dialog.dart'; import 'package:diplomaticquarterapp/widgets/transitions/fade_page.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; @@ -37,7 +38,6 @@ class PrescriptionItemsPage extends StatelessWidget { appBarTitle: prescriptions.doctorName, baseViewModel: model, showNewAppBar: true, - backgroundColor: Color(0xffF8F8F8), showNewAppBarTitle: true, body: Column( children: [ @@ -108,20 +108,31 @@ class PrescriptionItemsPage extends StatelessWidget { mHeight(10), Row( children: [ - Container( - child: Container( - child: Image.network( - model.prescriptionReportListINP[index].imageSRCUrl, - fit: BoxFit.cover, - width: 60, - height: 60, - ), - margin: EdgeInsets.zero, - clipBehavior: Clip.antiAlias, - decoration: cardRadius(2000), + InkWell( + child: Stack( + alignment: Alignment.center, + children: [ + Container( + child: Image.network( + model.prescriptionReportListINP[index].imageSRCUrl, + fit: BoxFit.cover, + width: 60, + height: 60, + ), + margin: EdgeInsets.zero, + clipBehavior: Clip.antiAlias, + decoration: cardRadius(2000), + ), + Container( + child: Icon(Icons.search,size: 18,color: Colors.white,), + padding: EdgeInsets.all(6), + decoration: containerRadius(Colors.black.withOpacity(0.3), 200), + ) + ], ), - clipBehavior: Clip.antiAlias, - decoration: containerColorRadiusBorderWidth(Colors.white, 200, Colors.grey[200], 1), + onTap: (){ + showZoomImageDialog(context, model.prescriptionReportListINP[index].imageSRCUrl,); + }, ), mWidth(12), Column( @@ -269,16 +280,31 @@ class PrescriptionItemsPage extends StatelessWidget { Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ - Container( - child: Image.network( - model.prescriptionReportEnhList[index].imageSRCUrl, - fit: BoxFit.cover, - width: 48, - height: 48, + InkWell( + child: Stack( + alignment: Alignment.center, + children: [ + Container( + child: Image.network( + model.prescriptionReportEnhList[index].imageSRCUrl, + fit: BoxFit.cover, + width: 60, + height: 60, + ), + margin: EdgeInsets.zero, + clipBehavior: Clip.antiAlias, + decoration: cardRadius(2000), + ), + Container( + child: Icon(Icons.search,size: 18,color: Colors.white,), + padding: EdgeInsets.all(6), + decoration: containerRadius(Colors.black.withOpacity(0.3), 200), + ) + ], ), - margin: EdgeInsets.zero, - clipBehavior: Clip.antiAlias, - decoration: cardRadius(2000), + onTap: (){ + showZoomImageDialog(context, model.prescriptionReportEnhList[index].imageSRCUrl,); + }, ), mWidth(12), Expanded( diff --git a/lib/widgets/avatar/large_avatar.dart b/lib/widgets/avatar/large_avatar.dart index e1f395d8..64b72f2b 100644 --- a/lib/widgets/avatar/large_avatar.dart +++ b/lib/widgets/avatar/large_avatar.dart @@ -1,7 +1,10 @@ +import 'package:diplomaticquarterapp/uitl/utils_new.dart'; import 'package:diplomaticquarterapp/widgets/data_display/text.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; +import '../show_zoom_image_dialog.dart'; + /// LargeAvatar /// [name] the user name /// [url] the image url @@ -11,16 +14,7 @@ import 'package:flutter/material.dart'; /// [height] the avatar height /// [onTap] on tap function class LargeAvatar extends StatelessWidget { - LargeAvatar( - {Key key, - @required this.name, - this.url, - this.disableProfileView: false, - this.radius = 70.0, - this.width = 70, - this.height = 60, - this.onTap}) - : super(key: key); + LargeAvatar({Key key, @required this.name, this.url, this.disableProfileView: false, this.radius = 70.0, this.width = 70, this.height = 60, this.onTap}) : super(key: key); final String name; final String url; @@ -35,11 +29,22 @@ class LargeAvatar extends StatelessWidget { return Center( child: ClipRRect( borderRadius: BorderRadius.all(Radius.circular(radius)), - child: Image.network( - url.trim(), - fit: BoxFit.fill, - width: width, - height: height, + child: Stack( + alignment: Alignment.center, + children: [ + Image.network( + url.trim(), + fit: BoxFit.fill, + width: width, + height: height, + ), + if (!disableProfileView) + Container( + child: Icon(Icons.search,size: 18,color: Colors.white,), + padding: EdgeInsets.all(6), + decoration: containerRadius(Colors.black.withOpacity(0.3), 200), + ) + ], ), ), ); @@ -55,7 +60,12 @@ class LargeAvatar extends StatelessWidget { @override Widget build(BuildContext context) { return InkWell( - onTap: disableProfileView ? null : onTap, + onTap: disableProfileView + ? null + : () { + print("ssssss " + url.trim()); + showZoomImageDialog(context, url.trim() ?? ""); + }, child: Container( decoration: BoxDecoration( // gradient: LinearGradient( diff --git a/lib/widgets/data_display/medical/time_line_new_widget.dart b/lib/widgets/data_display/medical/time_line_new_widget.dart index a7d180c5..3851f329 100644 --- a/lib/widgets/data_display/medical/time_line_new_widget.dart +++ b/lib/widgets/data_display/medical/time_line_new_widget.dart @@ -351,6 +351,7 @@ class TimelineNewWidget extends StatelessWidget { ))); }, name: appoitmentAllHistoryResul.doctorNameObj, + disableProfileView: true, url: appoitmentAllHistoryResul.doctorImageURL, width: 30, height: 30, diff --git a/lib/widgets/hospital_location.dart b/lib/widgets/hospital_location.dart index dd70d06f..986daa6c 100644 --- a/lib/widgets/hospital_location.dart +++ b/lib/widgets/hospital_location.dart @@ -1,11 +1,14 @@ import 'package:diplomaticquarterapp/core/model/contactus/get_hmg_locations.dart'; import 'package:diplomaticquarterapp/core/viewModels/project_view_model.dart'; import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart'; +import 'package:diplomaticquarterapp/uitl/utils_new.dart'; +import 'package:diplomaticquarterapp/widgets/show_zoom_image_dialog.dart'; import 'package:flutter/material.dart'; import 'package:maps_launcher/maps_launcher.dart'; import 'package:provider/provider.dart'; import 'package:url_launcher/url_launcher.dart'; +import 'avatar/large_avatar.dart'; import 'my_rich_text.dart'; class HospitalLocation extends StatelessWidget { @@ -46,15 +49,8 @@ class HospitalLocation extends StatelessWidget { Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ - ClipRRect( - borderRadius: BorderRadius.circular(30), - child: Image.network( - location?.projectImageURL?.toString() ?? 'https://hmgwebservices.com/Images/Hospitals/15.jpg', - width: 48, - height: 48, - fit: BoxFit.cover, - ), - ), + LargeAvatar(url: location?.projectImageURL?.toString() ?? 'https://hmgwebservices.com/Images/Hospitals/15.jpg',width: 48,height: 48, name: "",), + SizedBox(width: 10), Expanded( child: Column( diff --git a/lib/widgets/show_zoom_image_dialog.dart b/lib/widgets/show_zoom_image_dialog.dart new file mode 100644 index 00000000..2340c259 --- /dev/null +++ b/lib/widgets/show_zoom_image_dialog.dart @@ -0,0 +1,48 @@ +import 'package:cached_network_image/cached_network_image.dart'; +import 'package:diplomaticquarterapp/uitl/utils_new.dart'; +import 'package:flutter/material.dart'; +import 'package:progress_hud_v2/generated/i18n.dart'; + +showZoomImageDialog(BuildContext context, String url) { + showDialog( + context: context, + builder: (BuildContext context) => Dialog( + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(12.0), + ), //this right here + child: ShowZoomImage(url), + ), + ); +} + +class ShowZoomImage extends StatelessWidget { + String url; + + ShowZoomImage(this.url); + + @override + Widget build(BuildContext context) { + return Container( + width: double.infinity, + child: Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.end, + crossAxisAlignment: CrossAxisAlignment.end, + children: [ + IconButton( + icon: Icon(Icons.close), + onPressed: () { + Navigator.pop(context); + }, + ), + CachedNetworkImage( + imageUrl: url, + height: MediaQuery.of(context).size.width / 1.4, + width: double.infinity, + ), + mHeight(12), + ], + ), + ); + } +}