Tangheem Detail inside table UI modification.

development
Sikander Saleem 5 years ago
parent d9696d873e
commit f7b967c30d

@ -24,7 +24,11 @@ class Utils {
} }
static int stringToHex(String colorCode) { static int stringToHex(String colorCode) {
try {
return int.parse(colorCode.replaceAll("#", "0xff")); return int.parse(colorCode.replaceAll("#", "0xff"));
} catch(ex){
return (0xff000000);
}
} }
static void showLoading(BuildContext context) { static void showLoading(BuildContext context) {

@ -157,22 +157,44 @@ class _TangheemDetailScreenState extends State<TangheemDetailScreen> {
itemCount: ayatTangheemTypeMappedDataList.length > 5 ? 5 : ayatTangheemTypeMappedDataList.length, itemCount: ayatTangheemTypeMappedDataList.length > 5 ? 5 : ayatTangheemTypeMappedDataList.length,
itemBuilder: (context, index) { itemBuilder: (context, index) {
var _ayatTangheemTypeMappedData = ayatTangheemTypeMappedDataList[index]; var _ayatTangheemTypeMappedData = ayatTangheemTypeMappedDataList[index];
List<TangheemProperty> _tangheemInsideTableTrueList = []; List<TangheemProperty> _tangheemInsideTableList = [];
List<TangheemProperty> _tangheemInsideTableValueList = []; List<TangheemProperty> _tangheemAboveTableList = [];
List<TangheemProperty> _tangheemInsideTableEmptyList = []; List<TangheemProperty> _tangheemBelowTableList = [];
List<String> _tangheemWords = []; List<String> _tangheemWords = [];
List<TangheemProperty> _tempPropertyList = List<TangheemProperty>() + _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 ?? ""); _tangheemWords.add(_ayatTangheemTypeMappedData.highlightText ?? "");
_tangheemInsideTableTrueList = // _tangheemInsideTableList =
_ayatTangheemTypeMappedData?.property?.where((element) => (element.isInsideTable) && (element.propertyValue ?? "").isNotEmpty)?.toList() ?? []; // _ayatTangheemTypeMappedData?.property?.where((element) => (element.isInsideTable) && (element.propertyValue ?? "").isNotEmpty)?.toList() ?? [];
_tangheemInsideTableValueList = // _tangheemAboveTableList =
_ayatTangheemTypeMappedData?.property?.where((element) => (!element.isInsideTable) && (element.propertyValue ?? "").isNotEmpty)?.toList() ?? []; // _ayatTangheemTypeMappedData?.property?.where((element) => (!element.isInsideTable) && (element.propertyValue ?? "").isNotEmpty)?.toList() ?? [];
//
//
var _tempTangheemIndexWord = ""; var _tempTangheemIndexWord = "";
if (ayatTangheemTypeMappedDataList.length == 1) { if (ayatTangheemTypeMappedDataList.length == 1) {
_tempTangheemIndexWord = ""; _tempTangheemIndexWord = "";
} else { } else {
_tempTangheemIndexWord = getArabicIndexWord(index); _tempTangheemIndexWord = getArabicIndexWord(index) + " ";
} }
return ListView( return ListView(
@ -205,13 +227,13 @@ class _TangheemDetailScreenState extends State<TangheemDetailScreen> {
), ),
SizedBox(height: 16), SizedBox(height: 16),
ListView.separated( ListView.separated(
itemCount: _tangheemInsideTableValueList.length, itemCount: _tangheemAboveTableList.length,
physics: NeverScrollableScrollPhysics(), physics: NeverScrollableScrollPhysics(),
shrinkWrap: true, shrinkWrap: true,
separatorBuilder: (context, index) { separatorBuilder: (context, index) {
return Divider( return Divider(
color: Colors.white, color: Colors.white,
height: 1, height: 4,
thickness: 0, thickness: 0,
); );
}, },
@ -224,23 +246,25 @@ class _TangheemDetailScreenState extends State<TangheemDetailScreen> {
padding: EdgeInsets.only(left: 4, right: 8), padding: EdgeInsets.only(left: 4, right: 8),
alignment: Alignment.centerRight, alignment: Alignment.centerRight,
child: Text( child: Text(
_tangheemInsideTableValueList[index].propertyText, _tangheemAboveTableList[index].propertyText,
maxLines: 1,
style: TextStyle(fontWeight: FontWeight.bold, color: ColorConsts.secondaryOrange), style: TextStyle(fontWeight: FontWeight.bold, color: ColorConsts.secondaryOrange),
), ),
color: ColorConsts.secondaryWhite, color: ColorConsts.secondaryWhite,
), ),
), ),
SizedBox(width: 8), SizedBox(width: 4),
Expanded( Expanded(
child: Container( child: Container(
height: 40, height: 40,
padding: EdgeInsets.only(left: 4, right: 8), padding: EdgeInsets.only(left: 4, right: 8),
alignment: Alignment.centerRight, alignment: Alignment.centerRight,
child: Text( child: Text(
_tangheemInsideTableValueList[index].propertyValue, _tangheemAboveTableList[index].propertyValue,
maxLines: 1,
style: TextStyle( style: TextStyle(
color: Color( color: Color(
Utils.stringToHex(_tangheemInsideTableValueList[index].textColor), Utils.stringToHex(_tangheemAboveTableList[index].textColor),
), ),
), ),
), ),
@ -250,7 +274,7 @@ class _TangheemDetailScreenState extends State<TangheemDetailScreen> {
], ],
); );
}), }),
if (_tangheemInsideTableTrueList.isNotEmpty) if (_tangheemInsideTableList.isNotEmpty)
Container( Container(
color: ColorConsts.primaryBlue, color: ColorConsts.primaryBlue,
margin: EdgeInsets.only(top: 8, bottom: 8), margin: EdgeInsets.only(top: 8, bottom: 8),
@ -258,15 +282,15 @@ class _TangheemDetailScreenState extends State<TangheemDetailScreen> {
child: Column( child: Column(
children: [ children: [
Text( Text(
_ayatTangheemTypeMappedData.tangheemTypeName ?? "", "خط النبر و التنغيم ل${_ayatTangheemTypeMappedData.tangheemTypeName ?? ""}",
style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white), style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
), ),
SizedBox(height: 8), SizedBox(height: 8),
tangheemPropertyView(_tangheemInsideTableTrueList) tangheemInsideTablePropertyView(_tangheemInsideTableList)
], ],
), ),
), ),
tangheemPropertyView(_tangheemInsideTableEmptyList) tangheemOutSideTablePropertyView(_tangheemBelowTableList)
], ],
); );
}), }),
@ -327,49 +351,152 @@ class _TangheemDetailScreenState extends State<TangheemDetailScreen> {
); );
} }
Widget tangheemPropertyView(List<TangheemProperty> tangheemPropertyList) { Widget tangheemOutSideTablePropertyView(List<TangheemProperty> tangheemPropertyList) {
return Container( return ListView.separated(
color: Colors.white,
child: ListView.separated(
itemCount: tangheemPropertyList.length, itemCount: tangheemPropertyList.length,
physics: NeverScrollableScrollPhysics(), physics: NeverScrollableScrollPhysics(),
padding: EdgeInsets.zero,
shrinkWrap: true, shrinkWrap: true,
separatorBuilder: (context, index) { separatorBuilder: (context, index) {
return Divider( return Divider(
color: Colors.white, color: Colors.white,
height: 1, height: 4,
thickness: 0, thickness: 0,
); );
}, },
itemBuilder: (context, index) { itemBuilder: (context, index) {
return Container( 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, color: ColorConsts.secondaryWhite,
padding: EdgeInsets.all(8), ),
),
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<TangheemProperty> 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( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
Text( Container(
tangheemPropertyList[index].propertyText ?? "", 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), style: TextStyle(fontWeight: FontWeight.bold, fontSize: 12, color: ColorConsts.secondaryOrange),
), ),
SizedBox(height: 4), ),
Text( Container(width: double.infinity, height: 4, color: Colors.white),
tangheemPropertyList[index].propertyValue ?? "", 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( style: TextStyle(
fontSize: 12, fontSize: 12,
color: Color( color: Color(
Utils.stringToHex(tangheemPropertyList[index].textColor), 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),
// ),
// ),
// ),
// ],
// ),
// );
// },
// ),
); );
} }

Loading…
Cancel
Save