Haroon6138
/
tangheem
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

tangheem detail improvements

Browse Source
development-design-2.0
Sikander Saleem 3 years ago
parent 9647dca24e
commit d6c2245783
7 changed files with 569 additions and 619 deletions
Show Stats Download Patch File Download Diff File

3
lib/classes/colors.dart
Unescape Escape View File

@ -33,7 +33,8 @@ class ColorConsts {
static const Color brownColor = Color(0xffDAE8646);
static const Color brownLightColor = Color(0xffAE8646);
static const Color brownLightECColor = Color(0xffECE9DB);
static const Color brownB7CColor = Color(0xffB78438);
static const Color brownB7Color = Color(0xffB78438);
static const Color greyB7Color = Color(0xffB7B7B7);
static const Color brownB1CColor = Color(0xffB1A995);
static const Color brownB6CColor = Color(0xffB68439);
static const Color greyLightColor = Color(0xffB7B7B7);

10
lib/ui/dialogs/discussion_input_dialog.dart
Unescape Escape View File

@ -49,7 +49,7 @@ class _DiscussionInputDialogState extends State<DiscussionInputDialog> {
child: Container(
width: double.infinity,
decoration: BoxDecoration(
color: ColorConsts.primaryBlue,
color: ColorConsts.brownB1CColor,
borderRadius: BorderRadius.circular(16),
),
padding: EdgeInsets.symmetric(vertical: 16, horizontal: 16),
@ -62,7 +62,7 @@ class _DiscussionInputDialogState extends State<DiscussionInputDialog> {
style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white, fontSize: 16),
),
SizedBox(height: 12),
CommonTextFieldWidget(hint: "فحوى التعليق", controller: _commentController, maxLines: 5, focusNode: _focusNode),
CommonTextFieldWidget(hint: "فحوى التعليق", controller: _commentController, maxLines: 5, focusNode: _focusNode, fillColor: ColorConsts.brownLightECColor, isBorder: true),
SizedBox(height: 12),
SizedBox(
width: double.infinity,
@ -77,12 +77,12 @@ class _DiscussionInputDialogState extends State<DiscussionInputDialog> {
widget.onCommentPress(_commentController.text);
},
style: TextButton.styleFrom(
primary: Colors.white,
foregroundColor: Colors.white,
padding: EdgeInsets.all(2),
backgroundColor: ColorConsts.secondaryPink,
backgroundColor: ColorConsts.brownColor,
textStyle: TextStyle(fontSize: 14, fontFamily: "DroidKufi"),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(6.0),
borderRadius: BorderRadius.circular(20.0),
),
),
child: Text("أضف تعليقك"),

2
lib/ui/screens/quran_screen.dart
Unescape Escape View File

@ -292,7 +292,7 @@ class _QuranScreenState extends State<QuranScreen> {
decoration: BoxDecoration(
color: ColorConsts.brownLightECColor,
borderRadius: BorderRadius.circular(20),
border: Border.all(color: ColorConsts.brownB7CColor, width: 0.35),
border: Border.all(color: ColorConsts.brownB7Color, width: 0.35),
),
child: Column(
mainAxisSize: MainAxisSize.min,

793
lib/ui/screens/tangheem_detail_screen.dart
Unescape Escape View File

@ -24,6 +24,7 @@ import 'package:tangheem/models/discussion_model.dart';
import 'package:tangheem/ui/dialogs/discussion_input_dialog.dart';
import 'package:tangheem/widgets/aya_player_widget.dart';
import 'package:tangheem/widgets/aya_record_widget.dart';
import 'package:tangheem/widgets/new/CommonHeader.dart';
import 'package:tangheem/widgets/text_highlight_widget.dart';
import 'login_screen.dart';
@ -159,7 +160,6 @@ class _TangheemDetailScreenState extends State<TangheemDetailScreen> {
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.fromLTRB(16, 0, 16, 0),
width: double.infinity,
child: _ayatTangheemTypeMappedFirstData == null
? SizedBox()
@ -169,341 +169,307 @@ class _TangheemDetailScreenState extends State<TangheemDetailScreen> {
Expanded(
child: ListView(
physics: BouncingScrollPhysics(),
padding: EdgeInsets.only(bottom: 16, top: 16),
padding: EdgeInsets.only(bottom: 16),
children: [
Text.rich(
TextSpan(
children: [
TextSpan(
text: _ayatTangheemTypeMappedFirstData.tangheemTypeName ?? "",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20, color: ColorConsts.primaryBlue, height: 1.5),
),
WidgetSpan(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
zoomButtons("assets/icons/reduce_size.svg", () {
if (fontSize <= 12) {
Utils.showToast("وصل حجم الخط إلى الحد الأدنى للحجم");
return;
}
fontSize -= 2;
prefs.setInt(GlobalConsts.fontZoomSize, fontSize);
setState(() {});
}),
SizedBox(width: 4),
zoomButtons("assets/icons/increase_size.svg", () {
if (fontSize >= 36) {
Utils.showToast("وصل حجم الخط إلى الحد الأقصى للحجم");
return;
}
fontSize += 2;
prefs.setInt(GlobalConsts.fontZoomSize, fontSize);
setState(() {});
}),
],
),
),
WidgetSpan(
child: PopupMenuButton(
child: IconButton(
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
constraints: BoxConstraints(),
padding: EdgeInsets.only(right: 2),
icon: SvgPicture.asset("assets/icons/share_aya.svg", height: 16, width: 16),
onPressed: null),
padding: EdgeInsets.fromLTRB(4, 4, 0, 4),
itemBuilder: (_) => <PopupMenuItem<int>>[
PopupMenuItem(
value: 1,
child: Text(
"مشاركة رابط",
style: TextStyle(color: ColorConsts.primaryBlack),
),
),
PopupMenuItem(
value: 2,
child: Text(
"مشاركة صورة",
style: TextStyle(color: ColorConsts.primaryBlack),
),
)
],
onSelected: (int value) {
if (value == 1) {
_shareAyaAsLink();
} else {
_shareAyaAsImage();
}
},
),
),
// TextSpan(text: ' world!'),
],
),
),
SizedBox(height: 8),
Text(
_ayatTangheemTypeMappedFirstData.tangheemTypeDescription ?? "",
style: TextStyle(fontSize: 14, color: ColorConsts.textGrey, height: 1.5),
),
SizedBox(height: 8),
Container(
margin: EdgeInsets.only(top: 4, bottom: 4),
padding: EdgeInsets.only(top: 8, bottom: 8, right: 4, left: 4),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
),
child: SingleChildScrollView(
physics: NeverScrollableScrollPhysics(),
child: RepaintBoundary(
key: _globalKey,
child: Material(
color: Colors.white,
child: ListView.builder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
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<TangheemProperty> _tangheemInsideTableList = [];
List<TangheemProperty> _tangheemAboveTableList = [];
List<TangheemProperty> _tangheemBelowTableList = [];
List<String> _tangheemWords = [];
List<TangheemProperty> _tempPropertyList = [];
_tempPropertyList.addAll(_ayatTangheemTypeMappedData?.property ?? <TangheemProperty>[]);
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) + " ";
}
return ListView(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
padding: EdgeInsets.all(4),
children: [
Row(
children: [
Text(
" جملة ${_ayatTangheemTypeMappedData.tangheemTypeName} $_tempTangheemIndexWord",
style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white, backgroundColor: ColorConsts.primaryBlue),
),
Expanded(
child: Container(height: 2, color: ColorConsts.primaryBlue),
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<TangheemProperty> _tangheemInsideTableList = [];
List<TangheemProperty> _tangheemAboveTableList = [];
List<TangheemProperty> _tangheemBelowTableList = [];
List<String> _tangheemWords = [];
List<TangheemProperty> _tempPropertyList = [];
_tempPropertyList.addAll(_ayatTangheemTypeMappedData?.property ?? <TangheemProperty>[]);
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),
),
),
],
),
SizedBox(height: 8),
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,
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),
),
),
// TextHighLightWidget(
// text: _ayatTangheemTypeMappedData.reverseAyatNumber() ?? "",
// valueColor: ColorConsts.primaryBlue,
// highlights: _tangheemWords,
// highLightFontSize: fontSize,
// style: TextStyle(
// fontFamily: "UthmanicHafs",
// fontSize: fontSize,
// fontWeight: FontWeight.bold,
// ),
// ),
SizedBox(height: 16),
ListView.separated(
child: ListView.separated(
itemCount: _tangheemAboveTableList.length,
physics: NeverScrollableScrollPhysics(),
padding: EdgeInsets.zero,
shrinkWrap: true,
separatorBuilder: (context, index) {
return Divider(
color: Colors.white,
height: 4,
thickness: 0,
);
return Divider(color: ColorConsts.greyB7Color, height: 4, thickness: 0);
},
itemBuilder: (context, index) {
return Row(
children: [
Expanded(
child: Container(
height: 40,
padding: EdgeInsets.only(left: 4, right: 8),
alignment: Alignment.centerRight,
child: Text(
_tangheemAboveTableList[index].propertyText,
maxLines: 1,
style: TextStyle(fontWeight: FontWeight.bold, color: ColorConsts.secondaryOrange),
),
color: ColorConsts.secondaryWhite,
),
_tangheemAboveTableList[index].propertyText.toText(13, color: ColorConsts.greyB7Color),
Container(
width: 1,
height: 18,
color: ColorConsts.greyB7Color,
margin: EdgeInsets.only(left: 8, right: 8),
),
SizedBox(width: 4),
Expanded(
child: Container(
color: ColorConsts.secondaryWhite,
padding: EdgeInsets.all(4),
child: Container(
color: Colors.white,
padding: EdgeInsets.only(left: 4, right: 8),
// alignment: Alignment.centerRight,
child: Html(
data: _tangheemAboveTableList[index]?.propertyValue ?? "",
style: {
'html': Style(textAlign: TextAlign.left),
},
),
// Text(
// _tangheemAboveTableList[index].propertyValue,
// maxLines: 1,
// style: TextStyle(
// color: Color(
// Utils.stringToHex(_tangheemAboveTableList[index].textColor),
// ),
// ),
// ),
padding: EdgeInsets.only(left: 4, right: 8),
// alignment: Alignment.centerRight,
child: Html(
data: _tangheemAboveTableList[index]?.propertyValue ?? "",
style: {
'html': Style(textAlign: TextAlign.left),
},
),
),
)
],
);
}),
if (_tangheemInsideTableList.isNotEmpty)
Container(
color: ColorConsts.primaryBlue,
margin: EdgeInsets.only(top: 8, bottom: 8),
padding: EdgeInsets.all(8),
child: Column(
)
: 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: [
Text(
"خط النبر و التنغيم ل${_ayatTangheemTypeMappedData.tangheemTypeName ?? ""}",
style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
),
SizedBox(height: 8),
tangheemInsideTablePropertyView(_tangheemInsideTableList)
for (int index = 0; index < _dataList.length; index++)
InkWell(
onTap: () {
List<AyatTangheemTypeMappedData> 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)),
),
],
),
),
tangheemOutSideTablePropertyView(_tangheemBelowTableList)
],
),
)
: SizedBox();
Widget aboveInnerMerge = Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
),
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,
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(
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.circular(20),
border: Border.all(color: ColorConsts.greyE0Color, width: 1),
),
child: Column(
children: [aboveInnerBelowMerge, relatedTangheemWidget],
),
)
],
);
},
),
),
),
),
if (_dataList.isNotEmpty)
Column(
children: [
16.height,
Container(
height: 38,
width: double.infinity,
alignment: Alignment.center,
decoration: BoxDecoration(
color: ColorConsts.brownB1CColor,
borderRadius: BorderRadius.only(
topRight: Radius.circular(20.0),
topLeft: Radius.circular(20.0),
),
),
child: "قائمة الأساليب اللغوية في هذه الآية".toText(16),
),
Container(
decoration: BoxDecoration(
color: Colors.transparent,
border: Border.all(width: 1, color: ColorConsts.greyE0Color),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20),
bottomRight: Radius.circular(20),
),
),
child: ListView.separated(
padding: EdgeInsets.all(16),
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: _dataList.length,
separatorBuilder: (context, index) => Divider(height: 1, thickness: 1, color: ColorConsts.greyE0Color).paddingOnly(top: 12, bottom: 12),
itemBuilder: (context, index) {
print(index);
return InkWell(
onTap: () {
List<AyatTangheemTypeMappedData> 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: Text(
_dataList[index].tangheemTypeName,
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16, color: ColorConsts.secondaryOrange, height: 1.5),
),
);
},
),
),
],
),
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),
AyaRecordWidget(),
discussionView(_discussionModel?.data ?? []).paddingOnly(left: 24, right: 24),
SizedBox(height: 16),
discussionView(_discussionModel?.data ?? []),
],
),
),
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),
if (MediaQuery.of(context).orientation == Orientation.landscape)
Column(
mainAxisSize: MainAxisSize.min,
@ -588,40 +554,40 @@ class _TangheemDetailScreenState extends State<TangheemDetailScreen> {
}
Widget tangheemOutSideTablePropertyView(List<TangheemProperty> tangheemPropertyList) {
return ListView.separated(
itemCount: tangheemPropertyList.length,
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
separatorBuilder: (context, index) {
return Divider(
color: Colors.white,
height: 4,
thickness: 0,
);
},
itemBuilder: (context, index) {
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,
return Container(
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: 1),
),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20),
bottomRight: Radius.circular(20),
),
),
child: ListView.separated(
itemCount: tangheemPropertyList.length,
physics: NeverScrollableScrollPhysics(),
padding: EdgeInsets.only(left: 20, right: 20),
shrinkWrap: true,
separatorBuilder: (context, index) {
return Divider(color: ColorConsts.greyB7Color, height: 1, thickness: 0);
},
itemBuilder: (context, index) {
return Row(
children: [
tangheemPropertyList[index].propertyText.toText(13, color: ColorConsts.greyB7Color),
Container(
width: 1,
height: 18,
color: ColorConsts.greyB7Color,
margin: EdgeInsets.only(left: 8, right: 8),
),
),
SizedBox(width: 4),
Expanded(
child: Container(
color: ColorConsts.secondaryWhite,
padding: EdgeInsets.all(4),
Expanded(
child: Container(
color: Colors.white,
padding: EdgeInsets.only(left: 4, right: 8),
// alignment: Alignment.centerRight,
child: Html(
@ -630,130 +596,49 @@ class _TangheemDetailScreenState extends State<TangheemDetailScreen> {
'html': Style(textAlign: TextAlign.left),
},
),
// Text(
// tangheemPropertyList[index].propertyValue,
// maxLines: 1,
// style: TextStyle(
// color: Color(
// Utils.stringToHex(tangheemPropertyList[index].textColor),
// ),
// ),
// ),
),
),
)
],
);
});
)
],
);
}),
);
}
Widget tangheemInsideTablePropertyView(List<TangheemProperty> tangheemPropertyList) {
return Container(
color: Colors.white,
padding: EdgeInsets.all(2),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
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.center,
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),
if ((property?.propertyValue ?? "").length > 0)
Container(
color: ColorConsts.secondaryWhite,
padding: EdgeInsets.all(4),
child: Container(
color: Colors.white,
padding: EdgeInsets.only(left: 2, right: 4),
width: double.infinity,
child: Html(
data: property.propertyValue ?? "",
style: {
'html': Style(textAlign: TextAlign.left),
},
),
// Text(
// property.propertyValue ?? "",
// maxLines: 1,
// style: TextStyle(
// fontSize: 12,
// color: Color(
// Utils.stringToHex(property.textColor),
// ),
// ),
// ),
),
),
],
),
return Column(
mainAxisSize: MainAxisSize.min,
children: [
for (var property in tangheemPropertyList)
Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: 35,
width: double.infinity,
color: Color(0xff669A9D),
alignment: Alignment.center,
child: (property.propertyText ?? "").toText(16),
),
Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
border: Border(
top: BorderSide(color: ColorConsts.greyE0Color, width: 1),
bottom: BorderSide(color: ColorConsts.greyE0Color, width: 1),
)),
padding: EdgeInsets.all(4),
child: Html(
data: property.propertyValue ?? "",
style: {
'html': Style(textAlign: TextAlign.left),
},
),
)
],
)
//@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) {

300
lib/widgets/aya_player_widget.dart
Unescape Escape View File

@ -1,8 +1,10 @@
import 'dart:convert';
import 'dart:ffi';
import 'dart:io';
import 'dart:math' as math;
import 'dart:typed_data';
import 'package:dotted_border/dotted_border.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_svg/flutter_svg.dart';
@ -13,6 +15,9 @@ import 'package:permission_handler/permission_handler.dart';
import 'package:tangheem/classes/colors.dart';
import 'package:tangheem/classes/consts.dart';
import 'package:tangheem/classes/utils.dart';
import 'package:tangheem/extensions/int_extensions.dart';
import 'package:tangheem/extensions/string_extensions.dart';
import 'package:tangheem/extensions/widget_extensions.dart';
import 'package:tangheem/models/aya_tangheem_type_mapped.dart';
class AyaPlayerWidget extends StatefulWidget {
@ -100,145 +105,116 @@ class _AyaPlayerWidgetState extends State<AyaPlayerWidget> {
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(top: 8, bottom: 8),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
),
padding: EdgeInsets.all(8),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: [
if (widget.voiceNoteList.length > 1)
PopupMenuButton(
padding: EdgeInsets.fromLTRB(4, 4, 0, 4),
onSelected: (int index) {
_player.seek(Duration.zero, index: index);
},
child: Transform.rotate(
angle: 180 * math.pi / 180,
child: SvgPicture.asset(
"assets/icons/drop_menu.svg",
width: 16,
return Column(
mainAxisSize: MainAxisSize.min,
children: [
if ((widget.voiceNoteList?.length ?? 0) > 0)
DottedBorder(
borderType: BorderType.Circle,
padding: EdgeInsets.all(5),
color: Color(0xff91C1BC),
dashPattern: [4, 4],
child: StreamBuilder<int>(
stream: _player.currentIndexStream,
builder: (context, snapshot) {
int state = snapshot.data;
if (state == null) return SizedBox();
return Container(
width: 72.0,
margin: EdgeInsets.only(left: 8, right: 8),
height: 72.0,
decoration: BoxDecoration(
image: widget.voiceNoteList.length < 1 ? null : getDecodedImage(state),
borderRadius: BorderRadius.all(
Radius.circular(50.0),
),
),
itemBuilder: (context) {
var _voiceList = widget.voiceNoteList;
var length = _voiceList.length < 2 ? 0 : _voiceList.length;
child: widget.voiceNoteList.length < 1
? ClipRRect(
borderRadius: BorderRadius.all(
Radius.circular(30.0),
),
child: SvgPicture.asset(
"assets/icons/chat_user.svg",
clipBehavior: Clip.antiAlias,
),
)
: null,
);
},
),
),
if ((widget.voiceNoteList?.length ?? 0) > 0)
Container(
height: 42,
margin: EdgeInsets.only(top: 8, bottom: 12),
padding: EdgeInsets.only(left: 15, right: 8),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
border: Border.all(color: Color(0xffE3E3E3), width: 1),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
if (widget.voiceNoteList.length > 1)
PopupMenuButton(
padding: EdgeInsets.fromLTRB(4, 4, 0, 4),
onSelected: (int index) {
_player.seek(Duration.zero, index: index);
},
child: Icon(
Icons.more_vert_rounded,
color: Color(0xffB5B5B5),
size: 18,
),
itemBuilder: (context) {
var _voiceList = widget.voiceNoteList;
var length = _voiceList.length < 2 ? 0 : _voiceList.length;
return List.generate(length, (index) {
return PopupMenuItem(
value: index,
child: Text(
'${_voiceList[index].userName}',
style: TextStyle(color: ColorConsts.primaryBlack),
),
);
});
},
),
if ((widget.voiceNoteList?.length ?? 0) > 0)
StreamBuilder<int>(
stream: _player.currentIndexStream,
return List.generate(length, (index) {
return PopupMenuItem(
value: index,
child: Text(
'${_voiceList[index].userName}',
style: TextStyle(color: ColorConsts.primaryBlack),
),
);
});
},
),
if (widget.voiceNoteList?.isNotEmpty ?? false)
commonIconButton("assets/icons/download_aya.svg", () async {
if (await _requestPermission()) {
saveToPhoneStorage(widget.voiceNoteList[_player.currentIndex].exposeFilePath, widget.voiceNoteList[_player.currentIndex].userName ?? "");
} else {
Utils.showToast("يجب اعطاء الاذن لتنزيل الآية");
}
}),
4.width,
StreamBuilder<double>(
stream: _player.volumeStream,
builder: (context, snapshot) {
int state = snapshot.data;
if (state == null) return SizedBox();
return Container(
width: 50.0,
margin: EdgeInsets.only(left: 8, right: 8),
height: 50.0,
decoration: BoxDecoration(
image: widget.voiceNoteList.length < 1 ? null : getDecodedImage(state),
borderRadius: BorderRadius.all(
Radius.circular(30.0),
),
),
child: widget.voiceNoteList.length < 1
? ClipRRect(
borderRadius: BorderRadius.all(
Radius.circular(30.0),
),
child: SvgPicture.asset(
"assets/icons/chat_user.svg",
clipBehavior: Clip.antiAlias,
),
)
: null,
);
final volumn = snapshot.data;
return Icon(
volumn == 0 ? Icons.volume_off_rounded : Icons.volume_up_rounded,
color: Color(0xffB5B5B5),
size: 18,
).onPress(() {
_player.setVolume(volumn == 0 ? 1.0 : 0.0);
});
},
),
Expanded(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widget.surahName,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14, color: ColorConsts.primaryBlack, height: 1),
),
SizedBox(height: 4),
if ((widget.voiceNoteList?.length ?? 0) > 0)
StreamBuilder<int>(
stream: _player.currentIndexStream,
builder: (context, snapshot) {
final state = snapshot.data;
return Text(
(state == null || widget.voiceNoteList.isEmpty) ? "" : widget.voiceNoteList?.elementAt(state)?.userName ?? "",
style: TextStyle(fontSize: 10, color: ColorConsts.textGrey1, height: 1),
);
},
),
],
),
),
if (widget.voiceNoteList?.isNotEmpty ?? false)
commonIconButton("assets/icons/download_aya.svg", () async {
if (await _requestPermission()) {
saveToPhoneStorage(widget.voiceNoteList[_player.currentIndex].exposeFilePath, widget.voiceNoteList[_player.currentIndex].userName ?? "");
} else {
Utils.showToast("يجب اعطاء الاذن لتنزيل الآية");
}
}),
],
),
SizedBox(height: 8),
if ((widget.voiceNoteList?.length ?? 0) > 0)
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
commonIconButton("assets/icons/next_aya.svg", () {
_player.seekToNext();
}),
SizedBox(width: 4),
StreamBuilder<PlayerState>(
stream: _player.playerStateStream,
StreamBuilder<Duration>(
stream: _player.positionStream,
builder: (context, snapshot) {
final state = snapshot.data?.playing ?? false;
if (state) {
if (_player?.duration?.inSeconds == _player?.position?.inSeconds) {
_player.pause();
_player.seek(Duration.zero);
}
}
return commonIconButton(state ? "assets/icons/pause.svg" : "assets/icons/play_aya.svg", () {
state
? _player.pause()
: _isAudioHaveError
? Utils.showToast("خطأ في تحميل ملف الصوت")
: _player.play();
});
final state = snapshot.data;
return Directionality(textDirection: TextDirection.ltr, child: (_durationTime(state) + " / " + _durationTime(_player.duration)).toText(8, color: ColorConsts.greyB7Color));
},
),
SizedBox(width: 4),
commonIconButton("assets/icons/previous_aya.svg", () {
_player.seekToPrevious();
}),
SizedBox(width: 16),
Expanded(
child: StreamBuilder<Duration>(
stream: _player.positionStream,
@ -246,14 +222,13 @@ class _AyaPlayerWidgetState extends State<AyaPlayerWidget> {
final state = snapshot.data;
return SliderTheme(
data: SliderTheme.of(context).copyWith(
inactiveTrackColor: ColorConsts.sliderBackground,
activeTrackColor: ColorConsts.secondaryOrange,
trackHeight: 8.0,
thumbColor: ColorConsts.primaryBlack,
thumbShape: RoundSliderThumbShape(enabledThumbRadius: 10.0),
overlayColor: ColorConsts.primaryBlack.withAlpha(32),
overlayShape: RoundSliderOverlayShape(overlayRadius: 12.0),
),
inactiveTrackColor: Color(0xffF5F5F5),
activeTrackColor: Color(0xff91C1BC),
trackHeight: 5.0,
thumbColor: ColorConsts.primaryBlack,
thumbShape: RoundSliderThumbShape(enabledThumbRadius: 5.0),
overlayColor: ColorConsts.primaryBlack.withAlpha(32),
overlayShape: SliderComponentShape.noOverlay),
child: Directionality(
textDirection: TextDirection.ltr,
child: Slider(
@ -269,21 +244,48 @@ class _AyaPlayerWidgetState extends State<AyaPlayerWidget> {
},
),
),
SizedBox(width: 8),
StreamBuilder<Duration>(
stream: _player.positionStream,
StreamBuilder<PlayerState>(
stream: _player.playerStateStream,
builder: (context, snapshot) {
final state = snapshot.data;
return Text(
_durationTime(state) ?? "",
style: TextStyle(color: ColorConsts.textGrey1, height: 1.1, fontFamily: "Roboto"),
);
final state = snapshot.data?.playing ?? false;
if (state) {
if (_player?.duration?.inSeconds == _player?.position?.inSeconds) {
_player.pause();
_player.seek(Duration.zero);
}
}
return commonIconButton(state ? "assets/icons/pause.svg" : "assets/icons/play_aya.svg", () {
state
? _player.pause()
: _isAudioHaveError
? Utils.showToast("خطأ في تحميل ملف الصوت")
: _player.play();
});
},
),
],
)
],
),
),
),
Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
(widget.surahName).toText(13, color: ColorConsts.greyB7Color),
SizedBox(width: 4),
widget.numberInSurah.toText(13, color: ColorConsts.greyB7Color),
SizedBox(width: 4),
if ((widget.voiceNoteList?.length ?? 0) > 0)
StreamBuilder<int>(
stream: _player.currentIndexStream,
builder: (context, snapshot) {
final state = snapshot.data;
return ((state == null || widget.voiceNoteList.isEmpty) ? "" : widget.voiceNoteList?.elementAt(state)?.userName ?? "").toText(13, color: ColorConsts.greyB7Color);
},
),
],
),
8.height,
],
);
}
@ -302,8 +304,8 @@ class _AyaPlayerWidgetState extends State<AyaPlayerWidget> {
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
constraints: BoxConstraints(),
padding: EdgeInsets.only(right: 2),
icon: SvgPicture.asset(icon, height: 16, width: 16),
padding: EdgeInsets.zero,
icon: SvgPicture.asset(icon, color: Color(0xff939393), height: 14, width: 14),
onPressed: onPressed);
}

79
lib/widgets/new/CommonHeader.dart
Unescape Escape View File

@ -1,14 +1,24 @@
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:tangheem/classes/colors.dart';
import 'package:tangheem/extensions/int_extensions.dart';
import 'package:tangheem/extensions/string_extensions.dart';
import 'package:tangheem/extensions/widget_extensions.dart';
enum CommonHeaderEnum { ZoomIn, ZoomOut, ShareAsText, ShareAsImage }
class CommonHeader extends StatelessWidget {
final String title;
final Color gradiantColor;
final String assetImage;
final double ratio;
final bool isCustom;
final String message;
final Function(CommonHeaderEnum) onTap;
CommonHeader(this.title, this.assetImage, this.gradiantColor, {Key key,this.ratio}) : super(key: key);
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) {
@ -41,14 +51,65 @@ class CommonHeader extends StatelessWidget {
),
),
),
Column(
mainAxisSize: MainAxisSize.min,
children: [
Image.asset('assets/icons/new/Tangeem-logo-W.png', width: 50),
26.height,
title.toText(30),
],
),
isCustom
? Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
title.toText(30),
message.toText(16, textAlign: TextAlign.center).paddingOnly(top: 16, left: 50, right: 50),
16.height,
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
PopupMenuButton(
child: SvgPicture.asset("assets/icons/new/share.svg", height: 20, width: 20, color: Colors.white),
padding: EdgeInsets.fromLTRB(4, 4, 0, 4),
itemBuilder: (_) => <PopupMenuItem<int>>[
PopupMenuItem(
value: 1,
child: Text(
"مشاركة رابط",
style: TextStyle(color: ColorConsts.primaryBlack),
),
),
PopupMenuItem(
value: 2,
child: Text(
"مشاركة صورة",
style: TextStyle(color: ColorConsts.primaryBlack),
),
)
],
onSelected: (int value) {
if (value == 1) {
onTap(CommonHeaderEnum.ShareAsText);
} else {
onTap(CommonHeaderEnum.ShareAsImage);
}
},
),
12.width,
SvgPicture.asset("assets/icons/new/zoom_out.svg", height: 20, width: 20, color: Colors.white).onPress(() {
onTap(CommonHeaderEnum.ZoomOut);
}),
12.width,
SvgPicture.asset("assets/icons/new/zoom_in.svg", height: 20, width: 20, color: Colors.white).onPress(() {
onTap(CommonHeaderEnum.ZoomIn);
}),
],
),
32.height,
],
)
: Column(
mainAxisSize: MainAxisSize.min,
children: [
Image.asset('assets/icons/new/Tangeem-logo-W.png', width: 50),
26.height,
title.toText(30),
],
),
],
),
);

1
pubspec.yaml
Unescape Escape View File

@ -53,6 +53,7 @@ dependencies:
youtube_player_flutter: ^8.0.0
flutter_html: ^2.2.1
flutter_inappwebview: ^5.7.2+3
dotted_border: ^2.0.0+1
dev_dependencies:
flutter_test:

Write Preview
Loading…
Cancel
Save