diff --git a/lib/new_ui/common_home_parent.dart b/lib/new_ui/common_home_parent.dart index f76ec39..85049fb 100644 --- a/lib/new_ui/common_home_parent.dart +++ b/lib/new_ui/common_home_parent.dart @@ -124,49 +124,76 @@ class _CommonHomeParentState extends State { child: Stack( children: [ screens[index], - if(MediaQuery.of(context).viewInsets.bottom == 0) - Align( - alignment: Alignment.bottomCenter, - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - Container( - height: isPortrait ? 58 : 42, - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(29.0), - color: Colors.white, - border: Border.all(color: ColorConsts.borderColor, width: 1), - ), - padding: EdgeInsets.only(left: 30, right: 30), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [for (int i = 0; i < icons.length; i++) getBottomNavigationItem(i, isPortrait ? 0 : 6)], - ), - ), - Container( - height: 26, - margin: EdgeInsets.only(top: isPortrait ? 16 : 8), - padding: EdgeInsets.only(right: 16, left: 12), - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(29.0), - color: ColorConsts.brownLightColor, - ), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Icon(Icons.play_arrow_outlined, size: 20, color: Colors.white), - "تصفح وتحميل الموسوعة".toText(13), - ], - ), - ).onPress(() { - if (index != 5) - setState(() { - index = 5; - }); - }), - ], - ).paddingOnly(left: 16, right: 16, bottom: 16), - ), + if (MediaQuery.of(context).viewInsets.bottom == 0) + Align( + alignment: isPortrait ? Alignment.bottomCenter : Alignment.centerRight, + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + isPortrait + ? Container( + height: 58, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(29.0), + color: Colors.white, + border: Border.all(color: ColorConsts.borderColor, width: 1), + ), + padding: EdgeInsets.only(left: 30, right: 30), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [for (int i = 0; i < icons.length; i++) getBottomNavigationItem(i, 0, isPortrait)], + ), + ) + : Container( + width: 58, + margin: EdgeInsets.only(top: 50, right: 24), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(29.0), + color: Colors.white, + border: Border.all(color: ColorConsts.borderColor, width: 1), + ), + padding: EdgeInsets.only(top: 30, bottom: 30), + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [for (int i = 0; i < icons.length; i++) getBottomNavigationItem(i, 0, isPortrait)], + ), + ).expanded, + (isPortrait + ? Container( + height: 26, + margin: EdgeInsets.only(top: 16), + padding: EdgeInsets.only(right: 16, left: 12), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(29.0), + color: ColorConsts.brownLightColor, + ), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Icon(Icons.play_arrow_outlined, size: 20, color: Colors.white), + "تصفح وتحميل الموسوعة".toText(13), + ], + )) + : Container( + width: 58, + margin: EdgeInsets.only(top: 6, right: 30), + padding: isPortrait ? EdgeInsets.only(right: 16, left: 12) : EdgeInsets.only(top: 4, bottom: 4), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(29.0), + color: ColorConsts.brownLightColor, + ), + alignment: Alignment.center, + child: Icon(Icons.play_arrow_outlined, size: 20, color: Colors.white), + )) + .onPress(() { + if (index != 5) + setState(() { + index = 5; + }); + }), + ], + ).paddingOnly(left: 16, right: 16, bottom: 16), + ), ], ), ), @@ -182,24 +209,33 @@ class _CommonHomeParentState extends State { ]; List sizes = [26, 26, 36, 26, 26]; - Widget getBottomNavigationItem(int _index, int minusValue) { - return Column( - mainAxisSize: MainAxisSize.min, - children: [ - SvgPicture.asset( - icons[_index], - width: sizes[_index] - minusValue, - height: sizes[_index] - minusValue, - color: index == _index ? ColorConsts.brownColor : ColorConsts.darkText, - ).expanded, - if (index == _index) - Container( - height: 3, - color: ColorConsts.brownColor, - width: sizes[_index] - minusValue, - ), - ], - ).onPress(() { + Widget getBottomNavigationItem(int _index, int minusValue, bool isPortrait) { + List list = [ + SvgPicture.asset( + icons[_index], + width: sizes[_index] - minusValue, + height: sizes[_index] - minusValue, + color: index == _index ? ColorConsts.brownColor : ColorConsts.darkText, + ).expanded, + if (index == _index) + Container( + height: isPortrait ? 3 : sizes[_index] - minusValue, + color: ColorConsts.brownColor, + width: isPortrait ? sizes[_index] - minusValue : 3, + ), + ]; + + Widget child = isPortrait + ? Column( + mainAxisSize: MainAxisSize.min, + children: list, + ) + : Row( + mainAxisSize: MainAxisSize.min, + children: list, + ); + + return child.onPress(() { if (_index == 3) { showMenu(); return; diff --git a/lib/new_ui/screens/about_screen.dart b/lib/new_ui/screens/about_screen.dart index 8dc6f4b..d91b036 100644 --- a/lib/new_ui/screens/about_screen.dart +++ b/lib/new_ui/screens/about_screen.dart @@ -61,29 +61,44 @@ class _AboutScreenState extends State { @override Widget build(BuildContext context) { + bool isPortrait = MediaQuery.of(context).orientation == Orientation.portrait; + Widget _header = SizedBox(height: isPortrait ? null : double.infinity, width: double.infinity, child: CommonHeader("عن الموسوعة", "assets/icons/new/about_bg.jpg", Color(0xffAE8646))); + Widget _dataView = Column( + children: [ + if ((tareefAlMosasa?.length ?? 0) > 0) + for (ContentInfoDataModel text in tareefAlMosasa) text.content.toText(13, color: ColorConsts.darkText, textAlign: TextAlign.center), + if ((haqooqAlMosasa?.length ?? 0) > 0) + Column( + children: [ + "حقوق الموسوعة".toText(13, color: ColorConsts.greyLightColor), + for (ContentInfoDataModel text in haqooqAlMosasa) text.content.toText(13, color: ColorConsts.greyLightColor, textAlign: TextAlign.center) + ], + ).paddingOnly(top: 24) + ], + ); + return SizedBox( height: double.infinity, - child: SingleChildScrollView( - physics: const AlwaysScrollableScrollPhysics(), - child: Column( - children: [ - CommonHeader("عن الموسوعة", "assets/icons/new/about_bg.jpg", Color(0xffAE8646)), - Column( + child: isPortrait + ? SingleChildScrollView( + physics: const AlwaysScrollableScrollPhysics(), + child: Column( + children: [ + _header, + _dataView.paddingOnly(top: 70, left: 35, right: 35, bottom: 125), + ], + ), + ) + : Row( children: [ - if ((tareefAlMosasa?.length ?? 0) > 0) - for (ContentInfoDataModel text in tareefAlMosasa) text.content.toText(13, color: ColorConsts.darkText, textAlign: TextAlign.center), - if ((haqooqAlMosasa?.length ?? 0) > 0) - Column( - children: [ - "حقوق الموسوعة".toText(13, color: ColorConsts.greyLightColor), - for (ContentInfoDataModel text in haqooqAlMosasa) text.content.toText(13, color: ColorConsts.greyLightColor, textAlign: TextAlign.center) - ], - ).paddingOnly(top: 24) + Expanded( + child: SizedBox( + height: double.infinity, + child: SingleChildScrollView(padding: EdgeInsets.only(left: 25, right: 25, top: 45, bottom: 45), physics: const AlwaysScrollableScrollPhysics(), child: _dataView)), + flex: 6), + Expanded(child: _header, flex: 4), ], - ).paddingOnly(top: 70, left: 35, right: 35, bottom: 125), - ], - ), - ), + ), ); } } diff --git a/lib/new_ui/screens/home_screen.dart b/lib/new_ui/screens/home_screen.dart index 673bfff..7ccd278 100644 --- a/lib/new_ui/screens/home_screen.dart +++ b/lib/new_ui/screens/home_screen.dart @@ -211,7 +211,7 @@ class _HomeScreenState extends State { opacity: const AlwaysStoppedAnimation(.73), ), SingleChildScrollView( - padding: EdgeInsets.fromLTRB(45, isPortrait ? 138 : 45, 45, 138), + padding: isPortrait ? EdgeInsets.fromLTRB(45, 138, 45, 138) : EdgeInsets.fromLTRB(200, 45, 200, 45), physics: BouncingScrollPhysics(), child: Column( crossAxisAlignment: CrossAxisAlignment.center, @@ -297,14 +297,14 @@ class _HomeScreenState extends State { child: TextField( controller: _searchController, focusNode: _searchFocusNode, - style: TextStyle(color: Colors.white, fontSize: 14,fontFamily: "Montserrat"), + style: TextStyle(color: Colors.white, fontSize: 14, fontFamily: "Montserrat"), textAlign: TextAlign.end, decoration: InputDecoration( contentPadding: EdgeInsets.fromLTRB(2, 2, 24, 2), alignLabelWithHint: true, fillColor: ColorConsts.darkText.withOpacity(.65), filled: true, - hintStyle: TextStyle(color: Colors.white, fontSize: 14,fontFamily: "Montserrat"), + hintStyle: TextStyle(color: Colors.white, fontSize: 14, fontFamily: "Montserrat"), hintText: "البحث عن آية", prefixIconConstraints: BoxConstraints(maxHeight: 20), prefixIcon: InkWell( @@ -343,17 +343,17 @@ class _HomeScreenState extends State { 30.height, "شارك هذه الصفحة".toText(13, color: Color(0xffa2a2a2)), 30.height, - if(quickLinks!=null && quickLinks.isNotEmpty) - Row( - children: [ - for (QuickLinksData _quickLink in quickLinks) - commonIconButton(ApiConsts.baseUrl + _quickLink.exposeFilePath, () { - //for live production server - // commonIconButton( _quickLink.exposeFilePath, () { - _launchURL(_quickLink.imageUrl); - }, size: 35, isAsset: false), - ], - ), + if (quickLinks != null && quickLinks.isNotEmpty) + Row( + children: [ + for (QuickLinksData _quickLink in quickLinks) + commonIconButton(ApiConsts.baseUrl + _quickLink.exposeFilePath, () { + //for live production server + // commonIconButton( _quickLink.exposeFilePath, () { + _launchURL(_quickLink.imageUrl); + }, size: 35, isAsset: false), + ], + ), ], ), ), diff --git a/lib/ui/common_appbar.dart b/lib/ui/common_appbar.dart index 49369f1..a749e26 100644 --- a/lib/ui/common_appbar.dart +++ b/lib/ui/common_appbar.dart @@ -134,70 +134,74 @@ class _CommonAppbarState extends State { // resizeToAvoidBottomInset: true, // drawerScrimColor: Colors.black.withOpacity(.3), backgroundColor: ColorConsts.greyF4Color, - body: Stack( - children: [ - // Container( - // color: Colors.white, - // height: 100, - // padding: EdgeInsets.only(top: 8, bottom: 8, right: 16), - // child: Row( - // crossAxisAlignment: CrossAxisAlignment.center, - // children: [ - // if (!widget.isFirst) - // IconButton( - // icon: Icon(widget.showDrawer ? Icons.menu : Icons.arrow_back_ios, color: ColorConsts.textGrey), - // padding: EdgeInsets.only(left: 16), - // onPressed: () { - // if (widget.showDrawer) { - // _scaffoldKey.currentState.openDrawer(); - // } else { - // Navigator.pop(context); - // } - // }, - // ), - // if (!widget.showDrawer) - // IconButton( - // icon: Icon(Icons.home, color: ColorConsts.textGrey), - // padding: EdgeInsets.only(left: 16), - // onPressed: () { - // Navigator.popUntil(context, ModalRoute.withName(HomeScreen.routeName)); - // }, - // ), - // Expanded(child: SizedBox()), - // Hero( - // tag: "logo", - // child: SvgPicture.asset( - // "assets/logos/tangheem_logo.svg", - // height: 100, - // width: 100, - // alignment: Alignment.centerRight, - // ), - // ) - // ], - // ), - // ), - Directionality(textDirection: TextDirection.rtl, child: widget.child), - ElevatedButton( - onPressed: () => Navigator.pop(context), - child: Icon( - Icons.arrow_back_ios, - color: ColorConsts.darkText, - ).paddingOnly(left: 8), - style: ElevatedButton.styleFrom( - backgroundColor: Color(0xfff4f4f4), - shape: CircleBorder(), //<-- SEE HERE - padding: EdgeInsets.all(8), - ), - ).paddingOnly(left: 8, top: 50), - // IconButton( - // highlightColor: Colors.green, - // icon: Icon(Icons.arrow_back_ios, color: ColorConsts.textGrey), - // padding: EdgeInsets.only(left: 16), - // onPressed: () { - // Navigator.pop(context); - // }, - // ), - ], + body: SizedBox( + width: double.infinity, + child: Stack( + alignment: Alignment.topRight, + children: [ + // Container( + // color: Colors.white, + // height: 100, + // padding: EdgeInsets.only(top: 8, bottom: 8, right: 16), + // child: Row( + // crossAxisAlignment: CrossAxisAlignment.center, + // children: [ + // if (!widget.isFirst) + // IconButton( + // icon: Icon(widget.showDrawer ? Icons.menu : Icons.arrow_back_ios, color: ColorConsts.textGrey), + // padding: EdgeInsets.only(left: 16), + // onPressed: () { + // if (widget.showDrawer) { + // _scaffoldKey.currentState.openDrawer(); + // } else { + // Navigator.pop(context); + // } + // }, + // ), + // if (!widget.showDrawer) + // IconButton( + // icon: Icon(Icons.home, color: ColorConsts.textGrey), + // padding: EdgeInsets.only(left: 16), + // onPressed: () { + // Navigator.popUntil(context, ModalRoute.withName(HomeScreen.routeName)); + // }, + // ), + // Expanded(child: SizedBox()), + // Hero( + // tag: "logo", + // child: SvgPicture.asset( + // "assets/logos/tangheem_logo.svg", + // height: 100, + // width: 100, + // alignment: Alignment.centerRight, + // ), + // ) + // ], + // ), + // ), + Directionality(textDirection: TextDirection.rtl, child: widget.child), + ElevatedButton( + onPressed: () => Navigator.pop(context), + child: Icon( + Icons.arrow_forward_ios, + color: ColorConsts.darkText, + ).paddingOnly(left: 4), + style: ElevatedButton.styleFrom( + backgroundColor: Color(0xfff4f4f4), + shape: CircleBorder(), //<-- SEE HERE + padding: EdgeInsets.all(8), + ), + ).paddingOnly(right: 8, top: 50), + // IconButton( + // highlightColor: Colors.green, + // icon: Icon(Icons.arrow_back_ios, color: ColorConsts.textGrey), + // padding: EdgeInsets.only(left: 16), + // onPressed: () { + // Navigator.pop(context); + // }, + // ), + ], + ), ), ); } diff --git a/lib/ui/screens/member_screen.dart b/lib/ui/screens/member_screen.dart index 2ca2278..a41b260 100644 --- a/lib/ui/screens/member_screen.dart +++ b/lib/ui/screens/member_screen.dart @@ -52,80 +52,86 @@ class _MemberScreenState extends State { @override Widget build(BuildContext context) { - return SizedBox( - height: double.infinity, - child: SingleChildScrollView( - physics: const AlwaysScrollableScrollPhysics(), - child: Column( - children: [ - CommonHeader("اللجنة الإشرافية", "assets/icons/new/commette_bg.jpg", Color(0xff416A6C)), - membersList == null - ? SizedBox() - : membersList.isEmpty - ? NoDataUI() - : ListView.separated( - physics: const NeverScrollableScrollPhysics(), - shrinkWrap: true, - itemCount: membersList.length, - padding: EdgeInsets.only(left: 25, right: 25, top: 25, bottom: 125), - separatorBuilder: (context, index) { - return Divider(color: Color(0xffC7C7C7), height: 1, thickness: 1); - }, - itemBuilder: (context, index) { - String encodedImage = membersList.elementAt(index).picture; - if (encodedImage.contains("data:image/png;base64,")) { - encodedImage = encodedImage.replaceAll("data:image/png;base64,", ""); - } - if (encodedImage.contains("data:image/jpeg;base64,")) { - encodedImage = encodedImage.replaceAll("data:image/jpeg;base64,", ""); - } - var temp = base64Decode(encodedImage); + bool isPortrait = MediaQuery.of(context).orientation == Orientation.portrait; + + Widget _header = SizedBox(height: isPortrait ? null : double.infinity, width: double.infinity, child: CommonHeader("اللجنة الإشرافية", "assets/icons/new/commette_bg.jpg", Color(0xff416A6C))); + Widget _dataListView = membersList.isEmpty + ? NoDataUI() + : ListView.separated( + physics: const NeverScrollableScrollPhysics(), + shrinkWrap: true, + itemCount: membersList.length, + padding: EdgeInsets.only(left: 25, right: 25, top: 25, bottom: isPortrait ? 125 : 25), + separatorBuilder: (context, index) { + return Divider(color: Color(0xffC7C7C7), height: 1, thickness: 1); + }, + itemBuilder: (context, index) { + String encodedImage = membersList.elementAt(index).picture; + if (encodedImage.contains("data:image/png;base64,")) { + encodedImage = encodedImage.replaceAll("data:image/png;base64,", ""); + } + if (encodedImage.contains("data:image/jpeg;base64,")) { + encodedImage = encodedImage.replaceAll("data:image/jpeg;base64,", ""); + } + var temp = base64Decode(encodedImage); - return Row( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Column( - crossAxisAlignment: CrossAxisAlignment.end, - mainAxisSize: MainAxisSize.min, - children: [ - (membersList[index].firstName + " " + membersList[index].lastName).toText(13, color: ColorConsts.darkText, textAlign: TextAlign.end), - membersList[index].description.trim().toText(13, color: ColorConsts.grey9FColor, textAlign: TextAlign.end), - ], - ).expanded, - 21.width, - Container( - width: 82.0, - height: 82.0, - decoration: BoxDecoration( - image: membersList.length < 1 - ? null - : DecorationImage( - fit: BoxFit.cover, - image: MemoryImage(temp), - ), - borderRadius: BorderRadius.all( - Radius.circular(10.0), - ), - ), - child: membersList.length < 1 - ? ClipRRect( - borderRadius: BorderRadius.all( - Radius.circular(10.0), - ), - child: SvgPicture.asset( - "assets/icons/chat_user.svg", - clipBehavior: Clip.antiAlias, - ), - ) - : null, - ), - ], - ).paddingOnly(top: 25, bottom: 25); - }, + return Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Column( + crossAxisAlignment: CrossAxisAlignment.end, + mainAxisSize: MainAxisSize.min, + children: [ + (membersList[index].firstName + " " + membersList[index].lastName).toText(13, color: ColorConsts.darkText, textAlign: TextAlign.end), + membersList[index].description.trim().toText(13, color: ColorConsts.grey9FColor, textAlign: TextAlign.end), + ], + ).expanded, + 21.width, + Container( + width: 82.0, + height: 82.0, + decoration: BoxDecoration( + image: membersList.length < 1 + ? null + : DecorationImage( + fit: BoxFit.cover, + image: MemoryImage(temp), + ), + borderRadius: BorderRadius.all( + Radius.circular(10.0), ), - ], - ), - ), + ), + child: membersList.length < 1 + ? ClipRRect( + borderRadius: BorderRadius.all( + Radius.circular(10.0), + ), + child: SvgPicture.asset( + "assets/icons/chat_user.svg", + clipBehavior: Clip.antiAlias, + ), + ) + : null, + ), + ], + ).paddingOnly(top: 25, bottom: 25); + }, + ); + return SizedBox( + height: double.infinity, + child: isPortrait + ? SingleChildScrollView( + physics: const AlwaysScrollableScrollPhysics(), + child: Column( + children: [_header, membersList == null ? SizedBox() : _dataListView], + ), + ) + : Row( + children: [ + Expanded(child: SingleChildScrollView(physics: const AlwaysScrollableScrollPhysics(), child: _dataListView), flex: 6), + Expanded(child: _header, flex: 4), + ], + ), ); } } diff --git a/lib/ui/screens/tangheem_detail_screen.dart b/lib/ui/screens/tangheem_detail_screen.dart index 25baec9..78948a5 100644 --- a/lib/ui/screens/tangheem_detail_screen.dart +++ b/lib/ui/screens/tangheem_detail_screen.dart @@ -159,357 +159,336 @@ class _TangheemDetailScreenState extends State { @override Widget build(BuildContext context) { - return Container( + bool isPortrait = MediaQuery.of(context).orientation == Orientation.portrait; + + Widget _header = SizedBox( + height: isPortrait ? null : double.infinity, width: double.infinity, - child: _ayatTangheemTypeMappedFirstData == null - ? SizedBox() - : Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Expanded( - child: ListView( - physics: BouncingScrollPhysics(), - padding: EdgeInsets.only(bottom: 16), - children: [ - CommonHeader(_ayatTangheemTypeMappedFirstData.tangheemTypeName ?? "", "assets/icons/new/quran_bg.jpg", Color(0xffAE8646), - isCustom: true, message: _ayatTangheemTypeMappedFirstData.tangheemTypeDescription ?? "", onTap: (headerEnum) { - if (headerEnum == CommonHeaderEnum.ShareAsText) { - _shareAyaAsLink(); - } else if (headerEnum == CommonHeaderEnum.ShareAsImage) { - _shareAyaAsImage(); - } else if (headerEnum == CommonHeaderEnum.ZoomOut) { - if (fontSize <= 12) { - Utils.showToast("وصل حجم الخط إلى الحد الأدنى للحجم"); - return; - } - fontSize -= 2; - prefs.setInt(GlobalConsts.fontZoomSize, fontSize); - setState(() {}); - } else if (headerEnum == CommonHeaderEnum.ZoomIn) { - if (fontSize >= 36) { - Utils.showToast("وصل حجم الخط إلى الحد الأقصى للحجم"); - return; - } - fontSize += 2; - prefs.setInt(GlobalConsts.fontZoomSize, fontSize); - setState(() {}); - } - }), - SingleChildScrollView( - physics: NeverScrollableScrollPhysics(), - child: RepaintBoundary( - key: _globalKey, - child: Material( - color: ColorConsts.greyF4Color, - child: ListView.builder( - physics: NeverScrollableScrollPhysics(), - shrinkWrap: true, - padding: EdgeInsets.all(0), - itemCount: ayatTangheemTypeMappedDataList.length > 5 ? 5 : ayatTangheemTypeMappedDataList.length, - itemBuilder: (context, index) { - final _ayatTangheemTypeMappedData = ayatTangheemTypeMappedDataList[index]; - _ayatTangheemTypeMappedData.property?.sort((a, b) => a.orderNo.compareTo(b.orderNo)); - List _tangheemInsideTableList = []; - List _tangheemAboveTableList = []; - List _tangheemBelowTableList = []; - List _tangheemWords = []; - - List _tempPropertyList = []; - _tempPropertyList.addAll(_ayatTangheemTypeMappedData?.property ?? []); - int firstIndex = _tempPropertyList.indexWhere((element) => element.isInsideTable); - - if (firstIndex >= 0) { - var _tempPropertyListTop = _tempPropertyList.take(firstIndex); - _tempPropertyListTop = _tempPropertyListTop.where((element) => (element.propertyValue ?? "").isNotEmpty)?.toList() ?? []; - _tangheemAboveTableList = _tempPropertyListTop; - _tempPropertyListTop.forEach((element) { - _tempPropertyList.remove(element); - }); - var _tempPropertyListInside = _tempPropertyList?.where((element) => (element.isInsideTable))?.toList() ?? []; - _tempPropertyListInside.forEach((element) { - _tempPropertyList.remove(element); - }); - _tempPropertyListInside = _tempPropertyListInside.where((element) => (element.propertyValue ?? "").isNotEmpty)?.toList() ?? []; - _tangheemInsideTableList = _tempPropertyListInside; - var _tempPropertyListBelow = _tempPropertyList; - _tempPropertyListBelow = _tempPropertyListBelow.where((element) => (element.propertyValue ?? "").isNotEmpty)?.toList() ?? []; - _tangheemBelowTableList = _tempPropertyListBelow; - } - - _tangheemWords.add(_ayatTangheemTypeMappedData.highlightText ?? ""); - // _tangheemInsideTableList = - // _ayatTangheemTypeMappedData?.property?.where((element) => (element.isInsideTable) && (element.propertyValue ?? "").isNotEmpty)?.toList() ?? []; - // _tangheemAboveTableList = - // _ayatTangheemTypeMappedData?.property?.where((element) => (!element.isInsideTable) && (element.propertyValue ?? "").isNotEmpty)?.toList() ?? []; - // - // - - var _tempTangheemIndexWord = ""; - if (ayatTangheemTypeMappedDataList.length == 1) { - _tempTangheemIndexWord = ""; - } else { - _tempTangheemIndexWord = getArabicIndexWord(index) + " "; - } - - Widget innerTableWidget = (_tangheemInsideTableList.isNotEmpty) - ? Column( - children: [ - Container( - height: 38, - width: double.infinity, - alignment: Alignment.center, - decoration: BoxDecoration( - color: Color(0xff40696B), - borderRadius: BorderRadius.only( - topLeft: Radius.circular(20), - topRight: Radius.circular(20), - ), - ), - child: "خط النبر و التنغيم ل${_ayatTangheemTypeMappedData.tangheemTypeName ?? ""}".toText(16), - ), - tangheemInsideTablePropertyView(_tangheemInsideTableList) - ], - ) - : SizedBox(); - - Widget aboveTableWidget = (_tangheemAboveTableList.isNotEmpty) - ? Container( - padding: EdgeInsets.only(left: 20, right: 20), - decoration: BoxDecoration( - color: Colors.white, - // border: Border( - // left: BorderSide(color: ColorConsts.greyE0Color, width: 1), - // right: BorderSide(color: ColorConsts.greyE0Color, width: 1), - // bottom: BorderSide(color: ColorConsts.greyE0Color, width: 1), - // top: BorderSide(color: ColorConsts.greyE0Color, width: 0), - // ), - - borderRadius: BorderRadius.only( - topRight: Radius.circular(20), - topLeft: Radius.circular(20), - ), - ), - child: ListView.separated( - itemCount: _tangheemAboveTableList.length, - physics: NeverScrollableScrollPhysics(), - padding: EdgeInsets.zero, - shrinkWrap: true, - separatorBuilder: (context, index) { - return Divider(color: ColorConsts.greyB7Color, height: 4, thickness: 0); - }, - itemBuilder: (context, index) { - return Row( - children: [ - _tangheemAboveTableList[index].propertyText.toText(13, color: ColorConsts.greyB7Color), - Container( - width: 1, - height: 18, - color: ColorConsts.greyB7Color, - margin: EdgeInsets.only(left: 8, right: 8), - ), - Expanded( - child: Container( - padding: EdgeInsets.only(left: 4, right: 8), - // alignment: Alignment.centerRight, - child: Html( - data: _tangheemAboveTableList[index]?.propertyValue ?? "", - style: { - 'html': Style(textAlign: TextAlign.left), - }, - ), - ), - ) - ], - ); - }), - ) - : SizedBox(); - - Widget belowTableWidget = (_tangheemBelowTableList.isNotEmpty) ? tangheemOutSideTablePropertyView(_tangheemBelowTableList) : SizedBox(); - - Widget relatedTangheemWidget = (_dataList.isNotEmpty) - ? Container( - width: double.infinity, - padding: EdgeInsets.only(top: 18, bottom: 18, left: 12, right: 12), - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(20), - // border: Border.all(color: ColorConsts.greyE0Color, width: 1), - ), - child: Column( - children: [ - "قائمة الأساليب اللغوية في هذه الآية".toText(13, color: ColorConsts.darkText), - 12.height, - Wrap( - spacing: 8, - runSpacing: 8, - alignment: WrapAlignment.center, - children: [ - for (int index = 0; index < _dataList.length; index++) - InkWell( - onTap: () { - List list = _dataList; - var removedData = list[index]; - list.remove(removedData); - list.insert(0, removedData); - list = list - ?.where((element) => (element.ayahNos.contains(removedData.ayahNos)) && (element.tangheemTypeId == removedData.tangheemTypeId)) - ?.toList() ?? - []; - - TangheemDetailParams tangheem = - TangheemDetailParams(selectedTangheemTypeId: _dataList[index].ayaTangheemTypeId, ayatTangheemTypeMappedDataList: list); - Navigator.pushNamed(context, TangheemDetailScreen.routeName, arguments: tangheem); - }, - child: Container( - padding: EdgeInsets.only(left: 12, right: 12, top: 6, bottom: 6), - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(10), - color: Color(0xff91C1BC), - ), - child: _dataList[index].tangheemTypeName.toText(12)), - ), - ], - ), - ], - ), - ) - : SizedBox(); - - Widget aboveInnerMerge = Container( - decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.only( - topLeft: Radius.circular(20), - topRight: Radius.circular(20), + child: CommonHeader(_ayatTangheemTypeMappedFirstData.tangheemTypeName ?? "", "assets/icons/new/quran_bg.jpg", Color(0xffAE8646), + isCustom: true, message: _ayatTangheemTypeMappedFirstData.tangheemTypeDescription ?? "", onTap: (headerEnum) { + if (headerEnum == CommonHeaderEnum.ShareAsText) { + _shareAyaAsLink(); + } else if (headerEnum == CommonHeaderEnum.ShareAsImage) { + _shareAyaAsImage(); + } else if (headerEnum == CommonHeaderEnum.ZoomOut) { + if (fontSize <= 12) { + Utils.showToast("وصل حجم الخط إلى الحد الأدنى للحجم"); + return; + } + fontSize -= 2; + prefs.setInt(GlobalConsts.fontZoomSize, fontSize); + setState(() {}); + } else if (headerEnum == CommonHeaderEnum.ZoomIn) { + if (fontSize >= 36) { + Utils.showToast("وصل حجم الخط إلى الحد الأقصى للحجم"); + return; + } + fontSize += 2; + prefs.setInt(GlobalConsts.fontZoomSize, fontSize); + setState(() {}); + } + }), + ); + + Widget _dataListView = SingleChildScrollView( + physics: NeverScrollableScrollPhysics(), + child: RepaintBoundary( + key: _globalKey, + child: Material( + color: ColorConsts.greyF4Color, + child: ListView.builder( + physics: NeverScrollableScrollPhysics(), + shrinkWrap: true, + padding: EdgeInsets.only(top: 24, bottom: 24), + itemCount: ayatTangheemTypeMappedDataList.length > 5 ? 5 : ayatTangheemTypeMappedDataList.length, + itemBuilder: (context, index) { + final _ayatTangheemTypeMappedData = ayatTangheemTypeMappedDataList[index]; + _ayatTangheemTypeMappedData.property?.sort((a, b) => a.orderNo.compareTo(b.orderNo)); + List _tangheemInsideTableList = []; + List _tangheemAboveTableList = []; + List _tangheemBelowTableList = []; + List _tangheemWords = []; + + List _tempPropertyList = []; + _tempPropertyList.addAll(_ayatTangheemTypeMappedData?.property ?? []); + int firstIndex = _tempPropertyList.indexWhere((element) => element.isInsideTable); + + if (firstIndex >= 0) { + var _tempPropertyListTop = _tempPropertyList.take(firstIndex); + _tempPropertyListTop = _tempPropertyListTop.where((element) => (element.propertyValue ?? "").isNotEmpty)?.toList() ?? []; + _tangheemAboveTableList = _tempPropertyListTop; + _tempPropertyListTop.forEach((element) { + _tempPropertyList.remove(element); + }); + var _tempPropertyListInside = _tempPropertyList?.where((element) => (element.isInsideTable))?.toList() ?? []; + _tempPropertyListInside.forEach((element) { + _tempPropertyList.remove(element); + }); + _tempPropertyListInside = _tempPropertyListInside.where((element) => (element.propertyValue ?? "").isNotEmpty)?.toList() ?? []; + _tangheemInsideTableList = _tempPropertyListInside; + var _tempPropertyListBelow = _tempPropertyList; + _tempPropertyListBelow = _tempPropertyListBelow.where((element) => (element.propertyValue ?? "").isNotEmpty)?.toList() ?? []; + _tangheemBelowTableList = _tempPropertyListBelow; + } + + _tangheemWords.add(_ayatTangheemTypeMappedData.highlightText ?? ""); + // _tangheemInsideTableList = + // _ayatTangheemTypeMappedData?.property?.where((element) => (element.isInsideTable) && (element.propertyValue ?? "").isNotEmpty)?.toList() ?? []; + // _tangheemAboveTableList = + // _ayatTangheemTypeMappedData?.property?.where((element) => (!element.isInsideTable) && (element.propertyValue ?? "").isNotEmpty)?.toList() ?? []; + // + // + + var _tempTangheemIndexWord = ""; + if (ayatTangheemTypeMappedDataList.length == 1) { + _tempTangheemIndexWord = ""; + } else { + _tempTangheemIndexWord = getArabicIndexWord(index) + " "; + } + + Widget innerTableWidget = (_tangheemInsideTableList.isNotEmpty) + ? Column( + children: [ + Container( + height: 38, + width: double.infinity, + alignment: Alignment.center, + decoration: BoxDecoration( + color: Color(0xff40696B), + borderRadius: BorderRadius.only( + topLeft: Radius.circular(20), + topRight: Radius.circular(20), + ), + ), + child: "خط النبر و التنغيم ل${_ayatTangheemTypeMappedData.tangheemTypeName ?? ""}".toText(16), + ), + tangheemInsideTablePropertyView(_tangheemInsideTableList) + ], + ) + : SizedBox(); + + Widget aboveTableWidget = (_tangheemAboveTableList.isNotEmpty) + ? Container( + padding: EdgeInsets.only(left: 20, right: 20), + decoration: BoxDecoration( + color: Colors.white, + // border: Border( + // left: BorderSide(color: ColorConsts.greyE0Color, width: 1), + // right: BorderSide(color: ColorConsts.greyE0Color, width: 1), + // bottom: BorderSide(color: ColorConsts.greyE0Color, width: 1), + // top: BorderSide(color: ColorConsts.greyE0Color, width: 0), + // ), + + borderRadius: BorderRadius.only( + topRight: Radius.circular(20), + topLeft: Radius.circular(20), + ), + ), + child: ListView.separated( + itemCount: _tangheemAboveTableList.length, + physics: NeverScrollableScrollPhysics(), + padding: EdgeInsets.zero, + shrinkWrap: true, + separatorBuilder: (context, index) { + return Divider(color: ColorConsts.greyB7Color, height: 4, thickness: 0); + }, + itemBuilder: (context, index) { + return Row( + children: [ + _tangheemAboveTableList[index].propertyText.toText(13, color: ColorConsts.greyB7Color), + Container( + width: 1, + height: 18, + color: ColorConsts.greyB7Color, + margin: EdgeInsets.only(left: 8, right: 8), + ), + Expanded( + child: Container( + padding: EdgeInsets.only(left: 4, right: 8), + // alignment: Alignment.centerRight, + child: Html( + data: _tangheemAboveTableList[index]?.propertyValue ?? "", + style: { + 'html': Style(textAlign: TextAlign.left), + }, ), ), - child: Column( - children: [aboveTableWidget, innerTableWidget], - ), - ); + ) + ], + ); + }), + ) + : SizedBox(); - Widget aboveInnerBelowMerge = Container( - decoration: BoxDecoration( - color: Colors.white, borderRadius: BorderRadius.circular(20), boxShadow: [BoxShadow(color: ColorConsts.greyE0Color, offset: Offset(0.0, 1.0), blurRadius: 0)] - // border: Border.all(color: ColorConsts.greyE0Color, width: 1), - ), - child: Column( - children: [aboveInnerMerge, belowTableWidget], - ), - ); + Widget belowTableWidget = (_tangheemBelowTableList.isNotEmpty) ? tangheemOutSideTablePropertyView(_tangheemBelowTableList) : SizedBox(); - return ListView( - physics: NeverScrollableScrollPhysics(), - shrinkWrap: true, - padding: EdgeInsets.only(top: 21, bottom: 21, left: 24, right: 24), - children: [ - " جملة ${_ayatTangheemTypeMappedData.tangheemTypeName} $_tempTangheemIndexWord".toText(22, color: ColorConsts.darkText, textAlign: TextAlign.center, height: 22), - - 12.height,Row( - crossAxisAlignment: CrossAxisAlignment.center, - mainAxisSize: MainAxisSize.min, - children: [ - SvgPicture.asset("assets/icons/new/surah_right.svg", height: 13, width: 11, color: ColorConsts.darkText), - 12.width, - _ayatTangheemTypeMappedData.surahNameAr.toText(13, color: ColorConsts.darkText, textAlign: TextAlign.center, height: 22), - 12.width, - SvgPicture.asset("assets/icons/new/surah_left.svg", height: 13, width: 11, color: ColorConsts.darkText) - ], - ).center, - Container( - margin: EdgeInsets.only(top: 21, bottom: 21), - padding: EdgeInsets.all(12), - decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.circular(20), - border: Border.all(color: ColorConsts.greyE0Color, width: 1), - ), - child: TextHighLightLengthWidget( - text: _ayatTangheemTypeMappedData.reverseAyatNumber(), - startIndex: _ayatTangheemTypeMappedData.startIndex, - endIndex: _ayatTangheemTypeMappedData.endIndex, - textAlign: TextAlign.start, - fontSize: fontSize.toDouble(), - highlightAya: _ayatTangheemTypeMappedData.highlightText, - highlightAyaNos: _ayatTangheemTypeMappedData.highlightAyaNos ?? "", - ayahTextList: _ayatTangheemTypeMappedData.ayahTextList, - ), - ), - Container( + Widget relatedTangheemWidget = (_dataList.isNotEmpty) + ? Container( + width: double.infinity, + padding: EdgeInsets.only(top: 18, bottom: 18, left: 12, right: 12), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(20), + // border: Border.all(color: ColorConsts.greyE0Color, width: 1), + ), + child: Column( + children: [ + "قائمة الأساليب اللغوية في هذه الآية".toText(13, color: ColorConsts.darkText), + 12.height, + Wrap( + spacing: 8, + runSpacing: 8, + alignment: WrapAlignment.center, + children: [ + for (int index = 0; index < _dataList.length; index++) + InkWell( + onTap: () { + List list = _dataList; + var removedData = list[index]; + list.remove(removedData); + list.insert(0, removedData); + list = list?.where((element) => (element.ayahNos.contains(removedData.ayahNos)) && (element.tangheemTypeId == removedData.tangheemTypeId))?.toList() ?? []; + + TangheemDetailParams tangheem = TangheemDetailParams(selectedTangheemTypeId: _dataList[index].ayaTangheemTypeId, ayatTangheemTypeMappedDataList: list); + Navigator.pushNamed(context, TangheemDetailScreen.routeName, arguments: tangheem); + }, + child: Container( + padding: EdgeInsets.only(left: 12, right: 12, top: 6, bottom: 6), decoration: BoxDecoration( - color: Colors.transparent, - borderRadius: BorderRadius.circular(20), - border: Border.all(color: ColorConsts.greyE0Color, width: 1), + borderRadius: BorderRadius.circular(10), + color: Color(0xff91C1BC), ), - child: Column( - children: [aboveInnerBelowMerge, relatedTangheemWidget], - ), - ) - ], - ); - }, - ), + child: _dataList[index].tangheemTypeName.toText(12)), + ), + ], ), - ), + ], ), - // if (MediaQuery.of(context).orientation == Orientation.portrait) - AyaPlayerWidget( - surahName: _ayatTangheemTypeMappedFirstData?.surahNameAr ?? "", - ayaTangheemTypeId: _ayatTangheemTypeMappedFirstData?.tangheemTypeId ?? "", - globalKey: _globalKey, - numberInSurah: _ayatTangheemTypeMappedFirstData?.ayatNumberInSurahs, - ayaNo: _ayatTangheemTypeMappedFirstData?.ayahNo, - surahNo: _ayatTangheemTypeMappedFirstData?.surahNo, - voiceNoteList: voiceNoteList) - .paddingOnly(left: 24, right: 24), - SizedBox(height: 16), - AyaRecordWidget().paddingOnly(left: 24, right: 24), - SizedBox(height: 16), - discussionView(_discussionModel?.data ?? []).paddingOnly(left: 24, right: 24), - SizedBox(height: 16), - ], + ) + : SizedBox(); + + Widget aboveInnerMerge = Container( + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.only( + topLeft: Radius.circular(20), + topRight: Radius.circular(20), ), ), - if (false) - Column( + child: Column( + children: [aboveTableWidget, innerTableWidget], + ), + ); + + Widget aboveInnerBelowMerge = Container( + decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(20), boxShadow: [BoxShadow(color: ColorConsts.greyE0Color, offset: Offset(0.0, 1.0), blurRadius: 0)] + // border: Border.all(color: ColorConsts.greyE0Color, width: 1), + ), + child: Column( + children: [aboveInnerMerge, belowTableWidget], + ), + ); + + return ListView( + physics: NeverScrollableScrollPhysics(), + shrinkWrap: true, + padding: EdgeInsets.only(top: 21, bottom: 21, left: 24, right: 24), + children: [ + " جملة ${_ayatTangheemTypeMappedData.tangheemTypeName} $_tempTangheemIndexWord".toText(22, color: ColorConsts.darkText, textAlign: TextAlign.center, height: 22), + 12.height, + Row( + crossAxisAlignment: CrossAxisAlignment.center, mainAxisSize: MainAxisSize.min, - crossAxisAlignment: CrossAxisAlignment.start, children: [ - Container( - height: 24, - margin: EdgeInsets.only(bottom: 8, top: 8), - // color: Colors.transparent, - child: TextButton( - onPressed: () { - setState(() { - showAyaPlayer = !showAyaPlayer; - }); - }, - child: Text( - showAyaPlayer ? "إخفاء التسجيلات" : "إظهار التسجيلات", - style: TextStyle(color: Colors.black87, fontSize: 12), - ), - style: TextButton.styleFrom( - backgroundColor: ColorConsts.gradientOrange, - foregroundColor: ColorConsts.primaryBlue, - padding: EdgeInsets.only(top: 4, bottom: 4, right: 8, left: 8), - textStyle: TextStyle(color: Colors.white, fontSize: 12), - ), - ), - ), - if (showAyaPlayer) - AyaPlayerWidget( - surahName: _ayatTangheemTypeMappedFirstData?.surahNameAr ?? "", - ayaTangheemTypeId: _ayatTangheemTypeMappedFirstData?.tangheemTypeId ?? "", - ayaNo: _ayatTangheemTypeMappedFirstData?.ayahNo, - numberInSurah: _ayatTangheemTypeMappedFirstData?.ayatNumberInSurahs, - surahNo: _ayatTangheemTypeMappedFirstData?.surahNo, - globalKey: _globalKey, - voiceNoteList: voiceNoteList), + SvgPicture.asset("assets/icons/new/surah_right.svg", height: 13, width: 11, color: ColorConsts.darkText), + 12.width, + _ayatTangheemTypeMappedData.surahNameAr.toText(13, color: ColorConsts.darkText, textAlign: TextAlign.center, height: 22), + 12.width, + SvgPicture.asset("assets/icons/new/surah_left.svg", height: 13, width: 11, color: ColorConsts.darkText) ], + ).center, + Container( + margin: EdgeInsets.only(top: 21, bottom: 21), + padding: EdgeInsets.all(12), + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(20), + border: Border.all(color: ColorConsts.greyE0Color, width: 1), + ), + child: TextHighLightLengthWidget( + text: _ayatTangheemTypeMappedData.reverseAyatNumber(), + startIndex: _ayatTangheemTypeMappedData.startIndex, + endIndex: _ayatTangheemTypeMappedData.endIndex, + textAlign: TextAlign.start, + fontSize: fontSize.toDouble(), + highlightAya: _ayatTangheemTypeMappedData.highlightText, + highlightAyaNos: _ayatTangheemTypeMappedData.highlightAyaNos ?? "", + ayahTextList: _ayatTangheemTypeMappedData.ayahTextList, + ), + ), + Container( + decoration: BoxDecoration( + color: Colors.transparent, + borderRadius: BorderRadius.circular(20), + border: Border.all(color: ColorConsts.greyE0Color, width: 1), + ), + child: Column( + children: [aboveInnerBelowMerge, relatedTangheemWidget], + ), ) - ], - ), + ], + ); + }, + ), + ), + ), + ); + Widget _ayaPlayer = AyaPlayerWidget( + surahName: _ayatTangheemTypeMappedFirstData?.surahNameAr ?? "", + ayaTangheemTypeId: _ayatTangheemTypeMappedFirstData?.tangheemTypeId ?? "", + globalKey: _globalKey, + numberInSurah: _ayatTangheemTypeMappedFirstData?.ayatNumberInSurahs, + ayaNo: _ayatTangheemTypeMappedFirstData?.ayahNo, + surahNo: _ayatTangheemTypeMappedFirstData?.surahNo, + voiceNoteList: voiceNoteList) + .paddingOnly(left: 24, right: 24); + + return Container( + width: double.infinity, + child: _ayatTangheemTypeMappedFirstData == null + ? SizedBox() + : isPortrait + ? ListView( + physics: BouncingScrollPhysics(), + padding: EdgeInsets.only(bottom: 16), + children: [ + _header, + _dataListView, + _ayaPlayer, + SizedBox(height: 16), + AyaRecordWidget().paddingOnly(left: 24, right: 24), + SizedBox(height: 16), + discussionView(_discussionModel?.data ?? []).paddingOnly(left: 24, right: 24), + SizedBox(height: 16), + ], + ) + : Row( + children: [ + Expanded(child: _header, flex: 4), + Expanded( + child: ListView( + children: [ + _dataListView, + _ayaPlayer, + SizedBox(height: 16), + AyaRecordWidget().paddingOnly(left: 24, right: 24), + SizedBox(height: 16), + discussionView(_discussionModel?.data ?? []).paddingOnly(left: 24, right: 24), + SizedBox(height: 16), + ], + ), + flex: 6), + ], + ), ); } diff --git a/lib/ui/screens/tangheem_screen.dart b/lib/ui/screens/tangheem_screen.dart index fee0e36..2715fc7 100644 --- a/lib/ui/screens/tangheem_screen.dart +++ b/lib/ui/screens/tangheem_screen.dart @@ -1,5 +1,6 @@ import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; import 'package:tangheem/api/tangheem_user_api_client.dart'; import 'package:tangheem/classes/colors.dart'; import 'package:tangheem/classes/utils.dart'; @@ -110,116 +111,141 @@ class _TangheemScreenState extends State { @override Widget build(BuildContext context) { - return _dataList == null - ? SizedBox() - : ListView( - controller: _controller, - //physics: BouncingScrollPhysics(), - children: [ - Stack( - alignment: Alignment.center, - children: [ - SizedBox( - // height: double.infinity, - width: double.infinity, - child: AspectRatio( - aspectRatio: 375 / 215, - child: Image.asset("assets/icons/new/quran_bg.jpg", fit: BoxFit.cover, alignment: Alignment(-0.3, 0.5)), - ), + bool isPortrait = MediaQuery.of(context).orientation == Orientation.portrait; + + Widget _header = Stack( + alignment: Alignment.center, + children: [ + SizedBox( + height: isPortrait ? null : double.infinity, + width: double.infinity, + child: AspectRatio( + aspectRatio: 375 / 215, + child: Image.asset("assets/icons/new/quran_bg.jpg", fit: BoxFit.cover, alignment: Alignment(isPortrait ? -0.3 : -0.45, 0.5)), + ), + ), + Column( + mainAxisSize: MainAxisSize.min, + children: [ + Image.asset('assets/icons/new/Tangeem-logo-W.png', width: 50), + 26.height, + (widget.tangheemTypeName ?? "").toText(30), + 8.height, + "${widget.surah?.nameAR ?? ""}".toText(12, color: ColorConsts.brownB6CColor), + ], + ).paddingOnly(top: 16), + ], + ); + + Widget _dataListView = _dataList?.isEmpty ?? true + ? NoDataUI().paddingOnly(top: 215) + : ListView.separated( + // controller: _controller, + // physics: BouncingScrollPhysics(), + physics: isPortrait ? NeverScrollableScrollPhysics() : null, + shrinkWrap: isPortrait, + padding: EdgeInsets.only(left: 24, right: 24, top: isPortrait ? 24 : 36, bottom: isPortrait ? 24 : 36), + itemCount: _dataList.length, + separatorBuilder: (context, index) { + return SizedBox(height: 12); + }, + itemBuilder: (context, index) { + return InkWell( + onTap: () { + if (widget.tangheemQuery == null) { + List list = [] + _dataList; + var removedData = _dataList[index]; + list.remove(removedData); + list.insert(0, removedData); + list = list?.where((element) => (element.ayahNos.contains(removedData.ayahNos)) && (element.tangheemTypeId == removedData.tangheemTypeId))?.toList() ?? []; + TangheemDetailParams tangheem = TangheemDetailParams(selectedTangheemTypeId: removedData.ayaTangheemTypeId, ayatTangheemTypeMappedDataList: list); + Navigator.pushNamed(context, TangheemDetailScreen.routeName, arguments: tangheem); + } else { + var removedData = _dataList[index]; + getTangheemDataForTangheem(removedData.surahNo, removedData.ayatNumberInSurahs, removedData.tangheemTypeId, removedData.ayaTangheemTypeId); + } + }, + borderRadius: BorderRadius.circular(4), + child: Container( + padding: EdgeInsets.fromLTRB(12, 12, 12, 12), + + decoration: BoxDecoration( + color: ColorConsts.brownLightECColor, + borderRadius: BorderRadius.circular(20), + border: Border.all(color: ColorConsts.brownB7Color, width: 0.35), ), - Column( + // decoration: BoxDecoration( + // color: Colors.white, + // borderRadius: BorderRadius.circular(20), + // border: Border.all(color: ColorConsts.greyE0Color, width: 1), + // ), + child: Column( mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.center, children: [ - Image.asset('assets/icons/new/Tangeem-logo-W.png', width: 50), - 26.height, - (widget.tangheemTypeName ?? "").toText(30), - 8.height, - "${widget.surah?.nameAR ?? ""}".toText(12, color: ColorConsts.brownB6CColor), - ], - ).paddingOnly(top: 16), - ], - ), - _dataList.isEmpty - ? NoDataUI().paddingOnly(top: 215) - : ListView.separated( - // controller: _controller, - // physics: BouncingScrollPhysics(), - physics: NeverScrollableScrollPhysics(), - shrinkWrap: true, - padding: EdgeInsets.only(left: 24, right: 24, top: 24, bottom: 24), - itemCount: _dataList.length, - separatorBuilder: (context, index) { - return SizedBox(height: 12); - }, - itemBuilder: (context, index) { - return InkWell( - onTap: () { - if (widget.tangheemQuery == null) { - List list = [] + _dataList; - var removedData = _dataList[index]; - list.remove(removedData); - list.insert(0, removedData); - list = list?.where((element) => (element.ayahNos.contains(removedData.ayahNos)) && (element.tangheemTypeId == removedData.tangheemTypeId))?.toList() ?? []; - TangheemDetailParams tangheem = TangheemDetailParams(selectedTangheemTypeId: removedData.ayaTangheemTypeId, ayatTangheemTypeMappedDataList: list); - Navigator.pushNamed(context, TangheemDetailScreen.routeName, arguments: tangheem); - } else { - var removedData = _dataList[index]; - getTangheemDataForTangheem(removedData.surahNo, removedData.ayatNumberInSurahs, removedData.tangheemTypeId, removedData.ayaTangheemTypeId); - } - }, - borderRadius: BorderRadius.circular(4), - child: Container( - padding: EdgeInsets.fromLTRB(12, 12, 12, 12), - decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.circular(20), - border: Border.all(color: ColorConsts.greyE0Color, width: 1), - ), - child: Column( - mainAxisSize: MainAxisSize.min, - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Row( - mainAxisSize: MainAxisSize.min, - children: [ - (_dataList[index].surahNameAr + ":").toText(12, color: ColorConsts.primaryBlue), - Text( - " ${_dataList[index].ayatNumberInSurahs}", - style: TextStyle(fontSize: 14, fontFamily: "BArabics", color: ColorConsts.secondaryOrange), - ), - 4.width, - "(${_dataList[index].tangheemTypeName})".toText(12, color: ColorConsts.secondaryOrange), - ], - ), - TextHighLightLengthWidget( - text: _dataList[index].reverseAyatNumber(), - startIndex: _dataList[index].startIndex, - endIndex: _dataList[index].endIndex, - textAlign: TextAlign.start, - highlightAya: _dataList[index].highlightText, - highlightAyaNos: _dataList[index].highlightAyaNos ?? "", - ayahTextList: _dataList[index].ayahTextList, - ), - // TextHighLightWidget( - // text: _dataList[index].reverseAyatNumber(), - // valueColor: ColorConsts.secondaryOrange, - // highlights: [_dataList[index].highlightText], - // textAlign: TextAlign.start, - // style: TextStyle( - // fontFamily: "UthmanicHafs", - // fontSize: 16, - // color: ColorConsts.primaryBlue, - // fontWeight: FontWeight.bold, - // ), - // ), - ], - ), + Row( + // mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Row( + mainAxisSize: MainAxisSize.min, + children: [ + SvgPicture.asset("assets/icons/new/surah_right.svg", height: 13, width: 11, color: ColorConsts.brownB7Color), + 6.width, + (_dataList[index].surahNameAr + ":").toText(12, color: ColorConsts.brownB7Color), + 6.width, + SvgPicture.asset("assets/icons/new/surah_left.svg", height: 13, width: 11, color: ColorConsts.brownB7Color), + ], ), - ); - }, - ), - ], + Text( + "الآية ${_dataList[index].ayatNumberInSurahs}", + style: TextStyle(fontSize: 12, color: ColorConsts.brownB7Color), + ), + ], + ), + TextHighLightLengthWidget( + text: _dataList[index].reverseAyatNumber(), + startIndex: _dataList[index].startIndex, + endIndex: _dataList[index].endIndex, + textAlign: TextAlign.start, + highLightColor: ColorConsts.brownB7Color, + highlightAya: _dataList[index].highlightText, + highlightAyaNos: _dataList[index].highlightAyaNos ?? "", + ayahTextList: _dataList[index].ayahTextList, + ), + // TextHighLightWidget( + // text: _dataList[index].reverseAyatNumber(), + // valueColor: ColorConsts.secondaryOrange, + // highlights: [_dataList[index].highlightText], + // textAlign: TextAlign.start, + // style: TextStyle( + // fontFamily: "UthmanicHafs", + // fontSize: 16, + // color: ColorConsts.primaryBlue, + // fontWeight: FontWeight.bold, + // ), + // ), + ], + ), + ), + ); + }, ); + + return _dataList == null + ? SizedBox() + : isPortrait + ? ListView( + controller: _controller, + //physics: BouncingScrollPhysics(), + children: [_header, _dataListView], + ) + : Row( + children: [ + Expanded(child: _header, flex: 4), + Expanded(child: _dataListView, flex: 6), + ], + ); } } diff --git a/lib/widgets/new/CommonHeader.dart b/lib/widgets/new/CommonHeader.dart index 9c4a2ad..f84446a 100644 --- a/lib/widgets/new/CommonHeader.dart +++ b/lib/widgets/new/CommonHeader.dart @@ -17,11 +17,12 @@ class CommonHeader extends StatelessWidget { final Function(CommonHeaderEnum) onTap; - CommonHeader(this.title, this.assetImage, this.gradiantColor, {Key key, this.ratio, this.isCustom = false, this.message, this.onTap}) - : assert((isCustom == true && message == null) ? false : true); + CommonHeader(this.title, this.assetImage, this.gradiantColor, {Key key, this.ratio, this.isCustom = false, this.message, this.onTap}) : assert((isCustom == true && message == null) ? false : true); @override Widget build(BuildContext context) { + bool isPortrait = MediaQuery.of(context).orientation == Orientation.portrait; + return AspectRatio( aspectRatio: ratio ?? 469 / 313, child: Stack( @@ -53,7 +54,7 @@ class CommonHeader extends StatelessWidget { ), isCustom ? Column( - mainAxisAlignment: MainAxisAlignment.end, + mainAxisAlignment: isPortrait ? MainAxisAlignment.end : MainAxisAlignment.center, children: [ title.toText(30), message.toText(16, textAlign: TextAlign.center).paddingOnly(top: 16, left: 50, right: 50), @@ -99,7 +100,7 @@ class CommonHeader extends StatelessWidget { }), ], ), - 32.height, + if (isPortrait) 32.height, ], ) : Column( @@ -109,7 +110,7 @@ class CommonHeader extends StatelessWidget { 26.height, title.toText(30), ], - ), + ).paddingOnly(right: isPortrait ? 0 : 120), ], ), );