Tangheem Detail inside table UI modification.

development
Sikander Saleem 4 years ago
parent d9696d873e
commit f7b967c30d

@ -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) {

@ -157,22 +157,44 @@ class _TangheemDetailScreenState extends State<TangheemDetailScreen> {
itemCount: ayatTangheemTypeMappedDataList.length > 5 ? 5 : ayatTangheemTypeMappedDataList.length,
itemBuilder: (context, index) {
var _ayatTangheemTypeMappedData = ayatTangheemTypeMappedDataList[index];
List<TangheemProperty> _tangheemInsideTableTrueList = [];
List<TangheemProperty> _tangheemInsideTableValueList = [];
List<TangheemProperty> _tangheemInsideTableEmptyList = [];
List<TangheemProperty> _tangheemInsideTableList = [];
List<TangheemProperty> _tangheemAboveTableList = [];
List<TangheemProperty> _tangheemBelowTableList = [];
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 ?? "");
_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<TangheemDetailScreen> {
),
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<TangheemDetailScreen> {
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<TangheemDetailScreen> {
],
);
}),
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<TangheemDetailScreen> {
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<TangheemDetailScreen> {
);
}
Widget tangheemPropertyView(List<TangheemProperty> tangheemPropertyList) {
return Container(
color: Colors.white,
child: ListView.separated(
Widget tangheemOutSideTablePropertyView(List<TangheemProperty> 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<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(
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<DiscussionModelData> _discussionList) {

Loading…
Cancel
Save