You cannot select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
	
	
		
			166 lines
		
	
	
		
			5.5 KiB
		
	
	
	
		
			Dart
		
	
		
		
			
		
	
	
			166 lines
		
	
	
		
			5.5 KiB
		
	
	
	
		
			Dart
		
	
| 
											2 months ago
										 | import 'package:flutter/material.dart'; | ||
|  | import 'package:hmg_patient_app_new/core/app_assets.dart'; | ||
|  | import 'package:hmg_patient_app_new/core/enums.dart'; | ||
|  | import 'package:hmg_patient_app_new/core/utils/size_utils.dart'; | ||
|  | import 'package:hmg_patient_app_new/core/utils/utils.dart'; | ||
|  | import 'package:hmg_patient_app_new/extensions/string_extensions.dart'; | ||
|  | import 'package:hmg_patient_app_new/extensions/widget_extensions.dart'; | ||
|  | 
 | ||
|  | class CustomCountryDropdown extends StatefulWidget { | ||
|  |   final List<Country> countryList; | ||
|  |   final Function(Country)? onCountryChange; | ||
|  |   final bool isRtl; | ||
|  | 
 | ||
|  |   const CustomCountryDropdown({ | ||
|  |     Key? key, | ||
|  |     required this.countryList, | ||
|  |     this.onCountryChange, | ||
|  |     required this.isRtl, | ||
|  |   }) : super(key: key); | ||
|  | 
 | ||
|  |   @override | ||
|  |   _CustomCountryDropdownState createState() => _CustomCountryDropdownState(); | ||
|  | } | ||
|  | 
 | ||
|  | class _CustomCountryDropdownState extends State<CustomCountryDropdown> { | ||
|  |   Country? selectedCountry; | ||
|  |   late OverlayEntry _overlayEntry; | ||
|  |   bool _isDropdownOpen = false; | ||
|  | 
 | ||
|  |   @override | ||
|  |   void initState() { | ||
|  |     super.initState(); | ||
|  |     selectedCountry = Country.saudiArabia; | ||
|  |   } | ||
|  | 
 | ||
|  |   @override | ||
|  |   Widget build(BuildContext context) { | ||
|  |     return GestureDetector( | ||
|  |       onTap: () { | ||
|  |         if (_isDropdownOpen) { | ||
|  |           _closeDropdown(); | ||
|  |         } else { | ||
|  |           _openDropdown(); | ||
|  |         } | ||
|  |       }, | ||
|  |       child: Container( | ||
|  |         height: 40.h, | ||
|  |         decoration: RoundedRectangleBorder().toSmoothCornerDecoration(borderRadius: 10.h), | ||
|  |         child: Row( | ||
|  |           children: [ | ||
|  |             Utils.buildSvgWithAssets(icon: selectedCountry != null ? selectedCountry!.iconPath : AppAssets.ksa, width: 40.h, height: 40.h), | ||
|  |             SizedBox(width: 8.h), | ||
|  |             Utils.buildSvgWithAssets(icon: _isDropdownOpen ? AppAssets.dropdow_icon : AppAssets.dropdow_icon), | ||
|  |             SizedBox(width: 4.h), | ||
|  |             Text( | ||
|  |               selectedCountry != null ? selectedCountry!.displayName : "Select Country", | ||
|  |               style: TextStyle( | ||
|  |                 fontSize: 14.fSize, | ||
|  |                 height: 21 / 14, | ||
|  |                 fontWeight: FontWeight.w500, | ||
|  |                 letterSpacing: -0.2, | ||
|  |               ), | ||
|  |             ), | ||
|  |           ], | ||
|  |         ), | ||
|  |       ), | ||
|  |     ); | ||
|  |   } | ||
|  | 
 | ||
|  |   void _openDropdown() { | ||
|  |     RenderBox renderBox = context.findRenderObject() as RenderBox; | ||
|  |     Offset offset = renderBox.localToGlobal(Offset.zero); | ||
|  | 
 | ||
|  |     _overlayEntry = OverlayEntry( | ||
|  |       builder: (context) => Stack( | ||
|  |         children: [ | ||
|  |           // Dismiss dropdown when tapping outside
 | ||
|  |           Positioned.fill( | ||
|  |             child: GestureDetector( | ||
|  |               onTap: _closeDropdown, | ||
|  |               behavior: HitTestBehavior.translucent, | ||
|  |               child: Container(), | ||
|  |             ), | ||
|  |           ), | ||
|  |           Positioned( | ||
|  |             top: offset.dy + renderBox.size.height, | ||
|  |             left: widget.isRtl ? offset.dx + 15.h : offset.dx - 15.h, | ||
|  |             width: renderBox.size.width, | ||
|  |             child: Material( | ||
|  |               child: Container( | ||
|  |                 decoration: RoundedRectangleBorder().toSmoothCornerDecoration( | ||
|  |                   color: Colors.white, | ||
|  |                   borderRadius: 12, | ||
|  |                 ), | ||
|  |                 // decoration: BoxDecoration(
 | ||
|  |                 //   borderRadius: BorderRadius.circular(12),
 | ||
|  |                 //   boxShadow: [
 | ||
|  |                 //     BoxShadow(
 | ||
|  |                 //       color: Color(0xFFF8F8FA),
 | ||
|  |                 //       blurRadius: 8.h,
 | ||
|  |                 //       offset: Offset(
 | ||
|  |                 //         0,
 | ||
|  |                 //         2,
 | ||
|  |                 //       ),
 | ||
|  |                 //     ),
 | ||
|  |                 //   ],
 | ||
|  |                 // ),
 | ||
|  |                 child: Column( | ||
|  |                   children: widget.countryList | ||
|  |                       .map( | ||
|  |                         (country) => GestureDetector( | ||
|  |                           onTap: () { | ||
|  |                             setState(() { | ||
|  |                               selectedCountry = country; | ||
|  |                             }); | ||
|  |                             widget.onCountryChange?.call(country); | ||
|  |                             _closeDropdown(); | ||
|  |                           }, | ||
|  |                           child: Container( | ||
|  |                             padding: EdgeInsets.symmetric(vertical: 12.h, horizontal: 16.h), | ||
|  |                             decoration: RoundedRectangleBorder().toSmoothCornerDecoration( | ||
|  |                               borderRadius: 16.h, | ||
|  |                             ), | ||
|  |                             child: Row( | ||
|  |                               children: [ | ||
|  |                                 Utils.buildSvgWithAssets( | ||
|  |                                   icon: country.iconPath, | ||
|  |                                   width: 38.h, | ||
|  |                                   height: 38.h, | ||
|  |                                 ), | ||
|  |                                 SizedBox(width: 12.h), | ||
|  |                                 Text(country.displayName, | ||
|  |                                     style: TextStyle( | ||
|  |                                       fontSize: 14.fSize, | ||
|  |                                       height: 21 / 14, | ||
|  |                                       fontWeight: FontWeight.w500, | ||
|  |                                       letterSpacing: -0.2, | ||
|  |                                     )), | ||
|  |                               ], | ||
|  |                             ), | ||
|  |                           ), | ||
|  |                         ), | ||
|  |                       ) | ||
|  |                       .toList(), | ||
|  |                 ), | ||
|  |               ), | ||
|  |             ), | ||
|  |           ), | ||
|  |         ], | ||
|  |       ), | ||
|  |     ); | ||
|  | 
 | ||
|  |     Overlay.of(context)?.insert(_overlayEntry); | ||
|  |     setState(() { | ||
|  |       _isDropdownOpen = true; | ||
|  |     }); | ||
|  |   } | ||
|  | 
 | ||
|  |   void _closeDropdown() { | ||
|  |     _overlayEntry.remove(); | ||
|  |     setState(() { | ||
|  |       _isDropdownOpen = false; | ||
|  |     }); | ||
|  |   } | ||
|  | } |