import 'package:hmg_patient_app/core/viewModels/project_view_model.dart'; import 'package:hmg_patient_app/extensions/string_extensions.dart'; import 'package:hmg_patient_app/theme/colors.dart'; import 'package:hmg_patient_app/uitl/translations_delegate_base.dart'; import 'package:expandable/expandable.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:provider/provider.dart'; /// App Expandable Notifier with animation /// [headerWidget] widget want to show in the header /// [bodyWidget] widget want to show in the body /// [title] the widget title /// [collapsed] The widget shown in the collapsed state class AppExpandableNotifier extends StatefulWidget { final Widget? headerWidget; final Widget? bodyWidget; final String? title; final Widget? collapsed; final bool isExpand; bool expandFlag = false; bool hasCounter = false; String counter = "0"; Color widgetColor; Color? headerColor; Color? completeHeaderColor; var controller = new ExpandableController(); bool isTitleSingleLine; bool isDisabled = false; bool isDoctorSearchResult = false; final String? projectTitleTop; final String? projectTitleBottom; final bool showDropDownIconWithCustomHeader; final BorderRadius? headerRadius; final bool applyBackgroundColor; final bool applyBackgroundToOnlyHeader; final double? paddingValue; final bool isHMC; final bool isForAppointmentSearch; AppExpandableNotifier( {this.headerWidget, this.bodyWidget, this.title, this.collapsed, this.isExpand = false, this.isTitleSingleLine = true, this.hasCounter = false, this.counter = "0", this.widgetColor = Colors.white, this.headerColor, this.completeHeaderColor, this.isDisabled = false, this.isDoctorSearchResult = false, this.projectTitleTop = "", this.projectTitleBottom = "", this.showDropDownIconWithCustomHeader = false, this.headerRadius, this.applyBackgroundColor = true, this.applyBackgroundToOnlyHeader = false, this.isHMC = false, this.isForAppointmentSearch = false, this.paddingValue}); _AppExpandableNotifier createState() => _AppExpandableNotifier(); } class _AppExpandableNotifier extends State { @override void initState() { setState(() { if (widget.isExpand) { widget.expandFlag = widget.isExpand; widget.controller.expanded = true; } }); super.initState(); } @override Widget build(BuildContext context) { String _mainTitle = (widget.title ?? TranslationBase.of(context).details).trim(); String _title = ""; String _subTitle = ""; if (widget.isDoctorSearchResult) { _title = widget.projectTitleTop ?? (context.read().isArabic ? (_mainTitle.split(" ").length < 1 ? _mainTitle : _mainTitle.split(" ")[1]) : _mainTitle.split(" ")[0]); _subTitle = widget.projectTitleBottom ?? _mainTitle.replaceAll(_title, "").trim(); } else { _title = _mainTitle.contains(" ") ? (context.read().isArabic ? (_mainTitle.split(" ").length < 1 ? _mainTitle : _mainTitle.split(" ")[1]) : _mainTitle.split(" ")[0]) : _mainTitle; // String _title = _mainTitle.split(" ")[0]; _subTitle = _mainTitle.replaceAll(_title, "").trim(); } if (_subTitle.length < 1) { _subTitle = double.tryParse(_subTitle) != null ? _title : _title.toLowerCase().capitalizeFirstofEach; _title = ""; } else { _subTitle = double.tryParse(_subTitle) == null ? _subTitle : _subTitle.toLowerCase().capitalizeFirstofEach; _title = double.tryParse(_subTitle) == null ? _title : _title.toLowerCase().capitalizeFirstofEach; } return ExpandableNotifier( child: Container( decoration: BoxDecoration( color: (widget.applyBackgroundColor) ? widget.widgetColor : null, ), child: Column( children: [ if(widget.showDropDownIconWithCustomHeader == false && widget.headerWidget != null) ...{ SizedBox( child: widget.headerWidget, ),}, ScrollOnExpand( scrollOnExpand: true, scrollOnCollapse: false, child: ExpandablePanel( // hasIcon: false, theme: const ExpandableThemeData( hasIcon: false, headerAlignment: ExpandablePanelHeaderAlignment.center, tapBodyToCollapse: true, ), header: Material( color: widget.applyBackgroundToOnlyHeader ? widget.headerColor : Colors.transparent, shape: RoundedRectangleBorder( borderRadius: widget.headerRadius ?? BorderRadius.zero), child: Padding( padding: EdgeInsets.all(widget.paddingValue ?? 20), child: InkWell( onTap: () { if (!widget.isDisabled) setState(() { widget.expandFlag = !widget.expandFlag; widget.controller.expanded = widget.expandFlag; }); }, child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ if (widget.showDropDownIconWithCustomHeader && widget.headerWidget != null) ...{ Expanded( child: SizedBox( child: widget.headerWidget, )) } else ...{ //todo use the custom header to show the drop down Expanded( child: Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: [ if (_mainTitle.isNotEmpty && widget.isTitleSingleLine) !widget.hasCounter ? Text( _mainTitle, style: TextStyle( fontSize: 20, fontWeight: FontWeight.w600, color: Color(0xff2E303A), letterSpacing: -0.72, height: 1), ) : Row( children: [ Text( _mainTitle, style: TextStyle( fontSize: 20, fontWeight: FontWeight.w600, color: Color(0xff2E303A), letterSpacing: -0.72, height: 1), ), SizedBox( width: 10.0, ), CircleAvatar( backgroundColor: CustomColors.accentColor, radius: 12.0, child: Text( widget.counter, style: TextStyle( fontSize: 14, fontWeight: FontWeight.w600, color: Colors.white, letterSpacing: -0.72), ), ) ], ), if (_title.isNotEmpty && !widget.isTitleSingleLine) (widget.isForAppointmentSearch) ? Row( children: [ Padding( padding: const EdgeInsets.all(6.0), child: SvgPicture.asset( widget.isHMC ? 'assets/images/svg/HMC.svg' : 'assets/images/svg/HMG.svg', ), ), Expanded( child: Text( _title, maxLines: 1, style: TextStyle( fontSize: 24, fontWeight: FontWeight.w700, color: widget.isHMC ? Color(0xFF40ACC9) : Color(0xFFD02127), letterSpacing: -1.44, height: 25 / 24), ), ), ], ) : Text( _title, maxLines: 1, style: TextStyle( fontSize: 24, fontWeight: FontWeight.w700, color: Color(0xff2E303A), letterSpacing: -1.44, height: 25 / 24), ), if (_subTitle.isNotEmpty && !widget.isTitleSingleLine) Text( _subTitle, maxLines: 1, style: TextStyle( fontSize: 14, fontWeight: FontWeight.w600, color: Color(0xff2E303A), letterSpacing: -0.72, height: 23 / 12), ), ], ), ), }, Icon( widget.expandFlag ? Icons.keyboard_arrow_up : Icons.keyboard_arrow_down, color: Color(0xff2E303A), // size: 30.0, ), ], ), ), ), ), collapsed: widget.collapsed ?? Container(), expanded: widget.bodyWidget!, builder: (_, collapsed, expanded) { return Expandable( controller: widget.controller, collapsed: collapsed, expanded: expanded, theme: const ExpandableThemeData(crossFadePoint: 0), ); }, ), ), ], ), ), ); } }