tangheem detail improvements

development-design-2.0
Sikander Saleem 3 years ago
parent 9647dca24e
commit d6c2245783

@ -33,7 +33,8 @@ class ColorConsts {
static const Color brownColor = Color(0xffDAE8646); static const Color brownColor = Color(0xffDAE8646);
static const Color brownLightColor = Color(0xffAE8646); static const Color brownLightColor = Color(0xffAE8646);
static const Color brownLightECColor = Color(0xffECE9DB); 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 brownB1CColor = Color(0xffB1A995);
static const Color brownB6CColor = Color(0xffB68439); static const Color brownB6CColor = Color(0xffB68439);
static const Color greyLightColor = Color(0xffB7B7B7); static const Color greyLightColor = Color(0xffB7B7B7);

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

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

@ -24,6 +24,7 @@ import 'package:tangheem/models/discussion_model.dart';
import 'package:tangheem/ui/dialogs/discussion_input_dialog.dart'; import 'package:tangheem/ui/dialogs/discussion_input_dialog.dart';
import 'package:tangheem/widgets/aya_player_widget.dart'; import 'package:tangheem/widgets/aya_player_widget.dart';
import 'package:tangheem/widgets/aya_record_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 'package:tangheem/widgets/text_highlight_widget.dart';
import 'login_screen.dart'; import 'login_screen.dart';
@ -159,7 +160,6 @@ class _TangheemDetailScreenState extends State<TangheemDetailScreen> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Container( return Container(
padding: EdgeInsets.fromLTRB(16, 0, 16, 0),
width: double.infinity, width: double.infinity,
child: _ayatTangheemTypeMappedFirstData == null child: _ayatTangheemTypeMappedFirstData == null
? SizedBox() ? SizedBox()
@ -169,20 +169,15 @@ class _TangheemDetailScreenState extends State<TangheemDetailScreen> {
Expanded( Expanded(
child: ListView( child: ListView(
physics: BouncingScrollPhysics(), physics: BouncingScrollPhysics(),
padding: EdgeInsets.only(bottom: 16, top: 16), padding: EdgeInsets.only(bottom: 16),
children: [ children: [
Text.rich( CommonHeader(_ayatTangheemTypeMappedFirstData.tangheemTypeName ?? "", "assets/icons/new/quran_bg.jpg", Color(0xffAE8646),
TextSpan( isCustom: true, message: _ayatTangheemTypeMappedFirstData.tangheemTypeDescription ?? "", onTap: (headerEnum) {
children: [ if (headerEnum == CommonHeaderEnum.ShareAsText) {
TextSpan( _shareAyaAsLink();
text: _ayatTangheemTypeMappedFirstData.tangheemTypeName ?? "", } else if (headerEnum == CommonHeaderEnum.ShareAsImage) {
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20, color: ColorConsts.primaryBlue, height: 1.5), _shareAyaAsImage();
), } else if (headerEnum == CommonHeaderEnum.ZoomOut) {
WidgetSpan(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
zoomButtons("assets/icons/reduce_size.svg", () {
if (fontSize <= 12) { if (fontSize <= 12) {
Utils.showToast("وصل حجم الخط إلى الحد الأدنى للحجم"); Utils.showToast("وصل حجم الخط إلى الحد الأدنى للحجم");
return; return;
@ -190,9 +185,7 @@ class _TangheemDetailScreenState extends State<TangheemDetailScreen> {
fontSize -= 2; fontSize -= 2;
prefs.setInt(GlobalConsts.fontZoomSize, fontSize); prefs.setInt(GlobalConsts.fontZoomSize, fontSize);
setState(() {}); setState(() {});
}), } else if (headerEnum == CommonHeaderEnum.ZoomIn) {
SizedBox(width: 4),
zoomButtons("assets/icons/increase_size.svg", () {
if (fontSize >= 36) { if (fontSize >= 36) {
Utils.showToast("وصل حجم الخط إلى الحد الأقصى للحجم"); Utils.showToast("وصل حجم الخط إلى الحد الأقصى للحجم");
return; return;
@ -200,72 +193,18 @@ class _TangheemDetailScreenState extends State<TangheemDetailScreen> {
fontSize += 2; fontSize += 2;
prefs.setInt(GlobalConsts.fontZoomSize, fontSize); prefs.setInt(GlobalConsts.fontZoomSize, fontSize);
setState(() {}); 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();
} }
}, }),
), SingleChildScrollView(
),
// 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(), physics: NeverScrollableScrollPhysics(),
child: RepaintBoundary( child: RepaintBoundary(
key: _globalKey, key: _globalKey,
child: Material( child: Material(
color: Colors.white, color: ColorConsts.greyF4Color,
child: ListView.builder( child: ListView.builder(
physics: NeverScrollableScrollPhysics(), physics: NeverScrollableScrollPhysics(),
shrinkWrap: true, shrinkWrap: true,
padding: EdgeInsets.all(0),
itemCount: ayatTangheemTypeMappedDataList.length > 5 ? 5 : ayatTangheemTypeMappedDataList.length, itemCount: ayatTangheemTypeMappedDataList.length > 5 ? 5 : ayatTangheemTypeMappedDataList.length,
itemBuilder: (context, index) { itemBuilder: (context, index) {
final _ayatTangheemTypeMappedData = ayatTangheemTypeMappedDataList[index]; final _ayatTangheemTypeMappedData = ayatTangheemTypeMappedDataList[index];
@ -312,79 +251,64 @@ class _TangheemDetailScreenState extends State<TangheemDetailScreen> {
_tempTangheemIndexWord = getArabicIndexWord(index) + " "; _tempTangheemIndexWord = getArabicIndexWord(index) + " ";
} }
return ListView( Widget innerTableWidget = (_tangheemInsideTableList.isNotEmpty)
physics: NeverScrollableScrollPhysics(), ? Column(
shrinkWrap: true,
padding: EdgeInsets.all(4),
children: [
Row(
children: [ children: [
Text( Container(
" جملة ${_ayatTangheemTypeMappedData.tangheemTypeName} $_tempTangheemIndexWord", height: 38,
style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white, backgroundColor: ColorConsts.primaryBlue), width: double.infinity,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Color(0xff40696B),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
), ),
Expanded(
child: Container(height: 2, color: ColorConsts.primaryBlue),
), ),
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),
), ),
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,
), ),
// TextHighLightWidget( child: ListView.separated(
// text: _ayatTangheemTypeMappedData.reverseAyatNumber() ?? "",
// valueColor: ColorConsts.primaryBlue,
// highlights: _tangheemWords,
// highLightFontSize: fontSize,
// style: TextStyle(
// fontFamily: "UthmanicHafs",
// fontSize: fontSize,
// fontWeight: FontWeight.bold,
// ),
// ),
SizedBox(height: 16),
ListView.separated(
itemCount: _tangheemAboveTableList.length, itemCount: _tangheemAboveTableList.length,
physics: NeverScrollableScrollPhysics(), physics: NeverScrollableScrollPhysics(),
padding: EdgeInsets.zero,
shrinkWrap: true, shrinkWrap: true,
separatorBuilder: (context, index) { separatorBuilder: (context, index) {
return Divider( return Divider(color: ColorConsts.greyB7Color, height: 4, thickness: 0);
color: Colors.white,
height: 4,
thickness: 0,
);
}, },
itemBuilder: (context, index) { itemBuilder: (context, index) {
return Row( return Row(
children: [ children: [
Expanded( _tangheemAboveTableList[index].propertyText.toText(13, color: ColorConsts.greyB7Color),
child: Container( Container(
height: 40, width: 1,
padding: EdgeInsets.only(left: 4, right: 8), height: 18,
alignment: Alignment.centerRight, color: ColorConsts.greyB7Color,
child: Text( margin: EdgeInsets.only(left: 8, right: 8),
_tangheemAboveTableList[index].propertyText,
maxLines: 1,
style: TextStyle(fontWeight: FontWeight.bold, color: ColorConsts.secondaryOrange),
),
color: ColorConsts.secondaryWhite,
),
), ),
SizedBox(width: 4),
Expanded( Expanded(
child: Container( child: Container(
color: ColorConsts.secondaryWhite,
padding: EdgeInsets.all(4),
child: Container(
color: Colors.white,
padding: EdgeInsets.only(left: 4, right: 8), padding: EdgeInsets.only(left: 4, right: 8),
// alignment: Alignment.centerRight, // alignment: Alignment.centerRight,
child: Html( child: Html(
@ -393,106 +317,139 @@ class _TangheemDetailScreenState extends State<TangheemDetailScreen> {
'html': Style(textAlign: TextAlign.left), 'html': Style(textAlign: TextAlign.left),
}, },
), ),
// Text(
// _tangheemAboveTableList[index].propertyValue,
// maxLines: 1,
// style: TextStyle(
// color: Color(
// Utils.stringToHex(_tangheemAboveTableList[index].textColor),
// ),
// ),
// ),
),
), ),
) )
], ],
); );
}), }),
if (_tangheemInsideTableList.isNotEmpty) )
Container( : SizedBox();
color: ColorConsts.primaryBlue,
margin: EdgeInsets.only(top: 8, bottom: 8), Widget belowTableWidget = (_tangheemBelowTableList.isNotEmpty) ? tangheemOutSideTablePropertyView(_tangheemBelowTableList) : SizedBox();
padding: EdgeInsets.all(8),
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( child: Column(
children: [ children: [
Text( "قائمة الأساليب اللغوية في هذه الآية".toText(13, color: ColorConsts.darkText),
"خط النبر و التنغيم ل${_ayatTangheemTypeMappedData.tangheemTypeName ?? ""}", 12.height,
style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white), Wrap(
spacing: 8,
runSpacing: 8,
alignment: WrapAlignment.center,
children: [
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),
), ),
SizedBox(height: 8), child: _dataList[index].tangheemTypeName.toText(12)),
tangheemInsideTablePropertyView(_tangheemInsideTableList)
],
), ),
],
), ),
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),
), ),
if (_dataList.isNotEmpty) child: Column(
Column( children: [aboveInnerMerge, belowTableWidget],
),
);
return ListView(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
padding: EdgeInsets.only(top: 21, bottom: 21, left: 24, right: 24),
children: [ children: [
16.height, " جملة ${_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( Container(
height: 38, margin: EdgeInsets.only(top: 21, bottom: 21),
width: double.infinity, padding: EdgeInsets.all(12),
alignment: Alignment.center,
decoration: BoxDecoration( decoration: BoxDecoration(
color: ColorConsts.brownB1CColor, color: Colors.white,
borderRadius: BorderRadius.only( borderRadius: BorderRadius.circular(20),
topRight: Radius.circular(20.0), border: Border.all(color: ColorConsts.greyE0Color, width: 1),
topLeft: Radius.circular(20.0),
), ),
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,
), ),
child: "قائمة الأساليب اللغوية في هذه الآية".toText(16),
), ),
Container( Container(
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.transparent, color: Colors.transparent,
border: Border.all(width: 1, color: ColorConsts.greyE0Color), borderRadius: BorderRadius.circular(20),
borderRadius: BorderRadius.only( border: Border.all(color: ColorConsts.greyE0Color, width: 1),
bottomLeft: Radius.circular(20),
bottomRight: Radius.circular(20),
),
), ),
child: ListView.separated( child: Column(
padding: EdgeInsets.all(16), children: [aboveInnerBelowMerge, relatedTangheemWidget],
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),
), ),
)
],
); );
}, },
), ),
), ),
],
),
SizedBox(height: 16),
AyaRecordWidget(),
SizedBox(height: 16),
discussionView(_discussionModel?.data ?? []),
],
), ),
), ),
if (MediaQuery.of(context).orientation == Orientation.portrait) if (MediaQuery.of(context).orientation == Orientation.portrait)
@ -503,7 +460,16 @@ class _TangheemDetailScreenState extends State<TangheemDetailScreen> {
numberInSurah: _ayatTangheemTypeMappedFirstData?.ayatNumberInSurahs, numberInSurah: _ayatTangheemTypeMappedFirstData?.ayatNumberInSurahs,
ayaNo: _ayatTangheemTypeMappedFirstData?.ayahNo, ayaNo: _ayatTangheemTypeMappedFirstData?.ayahNo,
surahNo: _ayatTangheemTypeMappedFirstData?.surahNo, surahNo: _ayatTangheemTypeMappedFirstData?.surahNo,
voiceNoteList: voiceNoteList), voiceNoteList: voiceNoteList)
.paddingOnly(left: 24, right: 24),
SizedBox(height: 16),
AyaRecordWidget().paddingOnly(left: 24, right: 24),
SizedBox(height: 16),
discussionView(_discussionModel?.data ?? []).paddingOnly(left: 24, right: 24),
SizedBox(height: 16),
],
),
),
if (MediaQuery.of(context).orientation == Orientation.landscape) if (MediaQuery.of(context).orientation == Orientation.landscape)
Column( Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
@ -588,40 +554,40 @@ class _TangheemDetailScreenState extends State<TangheemDetailScreen> {
} }
Widget tangheemOutSideTablePropertyView(List<TangheemProperty> tangheemPropertyList) { Widget tangheemOutSideTablePropertyView(List<TangheemProperty> tangheemPropertyList) {
return ListView.separated( 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, itemCount: tangheemPropertyList.length,
physics: NeverScrollableScrollPhysics(), physics: NeverScrollableScrollPhysics(),
padding: EdgeInsets.only(left: 20, right: 20),
shrinkWrap: true, shrinkWrap: true,
separatorBuilder: (context, index) { separatorBuilder: (context, index) {
return Divider( return Divider(color: ColorConsts.greyB7Color, height: 1, thickness: 0);
color: Colors.white,
height: 4,
thickness: 0,
);
}, },
itemBuilder: (context, index) { itemBuilder: (context, index) {
return Row( return Row(
children: [ children: [
Expanded( tangheemPropertyList[index].propertyText.toText(13, color: ColorConsts.greyB7Color),
child: Container( Container(
height: 40, width: 1,
padding: EdgeInsets.only(left: 4, right: 8), height: 18,
alignment: Alignment.centerRight, color: ColorConsts.greyB7Color,
child: Text( margin: EdgeInsets.only(left: 8, right: 8),
tangheemPropertyList[index].propertyText,
maxLines: 1,
style: TextStyle(fontWeight: FontWeight.bold, color: ColorConsts.secondaryOrange),
),
color: ColorConsts.secondaryWhite,
),
), ),
SizedBox(width: 4),
Expanded( Expanded(
child: Container( child: Container(
color: ColorConsts.secondaryWhite,
padding: EdgeInsets.all(4),
child: Container(
color: Colors.white,
padding: EdgeInsets.only(left: 4, right: 8), padding: EdgeInsets.only(left: 4, right: 8),
// alignment: Alignment.centerRight, // alignment: Alignment.centerRight,
child: Html( child: Html(
@ -630,129 +596,48 @@ class _TangheemDetailScreenState extends State<TangheemDetailScreen> {
'html': Style(textAlign: TextAlign.left), '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) { Widget tangheemInsideTablePropertyView(List<TangheemProperty> tangheemPropertyList) {
return Container( return Column(
color: Colors.white, mainAxisSize: MainAxisSize.min,
padding: EdgeInsets.all(2),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
for (var property in tangheemPropertyList) for (var property in tangheemPropertyList)
Expanded( Column(
child: Container(
// color: ColorConsts.secondaryWhite,
// padding: EdgeInsets.all(8),
margin: EdgeInsets.only(left: 2, right: 2),
child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
Container( Container(
color: ColorConsts.secondaryWhite, height: 35,
//height: 30,
alignment: Alignment.center,
padding: EdgeInsets.only(left: 2, right: 4),
width: double.infinity, width: double.infinity,
child: Text( color: Color(0xff669A9D),
property.propertyText ?? "", alignment: Alignment.center,
// maxLines: 1, child: (property.propertyText ?? "").toText(16),
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( Container(
color: ColorConsts.secondaryWhite,
padding: EdgeInsets.all(4),
child: Container(
color: Colors.white,
padding: EdgeInsets.only(left: 2, right: 4),
width: double.infinity, 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( child: Html(
data: property.propertyValue ?? "", data: property.propertyValue ?? "",
style: { style: {
'html': Style(textAlign: TextAlign.left), 'html': Style(textAlign: TextAlign.left),
}, },
), ),
// Text(
// property.propertyValue ?? "",
// maxLines: 1,
// style: TextStyle(
// fontSize: 12,
// color: Color(
// Utils.stringToHex(property.textColor),
// ),
// ),
// ),
),
), ),
], ],
), ),
),
)
], ],
)
//@todo sikander :commented these line for later discussion
// ListView.separated(
// itemCount: tangheemPropertyList.length,
// physics: NeverScrollableScrollPhysics(),
// padding: EdgeInsets.zero,
// shrinkWrap: true,
// separatorBuilder: (context, index) {
// return Divider(
// color: Colors.white,
// height: 1,
// thickness: 0,
// );
// },
// itemBuilder: (context, index) {
// return Container(
// color: ColorConsts.secondaryWhite,
// padding: EdgeInsets.all(8),
// child: Column(
// mainAxisSize: MainAxisSize.min,
// crossAxisAlignment: CrossAxisAlignment.start,
// mainAxisAlignment: MainAxisAlignment.center,
// children: [
// Text(
// tangheemPropertyList[index].propertyText ?? "",
// style: TextStyle(fontWeight: FontWeight.bold, fontSize: 12, color: ColorConsts.secondaryOrange),
// ),
// SizedBox(height: 4),
// Text(
// tangheemPropertyList[index].propertyValue ?? "",
// style: TextStyle(
// fontSize: 12,
// color: Color(
// Utils.stringToHex(tangheemPropertyList[index].textColor),
// ),
// ),
// ),
// ],
// ),
// );
// },
// ),
); );
} }

@ -1,8 +1,10 @@
import 'dart:convert'; import 'dart:convert';
import 'dart:ffi';
import 'dart:io'; import 'dart:io';
import 'dart:math' as math; import 'dart:math' as math;
import 'dart:typed_data'; import 'dart:typed_data';
import 'package:dotted_border/dotted_border.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart'; import 'package:flutter/rendering.dart';
import 'package:flutter_svg/flutter_svg.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/colors.dart';
import 'package:tangheem/classes/consts.dart'; import 'package:tangheem/classes/consts.dart';
import 'package:tangheem/classes/utils.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'; import 'package:tangheem/models/aya_tangheem_type_mapped.dart';
class AyaPlayerWidget extends StatefulWidget { class AyaPlayerWidget extends StatefulWidget {
@ -100,60 +105,28 @@ class _AyaPlayerWidgetState extends State<AyaPlayerWidget> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Container( return Column(
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, mainAxisSize: MainAxisSize.min,
children: [ 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,
),
),
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) if ((widget.voiceNoteList?.length ?? 0) > 0)
StreamBuilder<int>( DottedBorder(
borderType: BorderType.Circle,
padding: EdgeInsets.all(5),
color: Color(0xff91C1BC),
dashPattern: [4, 4],
child: StreamBuilder<int>(
stream: _player.currentIndexStream, stream: _player.currentIndexStream,
builder: (context, snapshot) { builder: (context, snapshot) {
int state = snapshot.data; int state = snapshot.data;
if (state == null) return SizedBox(); if (state == null) return SizedBox();
return Container( return Container(
width: 50.0, width: 72.0,
margin: EdgeInsets.only(left: 8, right: 8), margin: EdgeInsets.only(left: 8, right: 8),
height: 50.0, height: 72.0,
decoration: BoxDecoration( decoration: BoxDecoration(
image: widget.voiceNoteList.length < 1 ? null : getDecodedImage(state), image: widget.voiceNoteList.length < 1 ? null : getDecodedImage(state),
borderRadius: BorderRadius.all( borderRadius: BorderRadius.all(
Radius.circular(30.0), Radius.circular(50.0),
), ),
), ),
child: widget.voiceNoteList.length < 1 child: widget.voiceNoteList.length < 1
@ -170,31 +143,45 @@ class _AyaPlayerWidgetState extends State<AyaPlayerWidget> {
); );
}, },
), ),
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) if ((widget.voiceNoteList?.length ?? 0) > 0)
StreamBuilder<int>( Container(
stream: _player.currentIndexStream, height: 42,
builder: (context, snapshot) { margin: EdgeInsets.only(top: 8, bottom: 12),
final state = snapshot.data; padding: EdgeInsets.only(left: 15, right: 8),
return Text( decoration: BoxDecoration(
(state == null || widget.voiceNoteList.isEmpty) ? "" : widget.voiceNoteList?.elementAt(state)?.userName ?? "", color: Colors.white,
style: TextStyle(fontSize: 10, color: ColorConsts.textGrey1, height: 1), 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?.isNotEmpty ?? false) if (widget.voiceNoteList?.isNotEmpty ?? false)
commonIconButton("assets/icons/download_aya.svg", () async { commonIconButton("assets/icons/download_aya.svg", () async {
@ -204,41 +191,30 @@ class _AyaPlayerWidgetState extends State<AyaPlayerWidget> {
Utils.showToast("يجب اعطاء الاذن لتنزيل الآية"); Utils.showToast("يجب اعطاء الاذن لتنزيل الآية");
} }
}), }),
], 4.width,
StreamBuilder<double>(
stream: _player.volumeStream,
builder: (context, snapshot) {
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);
});
},
), ),
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), SizedBox(width: 4),
StreamBuilder<PlayerState>( StreamBuilder<Duration>(
stream: _player.playerStateStream, stream: _player.positionStream,
builder: (context, snapshot) { builder: (context, snapshot) {
final state = snapshot.data?.playing ?? false; final state = snapshot.data;
if (state) { return Directionality(textDirection: TextDirection.ltr, child: (_durationTime(state) + " / " + _durationTime(_player.duration)).toText(8, color: ColorConsts.greyB7Color));
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();
});
}, },
), ),
SizedBox(width: 4), SizedBox(width: 4),
commonIconButton("assets/icons/previous_aya.svg", () {
_player.seekToPrevious();
}),
SizedBox(width: 16),
Expanded( Expanded(
child: StreamBuilder<Duration>( child: StreamBuilder<Duration>(
stream: _player.positionStream, stream: _player.positionStream,
@ -246,14 +222,13 @@ class _AyaPlayerWidgetState extends State<AyaPlayerWidget> {
final state = snapshot.data; final state = snapshot.data;
return SliderTheme( return SliderTheme(
data: SliderTheme.of(context).copyWith( data: SliderTheme.of(context).copyWith(
inactiveTrackColor: ColorConsts.sliderBackground, inactiveTrackColor: Color(0xffF5F5F5),
activeTrackColor: ColorConsts.secondaryOrange, activeTrackColor: Color(0xff91C1BC),
trackHeight: 8.0, trackHeight: 5.0,
thumbColor: ColorConsts.primaryBlack, thumbColor: ColorConsts.primaryBlack,
thumbShape: RoundSliderThumbShape(enabledThumbRadius: 10.0), thumbShape: RoundSliderThumbShape(enabledThumbRadius: 5.0),
overlayColor: ColorConsts.primaryBlack.withAlpha(32), overlayColor: ColorConsts.primaryBlack.withAlpha(32),
overlayShape: RoundSliderOverlayShape(overlayRadius: 12.0), overlayShape: SliderComponentShape.noOverlay),
),
child: Directionality( child: Directionality(
textDirection: TextDirection.ltr, textDirection: TextDirection.ltr,
child: Slider( child: Slider(
@ -269,21 +244,48 @@ class _AyaPlayerWidgetState extends State<AyaPlayerWidget> {
}, },
), ),
), ),
SizedBox(width: 8), StreamBuilder<PlayerState>(
StreamBuilder<Duration>( stream: _player.playerStateStream,
stream: _player.positionStream,
builder: (context, snapshot) { builder: (context, snapshot) {
final state = snapshot.data; final state = snapshot.data?.playing ?? false;
return Text( if (state) {
_durationTime(state) ?? "", if (_player?.duration?.inSeconds == _player?.position?.inSeconds) {
style: TextStyle(color: ColorConsts.textGrey1, height: 1.1, fontFamily: "Roboto"), _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, highlightColor: Colors.transparent,
splashColor: Colors.transparent, splashColor: Colors.transparent,
constraints: BoxConstraints(), constraints: BoxConstraints(),
padding: EdgeInsets.only(right: 2), padding: EdgeInsets.zero,
icon: SvgPicture.asset(icon, height: 16, width: 16), icon: SvgPicture.asset(icon, color: Color(0xff939393), height: 14, width: 14),
onPressed: onPressed); onPressed: onPressed);
} }

@ -1,14 +1,24 @@
import 'package:flutter/material.dart'; 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/int_extensions.dart';
import 'package:tangheem/extensions/string_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 { class CommonHeader extends StatelessWidget {
final String title; final String title;
final Color gradiantColor; final Color gradiantColor;
final String assetImage; final String assetImage;
final double ratio; 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 @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
@ -41,7 +51,58 @@ class CommonHeader extends StatelessWidget {
), ),
), ),
), ),
Column( 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, mainAxisSize: MainAxisSize.min,
children: [ children: [
Image.asset('assets/icons/new/Tangeem-logo-W.png', width: 50), Image.asset('assets/icons/new/Tangeem-logo-W.png', width: 50),

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

Loading…
Cancel
Save