From f7b967c30d1f638e7257d42643214d090615e942 Mon Sep 17 00:00:00 2001 From: Sikander Saleem Date: Thu, 27 May 2021 08:57:50 +0300 Subject: [PATCH] Tangheem Detail inside table UI modification. --- lib/classes/utils.dart | 6 +- lib/ui/screens/tangheem_detail_screen.dart | 221 ++++++++++++++++----- 2 files changed, 179 insertions(+), 48 deletions(-) diff --git a/lib/classes/utils.dart b/lib/classes/utils.dart index d6b9236..df4c7bd 100644 --- a/lib/classes/utils.dart +++ b/lib/classes/utils.dart @@ -24,7 +24,11 @@ class Utils { } static int stringToHex(String colorCode) { - return int.parse(colorCode.replaceAll("#", "0xff")); + try { + return int.parse(colorCode.replaceAll("#", "0xff")); + } catch(ex){ + return (0xff000000); + } } static void showLoading(BuildContext context) { diff --git a/lib/ui/screens/tangheem_detail_screen.dart b/lib/ui/screens/tangheem_detail_screen.dart index 8be7d04..703f65a 100644 --- a/lib/ui/screens/tangheem_detail_screen.dart +++ b/lib/ui/screens/tangheem_detail_screen.dart @@ -157,22 +157,44 @@ class _TangheemDetailScreenState extends State { itemCount: ayatTangheemTypeMappedDataList.length > 5 ? 5 : ayatTangheemTypeMappedDataList.length, itemBuilder: (context, index) { var _ayatTangheemTypeMappedData = ayatTangheemTypeMappedDataList[index]; - List _tangheemInsideTableTrueList = []; - List _tangheemInsideTableValueList = []; - List _tangheemInsideTableEmptyList = []; + List _tangheemInsideTableList = []; + List _tangheemAboveTableList = []; + List _tangheemBelowTableList = []; List _tangheemWords = []; + List _tempPropertyList = List() + _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 ?? ""); - _tangheemInsideTableTrueList = - _ayatTangheemTypeMappedData?.property?.where((element) => (element.isInsideTable) && (element.propertyValue ?? "").isNotEmpty)?.toList() ?? []; - _tangheemInsideTableValueList = - _ayatTangheemTypeMappedData?.property?.where((element) => (!element.isInsideTable) && (element.propertyValue ?? "").isNotEmpty)?.toList() ?? []; + // _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); + _tempTangheemIndexWord = getArabicIndexWord(index) + " "; } return ListView( @@ -205,13 +227,13 @@ class _TangheemDetailScreenState extends State { ), SizedBox(height: 16), ListView.separated( - itemCount: _tangheemInsideTableValueList.length, + itemCount: _tangheemAboveTableList.length, physics: NeverScrollableScrollPhysics(), shrinkWrap: true, separatorBuilder: (context, index) { return Divider( color: Colors.white, - height: 1, + height: 4, thickness: 0, ); }, @@ -224,23 +246,25 @@ class _TangheemDetailScreenState extends State { padding: EdgeInsets.only(left: 4, right: 8), alignment: Alignment.centerRight, child: Text( - _tangheemInsideTableValueList[index].propertyText, + _tangheemAboveTableList[index].propertyText, + maxLines: 1, style: TextStyle(fontWeight: FontWeight.bold, color: ColorConsts.secondaryOrange), ), color: ColorConsts.secondaryWhite, ), ), - SizedBox(width: 8), + SizedBox(width: 4), Expanded( child: Container( height: 40, padding: EdgeInsets.only(left: 4, right: 8), alignment: Alignment.centerRight, child: Text( - _tangheemInsideTableValueList[index].propertyValue, + _tangheemAboveTableList[index].propertyValue, + maxLines: 1, style: TextStyle( color: Color( - Utils.stringToHex(_tangheemInsideTableValueList[index].textColor), + Utils.stringToHex(_tangheemAboveTableList[index].textColor), ), ), ), @@ -250,7 +274,7 @@ class _TangheemDetailScreenState extends State { ], ); }), - if (_tangheemInsideTableTrueList.isNotEmpty) + if (_tangheemInsideTableList.isNotEmpty) Container( color: ColorConsts.primaryBlue, margin: EdgeInsets.only(top: 8, bottom: 8), @@ -258,15 +282,15 @@ class _TangheemDetailScreenState extends State { child: Column( children: [ Text( - _ayatTangheemTypeMappedData.tangheemTypeName ?? "", + "خط النبر و التنغيم ل${_ayatTangheemTypeMappedData.tangheemTypeName ?? ""}", style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white), ), SizedBox(height: 8), - tangheemPropertyView(_tangheemInsideTableTrueList) + tangheemInsideTablePropertyView(_tangheemInsideTableList) ], ), ), - tangheemPropertyView(_tangheemInsideTableEmptyList) + tangheemOutSideTablePropertyView(_tangheemBelowTableList) ], ); }), @@ -327,50 +351,153 @@ class _TangheemDetailScreenState extends State { ); } - Widget tangheemPropertyView(List tangheemPropertyList) { - return Container( - color: Colors.white, - child: ListView.separated( + Widget tangheemOutSideTablePropertyView(List tangheemPropertyList) { + return ListView.separated( itemCount: tangheemPropertyList.length, physics: NeverScrollableScrollPhysics(), - padding: EdgeInsets.zero, shrinkWrap: true, separatorBuilder: (context, index) { return Divider( color: Colors.white, - height: 1, + height: 4, thickness: 0, ); }, itemBuilder: (context, index) { - return Container( - color: ColorConsts.secondaryWhite, - padding: EdgeInsets.all(8), - child: Column( - mainAxisSize: MainAxisSize.min, - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Text( - tangheemPropertyList[index].propertyText ?? "", - style: TextStyle(fontWeight: FontWeight.bold, fontSize: 12, color: ColorConsts.secondaryOrange), + return Row( + children: [ + Expanded( + child: Container( + height: 40, + padding: EdgeInsets.only(left: 4, right: 8), + alignment: Alignment.centerRight, + child: Text( + tangheemPropertyList[index].propertyText, + maxLines: 1, + style: TextStyle(fontWeight: FontWeight.bold, color: ColorConsts.secondaryOrange), + ), + color: ColorConsts.secondaryWhite, ), - SizedBox(height: 4), - Text( - tangheemPropertyList[index].propertyValue ?? "", - style: TextStyle( - fontSize: 12, - color: Color( - Utils.stringToHex(tangheemPropertyList[index].textColor), + ), + SizedBox(width: 4), + Expanded( + child: Container( + height: 40, + padding: EdgeInsets.only(left: 4, right: 8), + alignment: Alignment.centerRight, + child: Text( + tangheemPropertyList[index].propertyValue, + maxLines: 1, + style: TextStyle( + color: Color( + Utils.stringToHex(tangheemPropertyList[index].textColor), + ), ), ), + color: ColorConsts.secondaryWhite, ), - ], - ), + ) + ], ); - }, - ), - ); + }); + } + + Widget tangheemInsideTablePropertyView(List tangheemPropertyList) { + return Container( + color: Colors.white, + padding: EdgeInsets.all(2), + child: Row( + children: [ + for (var property in tangheemPropertyList) + Expanded( + child: Container( + // color: ColorConsts.secondaryWhite, + // padding: EdgeInsets.all(8), + margin: EdgeInsets.only(left: 2, right: 2), + child: Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Container( + color: ColorConsts.secondaryWhite, + height: 30, + alignment: Alignment.centerRight, + padding: EdgeInsets.only(left: 2, right: 4), + width: double.infinity, + child: Text( + property.propertyText ?? "", + maxLines: 1, + style: TextStyle(fontWeight: FontWeight.bold, fontSize: 12, color: ColorConsts.secondaryOrange), + ), + ), + Container(width: double.infinity, height: 4, color: Colors.white), + Container( + color: ColorConsts.secondaryWhite, + height: 30, + padding: EdgeInsets.only(left: 2, right: 4), + alignment: Alignment.centerRight, + width: double.infinity, + child: Text( + property.propertyValue ?? "", + maxLines: 1, + style: TextStyle( + fontSize: 12, + color: Color( + Utils.stringToHex(property.textColor), + ), + ), + ), + ), + ], + ), + ), + ) + ], + ) + + //@todo sikander :commented these line for later discussion + // ListView.separated( + // itemCount: tangheemPropertyList.length, + // physics: NeverScrollableScrollPhysics(), + // padding: EdgeInsets.zero, + // shrinkWrap: true, + // separatorBuilder: (context, index) { + // return Divider( + // color: Colors.white, + // height: 1, + // thickness: 0, + // ); + // }, + // itemBuilder: (context, index) { + // return Container( + // color: ColorConsts.secondaryWhite, + // padding: EdgeInsets.all(8), + // child: Column( + // mainAxisSize: MainAxisSize.min, + // crossAxisAlignment: CrossAxisAlignment.start, + // mainAxisAlignment: MainAxisAlignment.center, + // children: [ + // Text( + // tangheemPropertyList[index].propertyText ?? "", + // style: TextStyle(fontWeight: FontWeight.bold, fontSize: 12, color: ColorConsts.secondaryOrange), + // ), + // SizedBox(height: 4), + // Text( + // tangheemPropertyList[index].propertyValue ?? "", + // style: TextStyle( + // fontSize: 12, + // color: Color( + // Utils.stringToHex(tangheemPropertyList[index].textColor), + // ), + // ), + // ), + // ], + // ), + // ); + // }, + // ), + ); } Widget discussionView(List _discussionList) {