quran screen improvement.

development
Sikander Saleem 5 years ago
parent 6e120920c9
commit 5e4f4435d8

@ -0,0 +1,7 @@
<svg viewBox="0 0 28.96 28.96" xmlns="http://www.w3.org/2000/svg">
<g data-name="Layer 2" id="Layer_2">
<g data-name="Layer 1" id="Layer_1-2">
<path style="fill: #fff" d="M14.48,0A14.48,14.48,0,1,0,29,14.48,14.5,14.5,0,0,0,14.48,0Zm5.33,18.11a1.2,1.2,0,0,1,0,1.7,1.18,1.18,0,0,1-1.7,0l-3.63-3.62-3.63,3.62a1.18,1.18,0,0,1-1.7,0,1.2,1.2,0,0,1,0-1.7l3.62-3.63L9.15,10.85a1.2,1.2,0,0,1,1.7-1.7l3.63,3.62,3.63-3.62a1.2,1.2,0,1,1,1.7,1.7l-3.62,3.63Z"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 483 B

@ -29,6 +29,18 @@ class TangheemUserApiClient {
return await ApiClient().postJsonForObject((json) => AyatTangheemTypeMapped.fromJson(json), url, postParams);
}
Future<AyaModel> getAyaByFilter(int surahID, int ayahFrom, int ayahTo) async {
String url = "${ApiConsts.tangheemUsers}AyatByRange_Get";
var postParams = {"surahID": surahID, "ayahFrom": ayahFrom, "ayahTo": ayahTo};
return await ApiClient().postJsonForObject((json) => AyaModel.fromJson(json), url, postParams);
}
Future<AyaModel> getQuranByPageNo(int pageNo) async {
String url = "${ApiConsts.tangheemUsers}Quran_Get";
var postParams = {"pageNo": pageNo};
return await ApiClient().postJsonForObject((json) => AyaModel.fromJson(json), url, postParams);
}
Future<AyaModel> getAyaByRange(int itemsPerPage, int currentPageNo, int surahID, int ayahFrom, int ayahTo) async {
String url = "${ApiConsts.tangheemUsers}AyatByRange_Get";
var postParams = {"itemsPerPage": itemsPerPage, "currentPageNo": currentPageNo, "surahID": surahID, "ayahFrom": ayahFrom, "ayahTo": ayahTo};

@ -1,7 +1,7 @@
class SurahModel {
int totalItemsCount;
int statusCode;
String message;
Null message;
List<SurahModelData> data;
SurahModel({this.totalItemsCount, this.statusCode, this.message, this.data});
@ -39,6 +39,8 @@ class SurahModelData {
String englishNameTranslation;
int revelationID;
String revelationType;
int startPageNo;
int endPageNo;
SurahModelData(
{this.id,
@ -48,7 +50,9 @@ class SurahModelData {
this.numberOfAyahs,
this.englishNameTranslation,
this.revelationID,
this.revelationType});
this.revelationType,
this.startPageNo,
this.endPageNo});
SurahModelData.fromJson(Map<String, dynamic> json) {
id = json['id'];
@ -59,6 +63,8 @@ class SurahModelData {
englishNameTranslation = json['englishNameTranslation'];
revelationID = json['revelation_ID'];
revelationType = json['revelationType'];
startPageNo = json['startPageNo'];
endPageNo = json['endPageNo'];
}
Map<String, dynamic> toJson() {
@ -71,6 +77,8 @@ class SurahModelData {
data['englishNameTranslation'] = this.englishNameTranslation;
data['revelation_ID'] = this.revelationID;
data['revelationType'] = this.revelationType;
data['startPageNo'] = this.startPageNo;
data['endPageNo'] = this.endPageNo;
return data;
}
}

@ -31,10 +31,11 @@ class QuranScreen extends StatefulWidget {
class _QuranScreenState extends State<QuranScreen> {
GlobalKey _globalKey = GlobalKey();
int _selectedSurah = 0;
int _selectedFromAya = 0;
int _selectedToAya = 0;
int _selectedSurah = -1;
int _selectedFromAya = -1;
int _selectedToAya = -1;
int _currentSurahIndex = -1;
int _currentPage = 0;
int _ayaInPage = 5;
List<String> _surahList = [];
@ -63,12 +64,15 @@ class _QuranScreenState extends State<QuranScreen> {
_surahModel = widget.surahModel;
}
_surahList = _surahModel.data.map((element) => element.nameAR).toList();
filterData();
//filterData();
} catch (ex, tr) {
Utils.handleException(ex, null);
} finally {
Utils.hideLoading(context);
}
setState(() {});
getQuranByPageNo();
}
int numberOfAyah = 0;
@ -77,10 +81,11 @@ class _QuranScreenState extends State<QuranScreen> {
var filteredAyahList = List.generate(getNextMultiple(numberOfAyah), (index) => index + 1).toList().where((element) => element == 1 || (element % 5) == 0).toList() ?? [];
_fromAyaList = filteredAyahList.getRange(0, filteredAyahList.length - 1)?.toList() ?? [];
_toAyaList = filteredAyahList.getRange(1, filteredAyahList.length)?.toList() ?? [];
_currentPage = 0;
_selectedFromAya = 0;
_selectedToAya = 0;
getTangheemBySurahId();
// _currentPage = 0;
// _selectedFromAya = 0;
// _selectedToAya = 0;
setState(() {});
//getTangheemBySurahId();
}
void getTangheemBySurahId() async {
@ -93,13 +98,28 @@ class _QuranScreenState extends State<QuranScreen> {
} finally {
Utils.hideLoading(context);
}
getAyaByRange();
setState(() {});
//getAyaByRange();
}
void getAyaByRange() async {
Utils.showLoading(context);
try {
_ayaModel = await TangheemUserApiClient().getAyaByRange(_ayaInPage, 1, _selectedSurah + 1, _fromAyaList[_selectedFromAya], _toAyaList[_selectedToAya]);
_ayaModel = await TangheemUserApiClient().getAyaByFilter(_selectedSurah + 1, _fromAyaList[_selectedFromAya], _toAyaList[_selectedToAya]);
setState(() {});
} catch (ex, tr) {
Utils.handleException(ex, null);
} finally {
Utils.hideLoading(context);
}
scrollToId.animateTo("$_currentPage", duration: Duration(milliseconds: 300), curve: Curves.ease);
}
void getQuranByPageNo() async {
Utils.showLoading(context);
try {
// _currentPage = 603;
_ayaModel = await TangheemUserApiClient().getQuranByPageNo(_currentPage + 1);
setState(() {});
} catch (ex, tr) {
Utils.handleException(ex, null);
@ -124,9 +144,41 @@ class _QuranScreenState extends State<QuranScreen> {
final ScrollController scrollController = ScrollController();
ScrollToId scrollToId;
String getBismillahWithSurahName(String _surahName, bool isShowBismillah, bool isFirstIsAya) {
if (isFirstIsAya && isShowBismillah) {
return "" + _surahName + "\n بِسۡمِ ٱللَّهِ ٱلرَّحۡمَٰنِ ٱلرَّحِيمِ \n";
} else if (isShowBismillah) {
return "\n" + _surahName + "\n بِسۡمِ ٱللَّهِ ٱلرَّحۡمَٰنِ ٱلرَّحِيمِ \n";
}
return "" + _surahName + "\n";
}
String getNotNullValue(List<String> list, int index) {
try {
return list[index];
} catch (ex) {
return "";
}
}
@override
Widget build(BuildContext context) {
String _surahAya = _ayaModel?.data?.map((e) => e.ayahText)?.toList()?.fold("", (value, element) => value + element) ?? "";
var tempList = _ayaModel?.data?.map((e) => e.surahNameEN)?.toList()?.toSet()?.toList() ?? [];
String _surahName = "";
_surahName = tempList.isEmpty ? "" : tempList?.last ?? "";
int index = _surahList.indexWhere((element) => element == _surahName);
if (index != null) {
_currentSurahIndex = index;
}
String _surahAya = "";
_ayaModel?.data?.forEach((element) {
var temp = element.numberInSurah == 1 ? getBismillahWithSurahName(element.surahNameEN, element.surahID != 1, _surahAya.length <= 1) + element.ayahText : element.ayahText;
_surahAya = _surahAya + temp;
});
return Container(
padding: EdgeInsets.fromLTRB(16, 24, 16, 0),
width: double.infinity,
@ -141,181 +193,249 @@ class _QuranScreenState extends State<QuranScreen> {
Row(
children: [
Expanded(
child: CommonDropDownButton(_selectedSurah, list: _surahList, onSelect: (index) {
child: CommonDropDownButton(_selectedSurah, hintText: "السورة", list: _surahList, onSelect: (index) {
if (_selectedSurah != index) {
_selectedSurah = index;
_selectedToAya = 0;
_selectedFromAya = 0;
_selectedToAya = -1;
_selectedFromAya = -1;
filterData();
}
}),
),
SizedBox(width: 4),
Expanded(
child: CommonDropDownButton(_selectedFromAya, list: _fromAyaList.map((e) => "من الاية" + " $e").toList(), onSelect: (index) {
child: CommonDropDownButton(_selectedFromAya, hintText: "من الاية", list: _fromAyaList.map((e) => "من الاية" + " $e").toList(), onSelect: (index) {
if (_selectedFromAya != index) {
_selectedFromAya = index;
_selectedToAya = index;
_currentPage = index;
getAyaByRange();
setState(() {});
/// _selectedToAya = index;
// _currentPage = index;
// getAyaByRange();
}
}),
),
SizedBox(width: 4),
Expanded(
child: CommonDropDownButton(_selectedToAya, list: _toAyaList.map((e) => "الى الاية" + " $e").toList(), onSelect: (index) {
child: CommonDropDownButton(_selectedToAya, hintText: "الى الاية", list: _toAyaList.map((e) => "الى الاية" + " $e").toList(), onSelect: (index) {
if (_selectedToAya != index) {
_selectedToAya = index;
_currentPage = index;
getAyaByRange();
setState(() {});
// _currentPage = index;
// getAyaByRange();
}
}),
),
],
),
SizedBox(height: 8),
Row(
children: [
commonIconButton("ابدأ البحث", "assets/icons/go_forward.svg", () {
if (_selectedSurah < 0) {
Utils.showToast("الرجاء اختيار السورة");
return;
}
if (_selectedFromAya < 0) {
Utils.showToast("لم تحدد بداية الآية");
return;
}
if (_selectedToAya < 0) {
Utils.showToast("لم تحدد الآية المنتهية");
return;
}
getAyaByRange();
}),
SizedBox(width: 8),
commonIconButton(
"مسح البحث",
"assets/icons/cancel.svg",
(_selectedSurah == -1 || _selectedFromAya == -1 || _selectedToAya == -1)
? null
: () {
_selectedSurah = -1;
_selectedFromAya = -1;
_selectedToAya = -1;
getQuranByPageNo();
}),
],
),
SizedBox(height: 16),
Expanded(
child: Container(
margin: EdgeInsets.only(top: 4, bottom: 4),
padding: EdgeInsets.only(top: 16, bottom: 4, right: 16, left: 16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
nextOptionButton(
"assets/icons/prev.svg",
_selectedSurah == 0 ? "" : _surahList[_selectedSurah - 1],
_selectedSurah == 0
? null
: () {
_selectedSurah = _selectedSurah - 1;
filterData();
}),
previousOptionButton(
"assets/icons/next.svg",
_selectedSurah == (_surahList.isNotEmpty ? (_surahList.length - 1) : 0) ? "" : _surahList[_selectedSurah + 1],
_selectedSurah == (_surahList.isNotEmpty ? (_surahList.length - 1) : 0)
? null
: () {
_selectedSurah = _selectedSurah + 1;
filterData();
}),
],
),
Expanded(
child: SingleChildScrollView(
physics: BouncingScrollPhysics(),
child: RepaintBoundary(
key: _globalKey,
child: Material(
color: Colors.white,
child: ListView(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
padding: EdgeInsets.only(top: 16, bottom: 8),
children: [
// Text(
// "بسم الله الرحمن الرحيم",
// textAlign: TextAlign.center,
// style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20, color: ColorConsts.primaryBlue, height: 1),
// ),
// SizedBox(height: 8),
Container(
padding: EdgeInsets.only(left: 4, right: 4),
child: Text(
_surahAya,
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: "UthmanicHafs",
fontSize: 18,
color: ColorConsts.primaryBlue,
fontWeight: FontWeight.bold,
if (_surahAya.isNotEmpty)
Expanded(
child: Container(
margin: EdgeInsets.only(top: 4, bottom: 4),
padding: EdgeInsets.only(top: 16, bottom: 4, right: 16, left: 16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
nextOptionButton(
"assets/icons/prev.svg",
_currentSurahIndex <= 0 ? "" : getNotNullValue(_surahList, _currentSurahIndex - 1),
_currentSurahIndex <= 0
? null
: () {
// _selectedSurah = _selectedSurah - 1;
// filterData();
}),
previousOptionButton(
"assets/icons/next.svg",
_currentSurahIndex >= (_surahList.isNotEmpty ? (_surahList.length - 1) : 0) ? "" : getNotNullValue(_surahList, _currentSurahIndex + 1),
_currentSurahIndex >= (_surahList.isNotEmpty ? (_surahList.length - 1) : 0)
? null
: () {
// _selectedSurah = _selectedSurah + 1;
// filterData();
}),
],
),
Expanded(
child: SingleChildScrollView(
physics: BouncingScrollPhysics(),
child: RepaintBoundary(
key: _globalKey,
child: Material(
color: Colors.white,
child: ListView(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
padding: EdgeInsets.only(top: 16, bottom: 8),
children: [
// Text(
// "بسم الله الرحمن الرحيم",
// textAlign: TextAlign.center,
// style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20, color: ColorConsts.primaryBlue, height: 1),
// ),
// SizedBox(height: 8),
Container(
padding: EdgeInsets.only(left: 4, right: 4),
child: Text(
_surahAya,
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: "UthmanicHafs",
fontSize: 18,
color: ColorConsts.primaryBlue,
fontWeight: FontWeight.bold,
),
),
// todo "sikander" : lines commented for future
// TextHighLightWidget(
// text: _surahAya,
// valueColor: ColorConsts.primaryBlue,
// highlights: _tangheemWords,
// onTap: (value) {
// List<AyatTangheemTypeMappedData> _ayatList = _ayatTangheemTypeMapped.data?.where((element) => element.highlightText == value)?.toList() ?? [];
// if (_ayatList.length > 1) {
// _selectTangheemType(_ayatList);
// } else {
// Navigator.pushNamed(context, TangheemDetailScreen.routeName, arguments: _ayatList.first);
// }
// },
// style: TextStyle(
// fontFamily: "UthmanicHafs",
// fontSize: 18,
// fontWeight: FontWeight.bold,
// ),
// ),
),
// todo "sikander" : lines commented for future
// TextHighLightWidget(
// text: _surahAya,
// valueColor: ColorConsts.primaryBlue,
// highlights: _tangheemWords,
// onTap: (value) {
// List<AyatTangheemTypeMappedData> _ayatList = _ayatTangheemTypeMapped.data?.where((element) => element.highlightText == value)?.toList() ?? [];
// if (_ayatList.length > 1) {
// _selectTangheemType(_ayatList);
// } else {
// Navigator.pushNamed(context, TangheemDetailScreen.routeName, arguments: _ayatList.first);
// }
// },
// style: TextStyle(
// fontFamily: "UthmanicHafs",
// fontSize: 18,
// fontWeight: FontWeight.bold,
// ),
// ),
),
],
],
),
),
),
),
),
),
SizedBox(height: 8),
AyaScrollViewer(
scrollDirection: Axis.horizontal,
scrollToId: scrollToId,
children: <ScrollContent>[
for (int i = 0; i < _fromAyaList.length; i++)
ScrollContent(
id: '$i',
child: Text(
" ${i + 1} ",
style: TextStyle(fontSize: 16, color: _currentPage == i ? ColorConsts.secondaryOrange : ColorConsts.textHintGrey),
),
),
],
),
SizedBox(height: 4),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
nextOptionButton(
"assets/icons/prev_single.svg",
"الآيات السابقة",
_currentPage == 0
? null
: () {
_currentPage = _currentPage - 1;
_selectedFromAya = _selectedFromAya - 1;
_selectedToAya = _selectedToAya - 1;
getAyaByRange();
}),
previousOptionButton(
"assets/icons/next_single.svg",
"الآيات التالية",
_currentPage == (_toAyaList.isNotEmpty ? (_toAyaList.length - 1) : 0)
? null
: () {
_currentPage = _currentPage + 1;
_selectedFromAya = _selectedFromAya + 1;
_selectedToAya = _selectedToAya + 1;
getAyaByRange();
}),
],
),
],
// SizedBox(height: 8),
// AyaScrollViewer(
// scrollDirection: Axis.horizontal,
// scrollToId: scrollToId,
// children: <ScrollContent>[
// for (int i = 0; i < _fromAyaList.length; i++)
// ScrollContent(
// id: '$i',
// child: Text(
// " ${i + 1} ",
// style: TextStyle(fontSize: 16, color: _currentPage == i ? ColorConsts.secondaryOrange : ColorConsts.textHintGrey),
// ),
// ),
// ],
// ),
SizedBox(height: 4),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
nextOptionButton(
"assets/icons/prev_single.svg",
"الآيات السابقة",
_currentPage == 0
? null
: () {
_currentPage = _currentPage - 1;
_selectedSurah = -1;
_selectedFromAya = -1;
_selectedToAya = -1;
getQuranByPageNo();
}),
previousOptionButton(
"assets/icons/next_single.svg",
"الآيات التالية",
_currentPage == 604
? null
: () {
_currentPage = _currentPage + 1;
_selectedSurah = -1;
_selectedFromAya = -1;
_selectedToAya = -1;
getQuranByPageNo();
}),
],
),
],
),
),
),
),
// AyaPlayerWidget(surahName: _surahList.isNotEmpty ? _surahList[_selectedSurah] : "", globalKey: _globalKey)
],
),
);
}
Widget commonIconButton(String title, String iconString, VoidCallback callback) {
return InkWell(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
onTap: callback,
child: Container(
height: 36,
decoration: BoxDecoration(
color: callback == null ? ColorConsts.secondaryPink.withOpacity(.5) : ColorConsts.secondaryPink,
borderRadius: BorderRadius.circular(6),
),
padding: EdgeInsets.fromLTRB(8, 2, 8, 2),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Text(
title,
maxLines: 1,
style: TextStyle(fontSize: 12, color: Colors.white),
),
SizedBox(width: 12),
SvgPicture.asset(iconString, width: 20, height: 20, color: Colors.white),
],
),
),
);
}
Widget nextOptionButton(String icon, String text, VoidCallback onPressed) {
return InkWell(
onTap: onPressed,

Loading…
Cancel
Save