tangheem api added, and improvements

lib/api/tangheem_user_api_client.dart

@@ -1,7 +1,11 @@
 import 'dart:async';
 
+import 'package:tangheem/models/aya_tangheem_property.dart';
+import 'package:tangheem/models/aya_tangheem_type.dart';
+import 'package:tangheem/models/aya_tangheem_type_mapped.dart';
 import 'package:tangheem/models/country_model.dart';
 import 'package:tangheem/models/general_response_model.dart';
+import 'package:tangheem/models/quick_links_model.dart';
 import 'package:tangheem/models/tangheem_type_model.dart';
 import 'api_client.dart';
 import 'package:tangheem/classes/consts.dart';
@@ -21,7 +25,7 @@ class TangheemUserApiClient {
 
   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, "sortFieldName": "string", "isSortAsc": true, "surahID": surahID, "ayahFrom": ayahFrom, "ayahTo": ayahTo};
+    var postParams = {"itemsPerPage": itemsPerPage, "currentPageNo": currentPageNo, "surahID": surahID, "ayahFrom": ayahFrom, "ayahTo": ayahTo};
     return await ApiClient().postJsonForObject((json) => AyaModel.fromJson(json), url, postParams);
   }
 
@@ -31,6 +35,30 @@ class TangheemUserApiClient {
     return await ApiClient().postJsonForObject((json) => TangheemType.fromJson(json), url, postParams);
   }
 
+  Future<AyatTangheemTypeMapped> getAyaTangheemTypeMapped(int surahNo, String tangheemTypeName) async {
+    String url = "${ApiConsts.tangheemUsers}AyatTangheemTypeMapped_Get";
+    var postParams = {"surahNo": surahNo, "tangheemTypeName": tangheemTypeName};
+    return await ApiClient().postJsonForObject((json) => AyatTangheemTypeMapped.fromJson(json), url, postParams);
+  }
+
+  Future<AyaTangheemType> getAyaTangheemType(int currentPage, int surahNo, String tangheemTypeName) async {
+    String url = "${ApiConsts.tangheemUsers}AyaTangheemType_Get";
+    var postParams = {"itemsPerPage": 5, "currentPageNo": currentPage, "surahNo": surahNo, "tangheemTypeName": tangheemTypeName};
+    return await ApiClient().postJsonForObject((json) => AyaTangheemType.fromJson(json), url, postParams);
+  }
+
+  Future<AyaTangheemProperty> getAyaTangheemProperty(int currentPage, int surahNo, String tangheemTypeName) async {
+    String url = "${ApiConsts.tangheemUsers}AyaTangheemProperty_Get";
+    var postParams = {"itemsPerPage": 5, "currentPageNo": currentPage, "surahNo": surahNo, "tangheemTypeName": tangheemTypeName};
+    return await ApiClient().postJsonForObject((json) => AyaTangheemProperty.fromJson(json), url, postParams);
+  }
+
+  Future<QuickLinksModel> quickLinks() async {
+    String url = "${ApiConsts.tangheemUsers}QuickLinks_Get";
+    var postParams = {};
+    return await ApiClient().postJsonForObject((json) => QuickLinksModel.fromJson(json), url, postParams);
+  }
+
   Future<GeneralResponseModel> contactUs(String firstName, String lastName, String email, String phone, String description) async {
     String url = "${ApiConsts.tangheemUsers}ContactUs_Add";
     var postParams = {"firstName": firstName, "lastName": lastName, "email": email, "phone": phone, "description": description};

lib/main.dart

@@ -40,7 +40,13 @@ class Application extends StatelessWidget {
             className = CommonAppbar(showDrawer: true, child: HomeScreen());
             break;
           case TangheemScreen.routeName:
-            className = CommonAppbar(child: TangheemScreen());
+            Map<String, Object> data = settings.arguments;
+            className = CommonAppbar(
+              child: TangheemScreen(
+                surah: data["surahData"],
+                tangheemTypeName: data["tangheemTypeName"],
+              ),
+            );
             break;
           case SurahScreen.routeName:
             String query = settings.arguments.toString();

lib/models/authentication_user_model.dart

@@ -26,7 +26,7 @@ class Result {
   int totalItemsCount;
   int statusCode;
   String message;
-  Data data;
+  ResultData data;
 
   Result({this.totalItemsCount, this.statusCode, this.message, this.data});
 
@@ -34,7 +34,7 @@ class Result {
     totalItemsCount = json['totalItemsCount'];
     statusCode = json['statusCode'];
     message = json['message'];
-    data = json['data'] != null ? new Data.fromJson(json['data']) : null;
+    data = json['data'] != null ? new ResultData.fromJson(json['data']) : null;
   }
 
   Map<String, dynamic> toJson() {
@@ -49,16 +49,16 @@ class Result {
   }
 }
 
-class Data {
+class ResultData {
   String token;
   String userId;
   String email;
   String mobileNumber;
   String userName;
 
-  Data({this.token, this.userId, this.email, this.mobileNumber, this.userName});
+  ResultData({this.token, this.userId, this.email, this.mobileNumber, this.userName});
 
-  Data.fromJson(Map<String, dynamic> json) {
+  ResultData.fromJson(Map<String, dynamic> json) {
     token = json['token'];
     userId = json['userId'];
     email = json['email'];

lib/models/aya_model.dart

@@ -2,7 +2,7 @@ class AyaModel {
   int totalItemsCount;
   int statusCode;
   String message;
-  List<Data> data;
+  List<AyaModelData> data;
 
   AyaModel({this.totalItemsCount, this.statusCode, this.message, this.data});
 
@@ -11,9 +11,9 @@ class AyaModel {
     statusCode = json['statusCode'];
     message = json['message'];
     if (json['data'] != null) {
-      data = new List<Data>();
+      data = new List<AyaModelData>();
       json['data'].forEach((v) {
-        data.add(new Data.fromJson(v));
+        data.add(new AyaModelData.fromJson(v));
       });
     }
   }
@@ -30,7 +30,7 @@ class AyaModel {
   }
 }
 
-class Data {
+class AyaModelData {
   int surahID;
   String surahNameAR;
   String surahNameEN;
@@ -48,7 +48,7 @@ class Data {
   String ayahText;
   Null eighthsID;
 
-  Data(
+  AyaModelData(
       {this.surahID,
         this.surahNameAR,
         this.surahNameEN,
@@ -66,7 +66,7 @@ class Data {
         this.ayahText,
         this.eighthsID});
 
-  Data.fromJson(Map<String, dynamic> json) {
+  AyaModelData.fromJson(Map<String, dynamic> json) {
     surahID = json['surahID'];
     surahNameAR = json['surahNameAR'];
     surahNameEN = json['surahNameEN'];

lib/models/aya_tangheem_property.dart

@@ -0,0 +1,93 @@
+class AyaTangheemProperty {
+  int totalItemsCount;
+  int statusCode;
+  String message;
+  List<AyaTangheemPropertyData> data;
+
+  AyaTangheemProperty(
+      {this.totalItemsCount, this.statusCode, this.message, this.data});
+
+  AyaTangheemProperty.fromJson(Map<String, dynamic> json) {
+    totalItemsCount = json['totalItemsCount'];
+    statusCode = json['statusCode'];
+    message = json['message'];
+    if (json['data'] != null) {
+      data = new List<AyaTangheemPropertyData>();
+      json['data'].forEach((v) {
+        data.add(new AyaTangheemPropertyData.fromJson(v));
+      });
+    }
+  }
+
+  Map<String, dynamic> toJson() {
+    final Map<String, dynamic> data = new Map<String, dynamic>();
+    data['totalItemsCount'] = this.totalItemsCount;
+    data['statusCode'] = this.statusCode;
+    data['message'] = this.message;
+    if (this.data != null) {
+      data['data'] = this.data.map((v) => v.toJson()).toList();
+    }
+    return data;
+  }
+}
+
+class AyaTangheemPropertyData {
+  String ayaTangheemPropertyId;
+  String ayaTangheemTypeId;
+  String tangheemTypePropertyId;
+  String propertyValue;
+  int surahNo;
+  int ayaNo;
+  String ayaText;
+  String propertyText;
+  String tangheemTypeName;
+  String tangheemTypeId;
+  bool isInsideTable;
+  int orderNo;
+
+  AyaTangheemPropertyData(
+      {this.ayaTangheemPropertyId,
+        this.ayaTangheemTypeId,
+        this.tangheemTypePropertyId,
+        this.propertyValue,
+        this.surahNo,
+        this.ayaNo,
+        this.ayaText,
+        this.propertyText,
+        this.tangheemTypeName,
+        this.tangheemTypeId,
+        this.isInsideTable,
+        this.orderNo});
+
+  AyaTangheemPropertyData.fromJson(Map<String, dynamic> json) {
+    ayaTangheemPropertyId = json['ayaTangheemPropertyId'];
+    ayaTangheemTypeId = json['ayaTangheemTypeId'];
+    tangheemTypePropertyId = json['tangheemTypePropertyId'];
+    propertyValue = json['propertyValue'];
+    surahNo = json['surahNo'];
+    ayaNo = json['ayaNo'];
+    ayaText = json['ayaText'];
+    propertyText = json['propertyText'];
+    tangheemTypeName = json['tangheemTypeName'];
+    tangheemTypeId = json['tangheemTypeId'];
+    isInsideTable = json['isInsideTable'];
+    orderNo = json['orderNo'];
+  }
+
+  Map<String, dynamic> toJson() {
+    final Map<String, dynamic> data = new Map<String, dynamic>();
+    data['ayaTangheemPropertyId'] = this.ayaTangheemPropertyId;
+    data['ayaTangheemTypeId'] = this.ayaTangheemTypeId;
+    data['tangheemTypePropertyId'] = this.tangheemTypePropertyId;
+    data['propertyValue'] = this.propertyValue;
+    data['surahNo'] = this.surahNo;
+    data['ayaNo'] = this.ayaNo;
+    data['ayaText'] = this.ayaText;
+    data['propertyText'] = this.propertyText;
+    data['tangheemTypeName'] = this.tangheemTypeName;
+    data['tangheemTypeId'] = this.tangheemTypeId;
+    data['isInsideTable'] = this.isInsideTable;
+    data['orderNo'] = this.orderNo;
+    return data;
+  }
+}

lib/models/aya_tangheem_type.dart

@@ -0,0 +1,68 @@
+class AyaTangheemType {
+  int totalItemsCount;
+  int statusCode;
+  String message;
+  List<AyaTangheemTypeData> data;
+
+  AyaTangheemType({this.totalItemsCount, this.statusCode, this.message, this.data});
+
+  AyaTangheemType.fromJson(Map<String, dynamic> json) {
+    totalItemsCount = json['totalItemsCount'];
+    statusCode = json['statusCode'];
+    message = json['message'];
+    if (json['data'] != null) {
+      data = new List<AyaTangheemTypeData>();
+      json['data'].forEach((v) {
+        data.add(new AyaTangheemTypeData.fromJson(v));
+      });
+    }
+  }
+
+  Map<String, dynamic> toJson() {
+    final Map<String, dynamic> data = new Map<String, dynamic>();
+    data['totalItemsCount'] = this.totalItemsCount;
+    data['statusCode'] = this.statusCode;
+    data['message'] = this.message;
+    if (this.data != null) {
+      data['data'] = this.data.map((v) => v.toJson()).toList();
+    }
+    return data;
+  }
+}
+
+class AyaTangheemTypeData {
+  String ayaTangheemTypeId;
+  int surahNo;
+  int ayaNo;
+  String highlightText;
+  bool isActive;
+  String tangheemTypeId;
+  String tangheemTypeName;
+  int ayatNumberInSurah;
+
+  AyaTangheemTypeData({this.ayaTangheemTypeId, this.surahNo, this.ayaNo, this.highlightText, this.isActive, this.tangheemTypeId, this.tangheemTypeName, this.ayatNumberInSurah});
+
+  AyaTangheemTypeData.fromJson(Map<String, dynamic> json) {
+    ayaTangheemTypeId = json['ayaTangheemTypeId'];
+    surahNo = json['surahNo'];
+    ayaNo = json['ayaNo'];
+    highlightText = json['highlightText'];
+    isActive = json['isActive'];
+    tangheemTypeId = json['tangheemTypeId'];
+    tangheemTypeName = json['tangheemTypeName'];
+    ayatNumberInSurah = json['ayatNumberInSurah'];
+  }
+
+  Map<String, dynamic> toJson() {
+    final Map<String, dynamic> data = new Map<String, dynamic>();
+    data['ayaTangheemTypeId'] = this.ayaTangheemTypeId;
+    data['surahNo'] = this.surahNo;
+    data['ayaNo'] = this.ayaNo;
+    data['highlightText'] = this.highlightText;
+    data['isActive'] = this.isActive;
+    data['tangheemTypeId'] = this.tangheemTypeId;
+    data['tangheemTypeName'] = this.tangheemTypeName;
+    data['ayatNumberInSurah'] = this.ayatNumberInSurah;
+    return data;
+  }
+}

lib/models/aya_tangheem_type_mapped.dart

@@ -0,0 +1,178 @@
+class AyatTangheemTypeMapped {
+  int totalItemsCount;
+  int statusCode;
+  String message;
+  List<AyatTangheemTypeMappedData> data;
+
+  AyatTangheemTypeMapped({this.totalItemsCount, this.statusCode, this.message, this.data});
+
+  AyatTangheemTypeMapped.fromJson(Map<String, dynamic> json) {
+    totalItemsCount = json['totalItemsCount'];
+    statusCode = json['statusCode'];
+    message = json['message'];
+    if (json['data'] != null) {
+      data = new List<AyatTangheemTypeMappedData>();
+      json['data'].forEach((v) {
+        data.add(new AyatTangheemTypeMappedData.fromJson(v));
+      });
+    }
+  }
+
+  Map<String, dynamic> toJson() {
+    final Map<String, dynamic> data = new Map<String, dynamic>();
+    data['totalItemsCount'] = this.totalItemsCount;
+    data['statusCode'] = this.statusCode;
+    data['message'] = this.message;
+    if (this.data != null) {
+      data['data'] = this.data.map((v) => v.toJson()).toList();
+    }
+    return data;
+  }
+}
+
+class AyatTangheemTypeMappedData {
+  String tangheemTypeId;
+  String tangheemTypeName;
+  String ayaTangheemTypeId;
+  int surahNo;
+  String surahNameEn;
+  String surahNameAr;
+  int ayahNo;
+  String ayahText;
+  int ayatNumberInSurah;
+  String highlightText;
+  String userId;
+  List<TangheemProperty> property;
+  List<VoiceNote> voiceNote;
+
+  AyatTangheemTypeMappedData(
+      {this.tangheemTypeId,
+      this.tangheemTypeName,
+      this.ayaTangheemTypeId,
+      this.surahNo,
+      this.surahNameEn,
+      this.surahNameAr,
+      this.ayahNo,
+      this.ayahText,
+      this.ayatNumberInSurah,
+      this.highlightText,
+      this.userId,
+      this.property,
+      this.voiceNote});
+
+  AyatTangheemTypeMappedData.fromJson(Map<String, dynamic> json) {
+    tangheemTypeId = json['tangheemTypeId'];
+    tangheemTypeName = json['tangheemTypeName'];
+    ayaTangheemTypeId = json['ayaTangheemTypeId'];
+    surahNo = json['surahNo'];
+    surahNameEn = json['surahNameEn'];
+    surahNameAr = json['surahNameAr'];
+    ayahNo = json['ayahNo'];
+    ayahText = json['ayahText'];
+    ayatNumberInSurah = json['ayatNumberInSurah'];
+    highlightText = json['highlightText'];
+    userId = json['userId'];
+    if (json['property'] != null) {
+      property = new List<TangheemProperty>();
+      json['property'].forEach((v) {
+        property.add(new TangheemProperty.fromJson(v));
+      });
+    }
+    if (json['voiceNote'] != null) {
+      voiceNote = new List<VoiceNote>();
+      json['voiceNote'].forEach((v) {
+        voiceNote.add(new VoiceNote.fromJson(v));
+      });
+    }
+  }
+
+  Map<String, dynamic> toJson() {
+    final Map<String, dynamic> data = new Map<String, dynamic>();
+    data['tangheemTypeId'] = this.tangheemTypeId;
+    data['tangheemTypeName'] = this.tangheemTypeName;
+    data['ayaTangheemTypeId'] = this.ayaTangheemTypeId;
+    data['surahNo'] = this.surahNo;
+    data['surahNameEn'] = this.surahNameEn;
+    data['surahNameAr'] = this.surahNameAr;
+    data['ayahNo'] = this.ayahNo;
+    data['ayahText'] = this.ayahText;
+    data['ayatNumberInSurah'] = this.ayatNumberInSurah;
+    data['highlightText'] = this.highlightText;
+    data['userId'] = this.userId;
+    if (this.property != null) {
+      data['property'] = this.property.map((v) => v.toJson()).toList();
+    }
+    if (this.voiceNote != null) {
+      data['voiceNote'] = this.voiceNote.map((v) => v.toJson()).toList();
+    }
+    return data;
+  }
+}
+
+class TangheemProperty {
+  String tangheemTypePropertyId;
+  String propertyText;
+  bool isInsideTable;
+  int orderNo;
+  String ayaTangheemPropertyId;
+  String propertyValue;
+
+  TangheemProperty({this.tangheemTypePropertyId, this.propertyText, this.isInsideTable, this.orderNo, this.ayaTangheemPropertyId, this.propertyValue});
+
+  TangheemProperty.fromJson(Map<String, dynamic> json) {
+    tangheemTypePropertyId = json['tangheemTypePropertyId'];
+    propertyText = json['propertyText'];
+    isInsideTable = json['isInsideTable'];
+    orderNo = json['orderNo'];
+    ayaTangheemPropertyId = json['ayaTangheemPropertyId'];
+    propertyValue = json['propertyValue'];
+  }
+
+  Map<String, dynamic> toJson() {
+    final Map<String, dynamic> data = new Map<String, dynamic>();
+    data['tangheemTypePropertyId'] = this.tangheemTypePropertyId;
+    data['propertyText'] = this.propertyText;
+    data['isInsideTable'] = this.isInsideTable;
+    data['orderNo'] = this.orderNo;
+    data['ayaTangheemPropertyId'] = this.ayaTangheemPropertyId;
+    data['propertyValue'] = this.propertyValue;
+    return data;
+  }
+}
+
+class VoiceNote {
+  String voiceNoteId;
+  String voiceNotePath;
+  String exposeFilePath;
+  String userId;
+  String userName;
+  String fileName;
+  String fileType;
+  String ayaTangheemTypeId;
+
+  VoiceNote({this.voiceNoteId, this.voiceNotePath, this.exposeFilePath, this.userId, this.userName, this.fileName, this.fileType, this.ayaTangheemTypeId});
+
+  VoiceNote.fromJson(Map<String, dynamic> json) {
+    voiceNoteId = json['voiceNoteId'];
+    voiceNotePath = json['voiceNotePath'];
+    exposeFilePath = json['exposeFilePath'];
+    userId = json['userId'];
+    userName = json['userName'];
+    fileName = json['fileName'];
+    fileType = json['fileType'];
+    ayaTangheemTypeId = json['ayaTangheemTypeId'];
+  }
+
+  Map<String, dynamic> toJson() {
+    final Map<String, dynamic> data = new Map<String, dynamic>();
+    data['voiceNoteId'] = this.voiceNoteId;
+    data['voiceNotePath'] = this.voiceNotePath;
+    data['exposeFilePath'] = this.exposeFilePath;
+    data['userId'] = this.userId;
+    data['userName'] = this.userName;
+    data['fileName'] = this.fileName;
+    data['fileType'] = this.fileType;
+    data['ayaTangheemTypeId'] = this.ayaTangheemTypeId;
+    return data;
+  }
+}

lib/models/country_model.dart

@@ -2,7 +2,7 @@ class CountryModel {
   int totalItemsCount;
   int statusCode;
   String message;
-  List<Data> data;
+  List<CountryModelData> data;
 
   CountryModel(
       {this.totalItemsCount, this.statusCode, this.message, this.data});
@@ -12,9 +12,9 @@ class CountryModel {
     statusCode = json['statusCode'];
     message = json['message'];
     if (json['data'] != null) {
-      data = new List<Data>();
+      data = new List<CountryModelData>();
       json['data'].forEach((v) {
-        data.add(new Data.fromJson(v));
+        data.add(new CountryModelData.fromJson(v));
       });
     }
   }
@@ -31,21 +31,21 @@ class CountryModel {
   }
 }
 
-class Data {
+class CountryModelData {
   int countryId;
   String countryCode;
   String countryNameEn;
   String countryNameAr;
   String countryFlag;
 
-  Data(
+  CountryModelData(
       {this.countryId,
         this.countryCode,
         this.countryNameEn,
         this.countryNameAr,
         this.countryFlag});
 
-  Data.fromJson(Map<String, dynamic> json) {
+  CountryModelData.fromJson(Map<String, dynamic> json) {
     countryId = json['countryId'];
     countryCode = json['countryCode'];
     countryNameEn = json['countryNameEn'];

lib/models/quick_links_model.dart

@@ -0,0 +1,76 @@
+class QuickLinksModel {
+  int totalItemsCount;
+  int statusCode;
+  String message;
+  List<QuickLinksData> data;
+
+  QuickLinksModel({this.totalItemsCount, this.statusCode, this.message, this.data});
+
+  QuickLinksModel.fromJson(Map<String, dynamic> json) {
+    totalItemsCount = json['totalItemsCount'];
+    statusCode = json['statusCode'];
+    message = json['message'];
+    if (json['data'] != null) {
+      data = new List<QuickLinksData>();
+      json['data'].forEach((v) {
+        data.add(new QuickLinksData.fromJson(v));
+      });
+    }
+  }
+
+  Map<String, dynamic> toJson() {
+    final Map<String, dynamic> data = new Map<String, dynamic>();
+    data['totalItemsCount'] = this.totalItemsCount;
+    data['statusCode'] = this.statusCode;
+    data['message'] = this.message;
+    if (this.data != null) {
+      data['data'] = this.data.map((v) => v.toJson()).toList();
+    }
+    return data;
+  }
+}
+
+class QuickLinksData {
+  int quickLinksId;
+  String displayText;
+  String description;
+  String imageUrl;
+  String position;
+  int orderNo;
+  String fileName;
+  String exposeFilePath;
+
+  QuickLinksData(
+      {this.quickLinksId,
+        this.displayText,
+        this.description,
+        this.imageUrl,
+        this.position,
+        this.orderNo,
+        this.fileName,
+        this.exposeFilePath});
+
+  QuickLinksData.fromJson(Map<String, dynamic> json) {
+    quickLinksId = json['quickLinksId'];
+    displayText = json['displayText'];
+    description = json['description'];
+    imageUrl = json['imageUrl'];
+    position = json['position'];
+    orderNo = json['orderNo'];
+    fileName = json['fileName'];
+    exposeFilePath = json['exposeFilePath'];
+  }
+
+  Map<String, dynamic> toJson() {
+    final Map<String, dynamic> data = new Map<String, dynamic>();
+    data['quickLinksId'] = this.quickLinksId;
+    data['displayText'] = this.displayText;
+    data['description'] = this.description;
+    data['imageUrl'] = this.imageUrl;
+    data['position'] = this.position;
+    data['orderNo'] = this.orderNo;
+    data['fileName'] = this.fileName;
+    data['exposeFilePath'] = this.exposeFilePath;
+    return data;
+  }
+}

lib/models/surah_model.dart

@@ -2,7 +2,7 @@ class SurahModel {
   int totalItemsCount;
   int statusCode;
   String message;
-  List<Data> data;
+  List<SurahModelData> data;
 
   SurahModel({this.totalItemsCount, this.statusCode, this.message, this.data});
 
@@ -11,9 +11,9 @@ class SurahModel {
     statusCode = json['statusCode'];
     message = json['message'];
     if (json['data'] != null) {
-      data = new List<Data>();
+      data = new List<SurahModelData>();
       json['data'].forEach((v) {
-        data.add(new Data.fromJson(v));
+        data.add(new SurahModelData.fromJson(v));
       });
     }
   }
@@ -30,7 +30,7 @@ class SurahModel {
   }
 }
 
-class Data {
+class SurahModelData {
   int id;
   int surahID;
   String nameAR;
@@ -40,7 +40,7 @@ class Data {
   int revelationID;
   String revelationType;
 
-  Data(
+  SurahModelData(
       {this.id,
         this.surahID,
         this.nameAR,
@@ -50,7 +50,7 @@ class Data {
         this.revelationID,
         this.revelationType});
 
-  Data.fromJson(Map<String, dynamic> json) {
+  SurahModelData.fromJson(Map<String, dynamic> json) {
     id = json['id'];
     surahID = json['surahID'];
     nameAR = json['nameAR'];

lib/models/tangheem_type_model.dart

@@ -2,7 +2,7 @@ class TangheemType {
   int totalItemsCount;
   int statusCode;
   String message;
-  List<Data> data;
+  List<TangheemTypeData> data;
 
   TangheemType(
       {this.totalItemsCount, this.statusCode, this.message, this.data});
@@ -12,9 +12,9 @@ class TangheemType {
     statusCode = json['statusCode'];
     message = json['message'];
     if (json['data'] != null) {
-      data = new List<Data>();
+      data = new List<TangheemTypeData>();
       json['data'].forEach((v) {
-        data.add(new Data.fromJson(v));
+        data.add(new TangheemTypeData.fromJson(v));
       });
     }
   }
@@ -31,14 +31,14 @@ class TangheemType {
   }
 }
 
-class Data {
+class TangheemTypeData {
   String tangheemTypeId;
   String tangheemTypeName;
   bool isActive;
 
-  Data({this.tangheemTypeId, this.tangheemTypeName, this.isActive});
+  TangheemTypeData({this.tangheemTypeId, this.tangheemTypeName, this.isActive});
 
-  Data.fromJson(Map<String, dynamic> json) {
+  TangheemTypeData.fromJson(Map<String, dynamic> json) {
     tangheemTypeId = json['tangheemTypeId'];
     tangheemTypeName = json['tangheemTypeName'];
     isActive = json['isActive'];

lib/ui/bottom_sheets/country_selection_bottom_sheet.dart

@@ -4,8 +4,8 @@ import 'package:tangheem/models/country_model.dart';
 import 'package:tangheem/widgets/common_textfield_widget.dart';
 
 class CountrySelectionBottomSheet extends StatefulWidget {
-  final List<Data> countryList;
-  final Function(Data) onSelectCountry;
+  final List<CountryModelData> countryList;
+  final Function(CountryModelData) onSelectCountry;
   CountrySelectionBottomSheet({Key key, this.countryList, this.onSelectCountry}) : super(key: key);
 
   @override
@@ -16,7 +16,7 @@ class CountrySelectionBottomSheet extends StatefulWidget {
 
 class _CountrySelectionBottomSheetState extends State<CountrySelectionBottomSheet> {
   TextEditingController _searchCountryController = TextEditingController();
-  List<Data> _filteredCountryList = [];
+  List<CountryModelData> _filteredCountryList = [];
 
   @override
   void initState() {

lib/ui/common_appbar.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:tangheem/classes/colors.dart';
 import 'package:tangheem/ui/screens/login_screen.dart';
+import 'package:tangheem/ui/screens/surah_screen.dart';
 
 class CommonAppbar extends StatefulWidget {
   final bool showDrawer;
@@ -212,7 +213,9 @@ class _CommonAppbarState extends State<CommonAppbar> {
                     ),
                   ),
                   SizedBox(height: 2),
-                  myListItem("assets/icons/read_quran.svg", "اقرأ القرآن الكريم", false),
+                  myListItem("assets/icons/read_quran.svg", "اقرأ القرآن الكريم", false, onTap: () async {
+                    await Navigator.pushNamed(context, SurahScreen.routeName, arguments: "");
+                  }),
                   SizedBox(height: 2),
                   myListItem("assets/icons/contact.svg", "الاتصال بنا", false),
                 ],
@@ -267,10 +270,13 @@ class _CommonAppbarState extends State<CommonAppbar> {
     );
   }
 
-  Widget myListItem(String icon, String title, bool isSelected) {
+  Widget myListItem(String icon, String title, bool isSelected, {VoidCallback onTap}) {
     return InkWell(
       onTap: () {
         Navigator.pop(context);
+        if (onTap != null) {
+          Future.delayed(Duration(milliseconds: 200), () => onTap());
+        }
       },
       child: Container(
         height: 40,

lib/ui/screens/home_screen.dart

@@ -3,7 +3,11 @@ import 'package:flutter/material.dart';
 import 'package:flutter/painting.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_svg/flutter_svg.dart';
+import 'package:tangheem/api/tangheem_user_api_client.dart';
 import 'package:tangheem/classes/colors.dart';
+import 'package:tangheem/classes/utils.dart';
+import 'package:tangheem/models/surah_model.dart';
+import 'package:tangheem/models/tangheem_type_model.dart';
 import 'package:tangheem/ui/screens/surah_screen.dart';
 import 'package:tangheem/ui/screens/tangheem_screen.dart';
 import 'package:tangheem/widgets/common_dropdown_button.dart';
@@ -23,10 +27,35 @@ class _HomeScreenState extends State<HomeScreen> {
   TextEditingController _searchController = TextEditingController();
   FocusNode _searchFocusNode = FocusNode();
 
+  List<String> _surahList = [];
+  List<String> _tangheemList = [];
+
+  int _selectedSurah = 0;
+  int _selectedTangheemType = 0;
+
+  SurahModel _surahModel;
+  TangheemType _tangheemType;
+
   @override
   void initState() {
     super.initState();
     SystemChannels.textInput.invokeMethod('TextInput.hide');
+    getSurahAndTangheemTypes();
+  }
+
+  void getSurahAndTangheemTypes() async {
+    Utils.showLoading(context);
+    try {
+      _surahModel = await TangheemUserApiClient().getSurahs();
+      _tangheemType = await TangheemUserApiClient().getTangheemType();
+      _surahList = _surahModel.data.map((element) => element.nameAR).toList();
+      _tangheemList = _tangheemType?.data?.where((element) => element.isActive)?.toList()?.map((element) => element.tangheemTypeName)?.toList() ?? [];
+      setState(() {});
+    } catch (ex, tr) {
+      Utils.handleException(ex, null);
+    } finally {
+      Utils.hideLoading(context);
+    }
   }
 
   @override
@@ -60,17 +89,29 @@ class _HomeScreenState extends State<HomeScreen> {
               style: TextStyle(fontSize: 14, color: ColorConsts.textGrey, height: 1),
             ),
             SizedBox(height: 32),
-            // Row(
-            //   children: [
-            //     Expanded(
-            //       child: CommonDropDownButton("الأسلوب اللغوي", onPressed: () {}),
-            //     ),
-            //     SizedBox(width: 8),
-            //     Expanded(
-            //       child: CommonDropDownButton("السورة", onPressed: () {}),
-            //     )
-            //   ],
-            // ),
+            Row(
+              children: [
+                Expanded(
+                  child: CommonDropDownButton(_selectedTangheemType, list: _tangheemList, onSelect: (index) {
+                    if (_selectedTangheemType != index) {
+                      setState(() {
+                        _selectedTangheemType = index;
+                      });
+                    }
+                  }),
+                ),
+                SizedBox(width: 8),
+                Expanded(
+                  child: CommonDropDownButton(_selectedSurah, list: _surahList, onSelect: (index) {
+                    if (_selectedSurah != index) {
+                      setState(() {
+                        _selectedSurah = index;
+                      });
+                    }
+                  }),
+                )
+              ],
+            ),
             SizedBox(height: 16),
             InkWell(
               splashColor: Colors.transparent,
@@ -78,16 +119,17 @@ class _HomeScreenState extends State<HomeScreen> {
               onTap: () async {
                 _searchFocusNode.unfocus();
                 _searchFocusNode.canRequestFocus = false;
-                await Navigator.pushNamed(context, TangheemScreen.routeName);
+                var data = {"tangheemTypeName": _tangheemList[_selectedTangheemType], "surahData": _surahModel.data[_selectedSurah]};
+                await Navigator.pushNamed(context, TangheemScreen.routeName, arguments: data);
                 _searchFocusNode.canRequestFocus = true;
               },
               child: Container(
-                height: 40,
+                height: 36,
                 decoration: BoxDecoration(
                   color: ColorConsts.secondaryPink,
                   borderRadius: BorderRadius.circular(6),
                 ),
-                padding: EdgeInsets.fromLTRB(8, 8, 8, 8),
+                padding: EdgeInsets.fromLTRB(8, 2, 8, 2),
                 child: Row(
                   mainAxisAlignment: MainAxisAlignment.spaceBetween,
                   crossAxisAlignment: CrossAxisAlignment.center,
@@ -96,10 +138,9 @@ class _HomeScreenState extends State<HomeScreen> {
                     Text(
                       "ابدأ البحث",
                       maxLines: 1,
-                      // overflow: TextOverflow.ellipsis,
                       style: TextStyle(fontSize: 12, color: Colors.white),
                     ),
-                    SizedBox(width: 8),
+                    SizedBox(width: 12),
                     SvgPicture.asset("assets/icons/go_forward.svg", width: 20, height: 20, color: Colors.white),
                   ],
                 ),
@@ -123,10 +164,7 @@ class _HomeScreenState extends State<HomeScreen> {
                   prefixIconConstraints: BoxConstraints(maxHeight: 16),
                   prefixIcon: Padding(
                     padding: EdgeInsets.only(right: 6),
-                    child: SvgPicture.asset(
-                      "assets/icons/search.svg",
-                      //color: Const.secondaryOrange,
-                    ),
+                    child: SvgPicture.asset("assets/icons/search.svg"),
                   ),
                   suffixIcon: InkWell(
                     onTap: () async {

lib/ui/screens/registration_screen.dart

@@ -30,7 +30,7 @@ class _RegistrationScreenState extends State<RegistrationScreen> {
 
   bool _isAccept = false;
 
-  Data _selectedCountry;
+  CountryModelData _selectedCountry;
   CountryModel _countryModel;
 
   @override

lib/ui/screens/surah_screen.dart

@@ -11,12 +11,14 @@ import 'package:tangheem/widgets/auto_scroll_view/aya_scroll_view.dart';
 import 'package:tangheem/widgets/auto_scroll_view/scroll_id.dart';
 import 'package:tangheem/widgets/aya_player_widget.dart';
 import 'package:tangheem/widgets/common_dropdown_button.dart';
+import 'package:tangheem/widgets/text_highlight_widget.dart';
 
 class SurahScreen extends StatefulWidget {
   static const String routeName = "/surah";
+  final SurahModel surahModel;
   final String query;
 
-  SurahScreen({Key key, @required this.query}) : super(key: key);
+  SurahScreen({Key key, this.surahModel, @required this.query}) : super(key: key);
 
   @override
   _SurahScreenState createState() {
@@ -43,14 +45,18 @@ class _SurahScreenState extends State<SurahScreen> {
   void initState() {
     super.initState();
     scrollToId = ScrollToId(scrollController: scrollController);
-    getSurahAndAya();
+    getSurah();
   }
 
-  void getSurahAndAya() async {
+  void getSurah() async {
     Utils.showLoading(context);
     try {
-      _surahModel = await TangheemUserApiClient().getSurahs();
-      _surahList = _surahModel.data.map((element) => element.nameEN).toList();
+      if (widget.surahModel == null) {
+        _surahModel = await TangheemUserApiClient().getSurahs();
+      } else {
+        _surahModel = widget.surahModel;
+      }
+      _surahList = _surahModel.data.map((element) => element.nameAR).toList();
       filterData();
     } catch (ex, tr) {
       Utils.handleException(ex, null);
@@ -102,7 +108,6 @@ class _SurahScreenState extends State<SurahScreen> {
   @override
   Widget build(BuildContext context) {
     String _surahAya = _ayaModel?.data?.map((e) => e.ayahText)?.toList()?.fold("", (value, element) => value + element) ?? "";
-
     return Container(
       padding: EdgeInsets.fromLTRB(16, 24, 16, 0),
       width: double.infinity,
@@ -267,7 +272,7 @@ class _SurahScreenState extends State<SurahScreen> {
               ),
             ),
           ),
-          AyaPlayerWidget(surahName: _surahList.isNotEmpty ? _surahList[_selectedSurah] : null, globalKey: _globalKey)
+          AyaPlayerWidget(surahName: _surahList.isNotEmpty ? _surahList[_selectedSurah] : "", globalKey: _globalKey)
         ],
       ),
     );

lib/ui/screens/tangheem_screen.dart

@@ -1,13 +1,22 @@
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
+import 'package:tangheem/api/tangheem_user_api_client.dart';
 import 'package:tangheem/classes/colors.dart';
+import 'package:tangheem/classes/utils.dart';
+import 'package:tangheem/models/aya_model.dart';
+import 'package:tangheem/models/aya_tangheem_property.dart';
+import 'package:tangheem/models/aya_tangheem_type.dart';
+import 'package:tangheem/models/aya_tangheem_type_mapped.dart';
+import 'package:tangheem/models/surah_model.dart';
 import 'package:tangheem/widgets/aya_player_widget.dart';
+import 'package:tangheem/widgets/text_highlight_widget.dart';
 
 class TangheemScreen extends StatefulWidget {
   static const String routeName = "/tangheem";
-
-  TangheemScreen({Key key}) : super(key: key);
+  final tangheemTypeName;
+  final SurahModelData surah;
+  TangheemScreen({Key key, this.surah, this.tangheemTypeName}) : super(key: key);
 
   @override
   _TangheemScreenState createState() {
@@ -17,25 +26,45 @@ class TangheemScreen extends StatefulWidget {
 
 class _TangheemScreenState extends State<TangheemScreen> {
   GlobalKey _globalKey = GlobalKey();
-  List<TempModel> temp1 = List();
-  List<TempModel> temp2 = List();
+  List<TangheemProperty> _tangheemInsideTableTrueList = [];
+  List<TangheemProperty> _tangheemInsideTableValueList = [];
+  List<TangheemProperty> _tangheemInsideTableEmptyList = [];
+  List<String> _tangheemWords = [];
+
+  int _currentTangheemPage = -1;
+  AyatTangheemTypeMapped _ayatTangheemTypeMapped;
+  AyatTangheemTypeMappedData _ayatTangheemTypeMappedData;
 
   @override
   void initState() {
     super.initState();
-    temp1 = [
-      TempModel("نغمة الانتظار الصاعدة على آخر الجزء الأول من الجملة", "( الكتاب، اللاعنون )"),
-      TempModel("نغمة الانتظار الصاعدة على آخر الجزء الأول من الجملة", "( إلا الذين تابوا وأصلحوا وبينوا ..4)"),
-    ];
+    _tangheemInsideTableValueList = [];
+    _tangheemInsideTableEmptyList = [];
+    getTangheemData();
+  }
 
-    temp2 = [
-      TempModel("تلوينات أدائية مناسبة", ""),
-      TempModel("شرح الاسلوب", ""),
-    ];
-    searchQuery();
+  void getTangheemData() async {
+    Utils.showLoading(context);
+    try {
+      _ayatTangheemTypeMapped = await TangheemUserApiClient().getAyaTangheemTypeMapped(0, widget.tangheemTypeName);
+      if (_ayatTangheemTypeMapped.data.length > 0) _currentTangheemPage = 0;
+    } catch (ex, tr) {
+      Utils.handleException(ex, null);
+    } finally {
+      Utils.hideLoading(context);
+    }
+    filterData();
   }
 
-  void searchQuery() {}
+  void filterData() {
+    _ayatTangheemTypeMappedData = _ayatTangheemTypeMapped.data[_currentTangheemPage];
+    _tangheemWords.add(_ayatTangheemTypeMappedData.highlightText ?? "");
+    _tangheemInsideTableTrueList = _ayatTangheemTypeMappedData?.property?.where((element) => element.isInsideTable)?.toList() ?? [];
+    _tangheemInsideTableValueList = _ayatTangheemTypeMappedData?.property?.where((element) => (!element.isInsideTable) && (element.propertyValue ?? "").isNotEmpty)?.toList() ?? [];
+    _tangheemInsideTableEmptyList = _ayatTangheemTypeMappedData?.property?.where((element) => (!element.isInsideTable) && (element.propertyValue ?? "").isEmpty)?.toList() ?? [];
+
+    setState(() {});
+  }
 
   @override
   void dispose() {
@@ -47,161 +76,201 @@ class _TangheemScreenState extends State<TangheemScreen> {
     return Container(
       padding: EdgeInsets.fromLTRB(16, 24, 16, 0),
       width: double.infinity,
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          Text(
-            "تنغيم أسلوب الإتمام",
-            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20, color: ColorConsts.primaryBlue, height: 1.5),
-          ),
-          SizedBox(height: 8),
-          Text(
-            "هنا نضع\" تعريف بالاستفهام وتداخل الأساليب\"",
-            style: TextStyle(fontSize: 14, color: ColorConsts.textGrey, height: 1),
-          ),
-          SizedBox(height: 8),
-          Expanded(
-            child: 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: Column(
-                children: [
-                  Expanded(
-                    child: ListView(
-                      physics: BouncingScrollPhysics(),
-                      padding: EdgeInsets.all(4),
+      child: _ayatTangheemTypeMappedData == null
+          ? SizedBox()
+          : Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  widget.tangheemTypeName ?? "",
+                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20, color: ColorConsts.primaryBlue, height: 1.5),
+                ),
+                SizedBox(height: 8),
+                Text(
+                  "هنا نضع\" تعريف بالاستفهام وتداخل الأساليب\"",
+                  style: TextStyle(fontSize: 14, color: ColorConsts.textGrey, height: 1),
+                ),
+                SizedBox(height: 8),
+                Expanded(
+                  child: 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: Column(
                       children: [
-                        Text(
-                          " إِنَّ الَّذِينَ يَكْتُمُونَ مَا أَنْزَلْنَا مِنَ الْبَيِّنَاتِ وَالْهُدَىٰ مِنْ بَعْدِ مَا بَيَّنَّاهُ لِلنَّاسِ فِي الْكِتَابِ ۙ أُولَٰئِكَ يَلْعَنُهُمُ اللَّهُ وَيَلْعَنُهُمُ اللَّاعِنُونَ ﴿159﴾ إِلَّا الَّذِينَ تَابُوا وَأَصْلَحُوا وَبَيَّنُوا فَأُولَٰئِكَ أَتُوبُ عَلَيْهِمْ ۚ وَأَنَا التَّوَّابُ الرَّحِيمُ ﴿160﴾ْ",
-                          textAlign: TextAlign.center,
-                          style: TextStyle(
-                            fontFamily: "UthmanicHafs",
-                            color: ColorConsts.primaryBlue,
-                            fontSize: 19,
-                            fontWeight: FontWeight.bold,
-                          ),
-                        ),
-                        SizedBox(height: 16),
-                        Row(
-                          children: [
-                            Expanded(
-                              child: InkWell(
-                                onTap: () {},
-                                child: Container(
-                                  height: 40,
-                                  padding: EdgeInsets.only(left: 4, right: 8),
-                                  alignment: Alignment.centerRight,
-                                  child: Text(
-                                    "نوع جملة الاتمام",
-                                    style: TextStyle(fontWeight: FontWeight.bold, color: ColorConsts.secondaryOrange),
-                                  ),
-                                  color: ColorConsts.secondaryWhite,
+                        Expanded(
+                          child: SingleChildScrollView(
+                            physics: BouncingScrollPhysics(),
+                            child: RepaintBoundary(
+                              key: _globalKey,
+                              child: Material(
+                                color: Colors.white,
+                                child: ListView(
+                                  physics: NeverScrollableScrollPhysics(),
+                                  shrinkWrap: true,
+                                  padding: EdgeInsets.all(4),
+                                  children: [
+                                    TextHighLightWidget(
+                                      text: _ayatTangheemTypeMappedData.ayahText ?? "",
+                                      valueColor: ColorConsts.primaryBlue,
+                                      highlights: _tangheemWords,
+                                      style: TextStyle(
+                                        fontFamily: "UthmanicHafs",
+                                        fontSize: 18,
+                                        fontWeight: FontWeight.bold,
+                                      ),
+                                    ),
+                                    SizedBox(height: 16),
+                                    ListView.separated(
+                                        itemCount: _tangheemInsideTableValueList.length,
+                                        physics: NeverScrollableScrollPhysics(),
+                                        shrinkWrap: true,
+                                        separatorBuilder: (context, index) {
+                                          return Divider(
+                                            color: Colors.white,
+                                            height: 1,
+                                            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(
+                                                    _tangheemInsideTableValueList[index].propertyText,
+                                                    style: TextStyle(fontWeight: FontWeight.bold, color: ColorConsts.secondaryOrange),
+                                                  ),
+                                                  color: ColorConsts.secondaryWhite,
+                                                ),
+                                              ),
+                                              SizedBox(width: 8),
+                                              Expanded(
+                                                child: Container(
+                                                  height: 40,
+                                                  padding: EdgeInsets.only(left: 4, right: 8),
+                                                  alignment: Alignment.centerRight,
+                                                  child: Text(
+                                                    _tangheemInsideTableValueList[index].propertyValue,
+                                                    style: TextStyle(color: ColorConsts.primaryBlack),
+                                                  ),
+                                                  color: ColorConsts.secondaryWhite,
+                                                ),
+                                              )
+                                            ],
+                                          );
+                                        }),
+                                    if (_tangheemInsideTableTrueList.isNotEmpty)
+                                      Container(
+                                        color: ColorConsts.primaryBlue,
+                                        margin: EdgeInsets.only(top: 8, bottom: 8),
+                                        padding: EdgeInsets.all(8),
+                                        child: Column(
+                                          children: [
+                                            Text(
+                                              widget.tangheemTypeName ?? "",
+                                              style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
+                                            ),
+                                            SizedBox(height: 8),
+                                            tangheemPropertyView(_tangheemInsideTableTrueList)
+                                          ],
+                                        ),
+                                      ),
+                                    tangheemPropertyView(_tangheemInsideTableEmptyList)
+                                  ],
                                 ),
                               ),
                             ),
-                            SizedBox(width: 8),
-                            Expanded(
-                              child: InkWell(
-                                onTap: () {},
-                                child: Container(
-                                  height: 40,
-                                  padding: EdgeInsets.only(left: 4, right: 8),
-                                  alignment: Alignment.centerRight,
-                                  child: Text(
-                                    "استثنائية",
-                                    style: TextStyle(color: ColorConsts.primaryBlack),
-                                  ),
-                                  color: ColorConsts.secondaryWhite,
-                                ),
-                              ),
-                            )
-                          ],
+                          ),
                         ),
-                        Container(
-                          color: ColorConsts.primaryBlue,
-                          margin: EdgeInsets.only(top: 8, bottom: 8),
-                          padding: EdgeInsets.all(8),
-                          child: Column(
+                        SizedBox(height: 4),
+                        Padding(
+                          padding: EdgeInsets.only(left: 4, right: 4),
+                          child: Row(
+                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                             children: [
-                              Text(
-                                "خط التنغيم لأسلوب الإتمام",
-                                style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
-                              ),
-                              SizedBox(height: 8),
-                              myListView(temp1)
+                              nextOptionButton(
+                                  "assets/icons/prev_single.svg",
+                                  "الآيات السابقة",
+                                  (_currentTangheemPage == 0 || (_ayatTangheemTypeMapped.data.length < 1))
+                                      ? null
+                                      : () {
+                                          _currentTangheemPage = _currentTangheemPage - 1;
+                                          filterData();
+                                        }),
+                              previousOptionButton(
+                                  "assets/icons/next_single.svg",
+                                  "الآيات التالية",
+                                  (_currentTangheemPage == (_ayatTangheemTypeMapped.data.length - 1) || (_ayatTangheemTypeMapped.data.length < 1))
+                                      ? null
+                                      : () {
+                                          _currentTangheemPage = _currentTangheemPage + 1;
+                                          filterData();
+                                        }),
                             ],
                           ),
                         ),
-                        myListView(temp2)
-                      ],
-                    ),
-                  ),
-                  SizedBox(height: 4),
-                  Padding(
-                    padding: EdgeInsets.only(left: 4, right: 4),
-                    child: Row(
-                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                      children: [
-                        nextOptionButton("assets/icons/prev_single.svg", "الآيات السابقة", () {}),
-                        previousOptionButton("assets/icons/next_single.svg", "الآيات التالية", () {}),
                       ],
                     ),
                   ),
-                ],
-              ),
+                ),
+                AyaPlayerWidget(surahName: _ayatTangheemTypeMappedData.surahNameAr ?? "", globalKey: _globalKey, voiceNoteList: _ayatTangheemTypeMappedData.voiceNote ?? [])
+              ],
             ),
-          ),
-          AyaPlayerWidget(globalKey: null)
-        ],
-      ),
     );
   }
 
   Widget nextOptionButton(String icon, String text, VoidCallback onPressed) {
     return InkWell(
       onTap: onPressed,
-      child: Row(
-        crossAxisAlignment: CrossAxisAlignment.center,
-        mainAxisSize: MainAxisSize.min,
-        children: [
-          SvgPicture.asset(icon, height: 12, width: 12),
-          SizedBox(width: 4),
-          Text(
-            text,
-            style: TextStyle(color: ColorConsts.textGrey),
-          ),
-        ],
-      ),
+      child: onPressed == null
+          ? SizedBox()
+          : Row(
+              crossAxisAlignment: CrossAxisAlignment.center,
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                SvgPicture.asset(icon, height: 12, width: 12),
+                SizedBox(width: 4),
+                Text(
+                  text,
+                  style: TextStyle(color: ColorConsts.textGrey),
+                ),
+              ],
+            ),
     );
   }
 
   Widget previousOptionButton(String icon, String text, VoidCallback onPressed) {
     return InkWell(
       onTap: onPressed,
-      child: Row(
-        crossAxisAlignment: CrossAxisAlignment.center,
-        mainAxisSize: MainAxisSize.min,
-        children: [
-          Text(
-            text,
-            style: TextStyle(color: ColorConsts.textGrey),
-          ),
-          SizedBox(width: 4),
-          SvgPicture.asset(icon, height: 12, width: 12),
-        ],
-      ),
+      child: onPressed == null
+          ? SizedBox()
+          : Row(
+              crossAxisAlignment: CrossAxisAlignment.center,
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Text(
+                  text,
+                  style: TextStyle(color: ColorConsts.textGrey),
+                ),
+                SizedBox(width: 4),
+                SvgPicture.asset(icon, height: 12, width: 12),
+              ],
+            ),
     );
   }
 
-  Widget myListView(List<TempModel> temp) {
+  Widget tangheemPropertyView(List<TangheemProperty> tangheemPropertyList) {
     return Container(
       color: Colors.white,
       child: ListView.separated(
-        itemCount: temp.length,
+        itemCount: tangheemPropertyList.length,
         physics: NeverScrollableScrollPhysics(),
         padding: EdgeInsets.zero,
         shrinkWrap: true,
@@ -222,12 +291,12 @@ class _TangheemScreenState extends State<TangheemScreen> {
               mainAxisAlignment: MainAxisAlignment.center,
               children: [
                 Text(
-                  temp[index].title,
+                  tangheemPropertyList[index].propertyText ?? "",
                   style: TextStyle(fontWeight: FontWeight.bold, fontSize: 12, color: ColorConsts.secondaryOrange),
                 ),
                 SizedBox(height: 4),
                 Text(
-                  temp[index].description,
+                  tangheemPropertyList[index].propertyValue ?? "",
                   style: TextStyle(fontSize: 12, color: ColorConsts.secondaryPink),
                 ),
               ],
@@ -238,10 +307,3 @@ class _TangheemScreenState extends State<TangheemScreen> {
     );
   }
 }
-
-class TempModel {
-  String title;
-  String description;
-
-  TempModel(this.title, this.description);
-}

lib/widgets/aya_player_widget.dart

@@ -13,12 +13,14 @@ import 'package:permission_handler/permission_handler.dart';
 import 'package:share/share.dart';
 import 'package:tangheem/classes/colors.dart';
 import 'package:tangheem/classes/utils.dart';
+import 'package:tangheem/models/aya_tangheem_type_mapped.dart';
 import 'package:volume_controller/volume_controller.dart';
 
 class AyaPlayerWidget extends StatefulWidget {
   final String surahName;
   final GlobalKey globalKey;
-  AyaPlayerWidget({Key key, this.surahName, @required this.globalKey}) : super(key: key);
+  final List<VoiceNote> voiceNoteList;
+  AyaPlayerWidget({Key key, this.surahName, this.voiceNoteList, @required this.globalKey}) : super(key: key);
 
   @override
   _AyaPlayerWidgetState createState() {
@@ -32,22 +34,39 @@ class _AyaPlayerWidgetState extends State<AyaPlayerWidget> {
   AudioPlayer _player;
   bool _isAudioHaveError = false;
 
+  int _currentVoiceNote = -1;
+
   @override
   void initState() {
     super.initState();
     _player = AudioPlayer();
+    setAudioSource();
+  }
+
+  setAudioSource() {
     try {
-      final _playlist = ConcatenatingAudioSource(children: [
-        AudioSource.uri(
-          Uri.parse("https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_1MG.mp3"),
-        ),
-      ]);
-      _player.setAudioSource(_playlist, initialIndex: 0, initialPosition: Duration.zero).then((value) => () {});
+      var voiceList = [];
+      if (widget.voiceNoteList != null && widget.voiceNoteList.length > 0) {
+        voiceList = widget.voiceNoteList.map((e) => AudioSource.uri(Uri.parse(e.exposeFilePath))).toList();
+        _currentVoiceNote = 0;
+      }
+      final _playlist = ConcatenatingAudioSource(children: voiceList);
+      _player.setAudioSource(_playlist, initialIndex: 0, initialPosition: Duration.zero).then((value) => () {}).catchError(() {
+        _isAudioHaveError = true;
+      });
     } catch (e) {
       _isAudioHaveError = true;
     }
   }
 
+  @override
+  void didUpdateWidget(covariant AyaPlayerWidget oldWidget) {
+    if (widget.voiceNoteList != oldWidget.voiceNoteList) {
+      setAudioSource();
+    }
+    super.didUpdateWidget(oldWidget);
+  }
+
   @override
   void dispose() {
     _player.dispose();
@@ -71,7 +90,6 @@ class _AyaPlayerWidgetState extends State<AyaPlayerWidget> {
                 angle: 180 * math.pi / 180,
                 child: SvgPicture.asset(
                   "assets/icons/drop_menu.svg",
-                  // color: Const.secondaryOrange,
                   width: 16,
                 ),
               ),
@@ -95,14 +113,14 @@ class _AyaPlayerWidgetState extends State<AyaPlayerWidget> {
                   crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
                     Text(
-                      widget.surahName ?? "سورة البقسورة",
+                      widget.surahName,
                       maxLines: 1,
                       overflow: TextOverflow.ellipsis,
                       style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14, color: ColorConsts.primaryBlack, height: 1),
                     ),
                     SizedBox(height: 4),
                     Text(
-                      "الشيخ عبد الشيخ عبد العزيز الزهراني",
+                      _currentVoiceNote < 1 ? "" : widget.voiceNoteList[_currentVoiceNote],
                       style: TextStyle(fontSize: 10, color: ColorConsts.textGrey1, height: 1),
                     ),
                   ],
@@ -133,26 +151,33 @@ class _AyaPlayerWidgetState extends State<AyaPlayerWidget> {
           Row(
             crossAxisAlignment: CrossAxisAlignment.center,
             children: [
-              commonIconButton("assets/icons/next_aya.svg", () {}),
+              commonIconButton("assets/icons/next_aya.svg", () {
+                _player.seekToNext();
+              }),
               SizedBox(width: 4),
               StreamBuilder<PlayerState>(
                 stream: _player.playerStateStream,
                 builder: (context, snapshot) {
                   final state = snapshot.data?.playing ?? false;
-
                   if (state) {
-                    if (_player.duration.inSeconds == _player.position.inSeconds) {
+                    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() : _player.play();
+                    state
+                        ? _player.pause()
+                        : _isAudioHaveError
+                            ? Utils.showToast("Audio file is not loaded")
+                            : _player.play();
                   });
                 },
               ),
               SizedBox(width: 4),
-              commonIconButton("assets/icons/previous_aya.svg", () {}),
+              commonIconButton("assets/icons/previous_aya.svg", () {
+                _player.seekToPrevious();
+              }),
               SizedBox(width: 16),
               Expanded(
                 child: StreamBuilder<Duration>(
@@ -240,7 +265,9 @@ class _AyaPlayerWidgetState extends State<AyaPlayerWidget> {
       Utils.hideLoading(context);
       return result["isSuccess"];
     } catch (ex) {
-      Utils.hideLoading(context);
+      Future.delayed(Duration(seconds: 1), () {
+        Utils.hideLoading(context);
+      });
       return false;
     }
   }
@@ -259,7 +286,9 @@ class _AyaPlayerWidgetState extends State<AyaPlayerWidget> {
       Utils.hideLoading(context);
       Share.shareFiles(['${file.path}']);
     } catch (ex) {
-      Utils.hideLoading(context);
+      Future.delayed(Duration(seconds: 1), () {
+        Utils.hideLoading(context);
+      });
     }
   }
 }

lib/widgets/text_highlight_widget.dart

@@ -0,0 +1,120 @@
+import 'dart:math';
+import 'package:flutter/material.dart';
+import 'package:tangheem/classes/colors.dart';
+
+class TextHighLightWidget extends StatelessWidget {
+  final String text;
+  final String valueText;
+  final Color valueColor;
+  final List<String> highlights;
+  final TextStyle style;
+  final Color highLightColor = ColorConsts.secondaryOrange;
+
+  TextHighLightWidget({
+    Key key,
+    this.text,
+    this.valueText,
+    this.valueColor,
+    this.highlights,
+    this.style = const TextStyle(),
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    if (text == '') {
+      return _richText(_normalSpan(text));
+    }
+    if (highlights.isEmpty) {
+      return _richText(_normalSpan(text));
+    }
+    for (int i = 0; i < highlights.length; i++) {
+      if (highlights[i] == null) {
+        assert(highlights[i] != null);
+        return _richText(_normalSpan(text));
+      }
+      if (highlights[i].isEmpty) {
+        assert(highlights[i].isNotEmpty);
+        return _richText(_normalSpan(text));
+      }
+    }
+
+    List<TextSpan> _spans = List();
+    int _start = 0;
+    List<String> _lowerCaseHighlights = List();
+
+    highlights.forEach((element) {
+      _lowerCaseHighlights.add(element.toLowerCase());
+    });
+
+    while (true) {
+      Map<int, String> _highlightsMap = Map();
+
+      for (int i = 0; i < highlights.length; i++) {
+        int _index = text.toLowerCase().indexOf(_lowerCaseHighlights[i], _start);
+        if (_index >= 0) {
+          _highlightsMap.putIfAbsent(_index, () => highlights[i]);
+        }
+      }
+
+      if (_highlightsMap.isNotEmpty) {
+        List<int> _indexes = List();
+        _highlightsMap.forEach((key, value) => _indexes.add(key));
+
+        int _currentIndex = _indexes.reduce(min);
+        String _currentHighlight = text.substring(_currentIndex, _currentIndex + _highlightsMap[_currentIndex].length);
+
+        if (_currentIndex == _start) {
+          _spans.add(_highlightSpan(_currentHighlight));
+          _start += _currentHighlight.length;
+        } else {
+          _spans.add(_normalSpan(text.substring(_start, _currentIndex)));
+          _spans.add(_highlightSpan(_currentHighlight));
+          _start = _currentIndex + _currentHighlight.length;
+        }
+      } else {
+        _spans.add(_normalSpan(text.substring(_start, text.length)));
+        break;
+      }
+    }
+
+    if (valueText != null) {
+      _spans.add(TextSpan(
+        text: ' ' + valueText,
+        style: TextStyle(color: valueColor ?? Color(0xff170026), fontSize: 12, fontWeight: FontWeight.w800),
+      ));
+    }
+    return _richText(TextSpan(children: _spans));
+  }
+
+  TextSpan _highlightSpan(String value) {
+    if (style.color == null) {
+      return TextSpan(
+        text: value,
+        style: style.copyWith(color: highLightColor, fontSize: 18),
+      );
+    } else {
+      return TextSpan(text: value, style: style.copyWith(color: valueColor));
+    }
+  }
+
+  TextSpan _normalSpan(String value) {
+    if (style.color == null) {
+      return TextSpan(
+        text: value,
+        style: style.copyWith(color: valueColor),
+      );
+    } else {
+      return TextSpan(text: value, style: style, children: [
+        if (valueText != null)
+          TextSpan(
+            text: ' ' + valueText,
+            style: style,
+          )
+      ]);
+    }
+  }
+
+  RichText _richText(TextSpan text) {
+    return RichText(key: key, text: text, textAlign: TextAlign.center);
+  }
+}