diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml index 8bc7034..ee5149c 100644 --- a/android/app/src/main/AndroidManifest.xml +++ b/android/app/src/main/AndroidManifest.xml @@ -5,6 +5,7 @@ In most cases you can leave this as-is, but you if you want to provide additional functionality it is fine to subclass or reimplement FlutterApplication and put your custom class here. --> + { ], ), SizedBox(height: 16), - CommonDropDownButton("ابدأ البحث", color: Const.secondaryPink, icon: "assets/icons/go_forward.svg", widthHeight: 20, iconColor: Colors.white, onPressed: () {}), + CommonDropDownButton( + "ابدأ البحث", + color: Const.secondaryPink, + icon: "assets/icons/go_forward.svg", + widthHeight: 20, + iconColor: Colors.white, + onPressed: () { + FocusScope.of(context).unfocus(); + Navigator.pushNamed(context, TangheemScreen.routeName); + }, + ), SizedBox(height: 16), SizedBox( height: 40, @@ -92,7 +103,7 @@ class _HomeScreenState extends State { suffixIcon: InkWell( onTap: () { FocusScope.of(context).unfocus(); - Navigator.pushNamed(context, SearchScreen.routeName, arguments: _searchController.text); + Navigator.pushNamed(context, SurahScreen.routeName, arguments: _searchController.text); }, splashColor: Colors.transparent, highlightColor: Colors.transparent, diff --git a/lib/ui/search_screen.dart b/lib/ui/search_screen.dart deleted file mode 100644 index 7203505..0000000 --- a/lib/ui/search_screen.dart +++ /dev/null @@ -1,282 +0,0 @@ -import 'package:flutter/cupertino.dart'; -import 'package:flutter/material.dart'; -import 'package:flutter_svg/flutter_svg.dart'; -import 'dart:math' as math; -import 'package:tangheem/classes/const.dart'; -import 'package:tangheem/widgets/common_dropdown_button.dart'; - -class SearchScreen extends StatefulWidget { - static const String routeName = "/search"; - final String query; - - SearchScreen({Key key, @required this.query}) : super(key: key); - - @override - _SearchScreenState createState() { - return _SearchScreenState(); - } -} - -class _SearchScreenState extends State { - double sliderValue = 0.4; - bool isPlaying = false; - - @override - void initState() { - super.initState(); - searchQuery(); - } - - void searchQuery() {} - - @override - void dispose() { - super.dispose(); - } - - @override - Widget build(BuildContext context) { - 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: Const.primaryBlue, height: 1), - ), - SizedBox(height: 16), - Row( - children: [ - Expanded( - child: CommonDropDownButton("سورة البقرة", onPressed: () {}), - ), - SizedBox(width: 4), - Expanded( - child: CommonDropDownButton("من الاية" + " 158", onPressed: () {}), - ), - SizedBox(width: 4), - Expanded( - child: CommonDropDownButton("الى الاية" + " 123", onPressed: () {}), - ), - ], - ), - SizedBox(height: 16), - Expanded( - child: Container( - margin: EdgeInsets.only(top: 4, bottom: 4), - padding: EdgeInsets.only(top: 16, bottom: 4, right: 16, left: 16), - decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.only( - topLeft: Radius.circular(8), - topRight: Radius.circular(8), - ), - ), - child: Column( - children: [ - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - nextOptionButton("assets/icons/go_forward.svg", "سورة الفاتحة", () {}), - previousOptionButton("assets/icons/go_forward.svg", "سورة آل عمران", () {}), - ], - ), - Expanded( - child: ListView( - physics: BouncingScrollPhysics(), - padding: EdgeInsets.only(top: 16, bottom: 8), - children: [ - Text( - "بسم الله الرحمن الرحيم", - textAlign: TextAlign.center, - style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20, color: Const.primaryBlue, height: 1), - ), - SizedBox(height: 8), - Expanded( - child: Container( - padding: EdgeInsets.only(left: 4, right: 4), - child: Text( - "إِنَّ الصَّفَا وَالْمَرْوَةَ مِنْ شَعَائِرِ اللَّهِ ۖ فَمَنْ حَجَّ الْبَيْتَ أَوِ اعْتَمَرَ فَلَا جُنَاحَ عَلَيْهِ أَنْ يَطَّوَّفَ بِهِمَا ۚ وَمَنْ تَطَوَّعَ خَيْرًا فَإِنَّ اللَّهَ شَاكِرٌ عَلِيمٌ ﴿158﴾ إِنَّ الَّذِينَ يَكْتُمُونَ مَا أَنْزَلْنَا مِنَ الْبَيِّنَاتِ وَالْهُدَىٰ مِنْ بَعْدِ مَا بَيَّنَّاهُ لِلنَّاسِ فِي الْكِتَابِ ۙ أُولَٰئِكَ يَلْعَنُهُمُ اللَّهُ وَيَلْعَنُهُمُ اللَّاعِنُونَ ﴿159﴾ إِلَّا الَّذِينَ تَابُوا وَأَصْلَحُوا وَبَيَّنُوا فَأُولَٰئِكَ أَتُوبُ عَلَيْهِمْ ۚ وَأَنَا التَّوَّابُ الرَّحِيمُ ﴿160﴾ إِنَّ الَّذِينَ كَفَرُوا وَمَاتُوا وَهُمْ كُفَّارٌ أُولَٰئِكَ عَلَيْهِمْ لَعْنَةُ اللَّهِ وَالْمَلَائِكَةِ وَالنَّاسِ أَجْمَعِينَ ﴿161﴾ خَالِدِينَ فِيهَا ۖ لَا يُخَفَّفُ عَنْهُمُ الْعَذَابُ وَلَا هُمْ يُنْظَرُونَ ﴿162﴾ وَإِلَٰهُكُمْ إِلَٰهٌ وَاحِدٌ ۖ لَا إِلَٰهَ إِلَّا هُوَ الرَّحْمَٰنُ الرَّحِيمُ ﴿163﴾إِنَّ فِي خَلْقِ السَّمَاوَاتِ وَالْأَرْضِ وَاخْتِلَافِ اللَّيْلِ وَالنَّهَارِ وَالْفُلْكِ الَّتِي تَجْرِي فِي الْبَحْرِ بِمَا يَنْفَعُ النَّاسَ وَمَا أَنْزَلَ اللَّهُ مِنَ السَّمَاءِ مِنْ مَاءٍ فَأَحْيَا بِهِ الْأَرْضَ بَعْدَ مَوْتِهَا وَبَثَّ فِيهَا مِنْ كُلِّ دَابَّةٍ وَتَصْرِيفِ الرِّيَاحِ وَالسَّحَابِ الْمُسَخَّرِ بَيْنَ السَّمَاءِ وَالْأَرْضِ لَآيَاتٍ لِقَوْمٍ يَعْقِلُونَ ﴿164﴾ وَمِنَ النَّاسِ مَنْ يَتَّخِذُ مِنْ دُونِ اللَّهِ أَنْدَادًا يُحِبُّونَهُمْ كَحُبِّ اللَّهِ ۖ وَالَّذِينَ آمَنُوا أَشَدُّ حُبًّا لِلَّهِ ۗ وَلَوْ يَرَى الَّذِينَ ظَلَمُوا إِذْ يَرَوْنَ الْعَذَابَ أَنَّ الْقُوَّةَ لِلَّهِ جَمِيعًا وَأَنَّ اللَّهَ شَدِيدُ الْعَذَابِ ﴿165﴾ إِذْ تَبَرَّأَ الَّذِينَ اتُّبِعُوا مِنَ الَّذِينَ اتَّبَعُوا وَرَأَوُا الْعَذَابَ وَتَقَطَّعَتْ بِهِمُ الْأَسْبَابُ ﴿166﴾ وَقَالَ الَّذِينَ اتَّبَعُوا لَوْ أَنَّ لَنَا كَرَّةً فَنَتَبَرَّأَ مِنْهُمْ كَمَا تَبَرَّءُوا مِنَّا ۗ كَذَٰلِكَ يُرِيهِمُ اللَّهُ أَعْمَالَهُمْ حَسَرَاتٍ عَلَيْهِمْ ۖ وَمَا هُمْ بِخَارِجِينَ مِنَ النَّارِ ﴿167﴾4", - textAlign: TextAlign.center, - style: TextStyle( - fontFamily: "UthmanicHafs", - color: Const.primaryBlue, - fontSize: 20, - fontWeight: FontWeight.bold, - ), - ), - ), - ), - ], - ), - ), - SizedBox(height: 8), - Text( - "1 2 3 4 5 6 7 8 9", - style: TextStyle(fontSize: 14, color: Const.textHintGrey), - ), - SizedBox(height: 4), - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - nextOptionButton("assets/icons/go_forward.svg", "الآيات السابقة", () {}), - previousOptionButton("assets/icons/go_forward.svg", "الآيات التالية", () {}), - ], - ), - ], - ), - ), - ), - // SizedBox(height: 16), - Container( - margin: EdgeInsets.only(top: 4, bottom: 4), - decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.only( - topLeft: Radius.circular(8), - topRight: Radius.circular(8), - ), - ), - padding: EdgeInsets.all(8), - child: Column( - children: [ - Row( - children: [ - Transform.rotate( - angle: 180 * math.pi / 180, - child: SvgPicture.asset( - "assets/icons/drop_menu.svg", - color: Const.secondaryOrange, - width: 16, - ), - ), - Container( - width: 50.0, - margin: EdgeInsets.only(left: 8, right: 8), - height: 50.0, - decoration: BoxDecoration( - image: DecorationImage( - fit: BoxFit.cover, - image: NetworkImage("https://i.pinimg.com/originals/91/cf/45/91cf453d79f58df425b6b0267603ccb3.jpg"), - ), - borderRadius: BorderRadius.all( - Radius.circular(30.0), - ), - ), - ), - Expanded( - child: Column( - mainAxisSize: MainAxisSize.min, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - "سورة البقسورة البقسورة البقرة", - maxLines: 1, - overflow: TextOverflow.ellipsis, - style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14, color: Const.primaryBlack, height: 1), - ), - SizedBox(height: 4), - Text( - "الشيخ عبد الشيخ عبد العزيز الزهراني", - style: TextStyle(fontSize: 10, color: Const.textGrey1, height: 1), - ), - ], - ), - ), - commonIconButton("assets/icons/download_aya.svg", () {}), - commonIconButton("assets/icons/share_aya.svg", () {}), - commonIconButton("assets/icons/bookmark.svg", () {}), - commonIconButton("assets/icons/audio_level.svg", () {}), - ], - ), - SizedBox(height: 8), - Row( - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - commonIconButton("assets/icons/next_aya.svg", () {}), - SizedBox(width: 4), - commonIconButton(isPlaying ? "assets/icons/pause.svg" : "assets/icons/play_aya.svg", () { - setState(() { - isPlaying = !isPlaying; - }); - }), - SizedBox(width: 4), - commonIconButton("assets/icons/previous_aya.svg", () {}), - Expanded( - child: SliderTheme( - data: SliderTheme.of(context).copyWith( - activeTrackColor: Const.sliderBackground, - inactiveTrackColor: Const.secondaryOrange, - // trackShape: RoundedRectRangeSliderTrackShape(), - trackHeight: 8.0, - thumbColor: Const.primaryBlack, - thumbShape: RoundSliderThumbShape(enabledThumbRadius: 10.0), - overlayColor: Colors.red.withAlpha(32), - overlayShape: RoundSliderOverlayShape(overlayRadius: 12.0), - ), - child: Slider( - value: sliderValue, - onChanged: (value) { - setState(() { - sliderValue = value; - }); - }, - ), - ), - ), - Text( - "06:00", - style: TextStyle(color: Const.textGrey1, height: 1.1, fontFamily: "Roboto"), - ), - ], - ) - ], - ), - ), - ], - ), - ); - } - - Widget commonIconButton(String icon, VoidCallback onPressed) { - return IconButton(constraints: BoxConstraints(), padding: EdgeInsets.only(right: 2), icon: SvgPicture.asset(icon, height: 16, width: 16, color: Const.textGrey), onPressed: onPressed); - } - - 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: 16, width: 16, color: Const.secondaryOrange), - SizedBox(width: 4), - Text( - text, - style: TextStyle(color: Const.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: Const.textGrey), - ), - SizedBox(width: 4), - SvgPicture.asset(icon, height: 16, width: 16, color: Const.secondaryOrange), - ], - ), - ); - } -} diff --git a/lib/ui/surah_screen.dart b/lib/ui/surah_screen.dart new file mode 100644 index 0000000..cf0f556 --- /dev/null +++ b/lib/ui/surah_screen.dart @@ -0,0 +1,168 @@ +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; +import 'package:tangheem/classes/const.dart'; +import 'package:tangheem/widgets/aya_player_widget.dart'; +import 'package:tangheem/widgets/common_dropdown_button.dart'; + +class SurahScreen extends StatefulWidget { + static const String routeName = "/surah"; + final String query; + + SurahScreen({Key key, @required this.query}) : super(key: key); + + @override + _SurahScreenState createState() { + return _SurahScreenState(); + } +} + +class _SurahScreenState extends State { + @override + void initState() { + super.initState(); + searchQuery(); + } + + void searchQuery() {} + + @override + void dispose() { + super.dispose(); + } + + @override + Widget build(BuildContext context) { + 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: Const.primaryBlue, height: 1), + ), + SizedBox(height: 16), + Row( + children: [ + Expanded( + child: CommonDropDownButton("سورة البقرة", onPressed: () {}), + ), + SizedBox(width: 4), + Expanded( + child: CommonDropDownButton("من الاية" + " 158", onPressed: () {}), + ), + SizedBox(width: 4), + Expanded( + child: CommonDropDownButton("الى الاية" + " 123", onPressed: () {}), + ), + ], + ), + SizedBox(height: 16), + Expanded( + child: Container( + margin: EdgeInsets.only(top: 4, bottom: 4), + padding: EdgeInsets.only(top: 16, bottom: 4, right: 16, left: 16), + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.only( + topLeft: Radius.circular(8), + topRight: Radius.circular(8), + ), + ), + child: Column( + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + nextOptionButton("assets/icons/go_forward.svg", "سورة الفاتحة", () {}), + previousOptionButton("assets/icons/go_forward.svg", "سورة آل عمران", () {}), + ], + ), + Expanded( + child: ListView( + physics: BouncingScrollPhysics(), + padding: EdgeInsets.only(top: 16, bottom: 8), + children: [ + Text( + "بسم الله الرحمن الرحيم", + textAlign: TextAlign.center, + style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20, color: Const.primaryBlue, height: 1), + ), + SizedBox(height: 8), + Container( + padding: EdgeInsets.only(left: 4, right: 4), + child: Text( + "إِنَّ الصَّفَا وَالْمَرْوَةَ مِنْ شَعَائِرِ اللَّهِ ۖ فَمَنْ حَجَّ الْبَيْتَ أَوِ اعْتَمَرَ فَلَا جُنَاحَ عَلَيْهِ أَنْ يَطَّوَّفَ بِهِمَا ۚ وَمَنْ تَطَوَّعَ خَيْرًا فَإِنَّ اللَّهَ شَاكِرٌ عَلِيمٌ ﴿158﴾ إِنَّ الَّذِينَ يَكْتُمُونَ مَا أَنْزَلْنَا مِنَ الْبَيِّنَاتِ وَالْهُدَىٰ مِنْ بَعْدِ مَا بَيَّنَّاهُ لِلنَّاسِ فِي الْكِتَابِ ۙ أُولَٰئِكَ يَلْعَنُهُمُ اللَّهُ وَيَلْعَنُهُمُ اللَّاعِنُونَ ﴿159﴾ إِلَّا الَّذِينَ تَابُوا وَأَصْلَحُوا وَبَيَّنُوا فَأُولَٰئِكَ أَتُوبُ عَلَيْهِمْ ۚ وَأَنَا التَّوَّابُ الرَّحِيمُ ﴿160﴾ إِنَّ الَّذِينَ كَفَرُوا وَمَاتُوا وَهُمْ كُفَّارٌ أُولَٰئِكَ عَلَيْهِمْ لَعْنَةُ اللَّهِ وَالْمَلَائِكَةِ وَالنَّاسِ أَجْمَعِينَ ﴿161﴾ خَالِدِينَ فِيهَا ۖ لَا يُخَفَّفُ عَنْهُمُ الْعَذَابُ وَلَا هُمْ يُنْظَرُونَ ﴿162﴾ وَإِلَٰهُكُمْ إِلَٰهٌ وَاحِدٌ ۖ لَا إِلَٰهَ إِلَّا هُوَ الرَّحْمَٰنُ الرَّحِيمُ ﴿163﴾إِنَّ فِي خَلْقِ السَّمَاوَاتِ وَالْأَرْضِ وَاخْتِلَافِ اللَّيْلِ وَالنَّهَارِ وَالْفُلْكِ الَّتِي تَجْرِي فِي الْبَحْرِ بِمَا يَنْفَعُ النَّاسَ وَمَا أَنْزَلَ اللَّهُ مِنَ السَّمَاءِ مِنْ مَاءٍ فَأَحْيَا بِهِ الْأَرْضَ بَعْدَ مَوْتِهَا وَبَثَّ فِيهَا مِنْ كُلِّ دَابَّةٍ وَتَصْرِيفِ الرِّيَاحِ وَالسَّحَابِ الْمُسَخَّرِ بَيْنَ السَّمَاءِ وَالْأَرْضِ لَآيَاتٍ لِقَوْمٍ يَعْقِلُونَ ﴿164﴾ وَمِنَ النَّاسِ مَنْ يَتَّخِذُ مِنْ دُونِ اللَّهِ أَنْدَادًا يُحِبُّونَهُمْ كَحُبِّ اللَّهِ ۖ وَالَّذِينَ آمَنُوا أَشَدُّ حُبًّا لِلَّهِ ۗ وَلَوْ يَرَى الَّذِينَ ظَلَمُوا إِذْ يَرَوْنَ الْعَذَابَ أَنَّ الْقُوَّةَ لِلَّهِ جَمِيعًا وَأَنَّ اللَّهَ شَدِيدُ الْعَذَابِ ﴿165﴾ إِذْ تَبَرَّأَ الَّذِينَ اتُّبِعُوا مِنَ الَّذِينَ اتَّبَعُوا وَرَأَوُا الْعَذَابَ وَتَقَطَّعَتْ بِهِمُ الْأَسْبَابُ ﴿166﴾ وَقَالَ الَّذِينَ اتَّبَعُوا لَوْ أَنَّ لَنَا كَرَّةً فَنَتَبَرَّأَ مِنْهُمْ كَمَا تَبَرَّءُوا مِنَّا ۗ كَذَٰلِكَ يُرِيهِمُ اللَّهُ أَعْمَالَهُمْ حَسَرَاتٍ عَلَيْهِمْ ۖ وَمَا هُمْ بِخَارِجِينَ مِنَ النَّارِ ﴿167﴾4", + textAlign: TextAlign.center, + style: TextStyle( + fontFamily: "UthmanicHafs", + color: Const.primaryBlue, + fontSize: 18, + fontWeight: FontWeight.bold, + ), + ), + ), + ], + ), + ), + SizedBox(height: 8), + Text( + "1 2 3 4 5 6 7 8 9", + style: TextStyle(fontSize: 14, color: Const.textHintGrey), + ), + SizedBox(height: 4), + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + nextOptionButton("assets/icons/go_forward.svg", "الآيات السابقة", () {}), + previousOptionButton("assets/icons/go_forward.svg", "الآيات التالية", () {}), + ], + ), + ], + ), + ), + ), + AyaPlayerWidget() + ], + ), + ); + } + + 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: 16, width: 16, color: Const.secondaryOrange), + SizedBox(width: 4), + Text( + text, + style: TextStyle(color: Const.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: Const.textGrey), + ), + SizedBox(width: 4), + SvgPicture.asset(icon, height: 16, width: 16, color: Const.secondaryOrange), + ], + ), + ); + } +} diff --git a/lib/ui/tangheem_screen.dart b/lib/ui/tangheem_screen.dart new file mode 100644 index 0000000..339014f --- /dev/null +++ b/lib/ui/tangheem_screen.dart @@ -0,0 +1,245 @@ +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; +import 'package:tangheem/classes/const.dart'; +import 'package:tangheem/widgets/aya_player_widget.dart'; +import 'package:tangheem/widgets/common_dropdown_button.dart'; + +class TangheemScreen extends StatefulWidget { + static const String routeName = "/tangheem"; + + TangheemScreen({Key key}) : super(key: key); + + @override + _TangheemScreenState createState() { + return _TangheemScreenState(); + } +} + +class _TangheemScreenState extends State { + List temp1 = List(); + List temp2 = List(); + @override + void initState() { + super.initState(); + temp1 = [ + TempModel("نغمة الانتظار الصاعدة على آخر الجزء الأول من الجملة", "( الكتاب، اللاعنون )"), + TempModel("نغمة الانتظار الصاعدة على آخر الجزء الأول من الجملة", "( إلا الذين تابوا وأصلحوا وبينوا ..4)"), + ]; + + temp2 = [ + TempModel("تلوينات أدائية مناسبة", ""), + TempModel("شرح الاسلوب", ""), + ]; + searchQuery(); + } + + void searchQuery() {} + + @override + void dispose() { + super.dispose(); + } + + @override + Widget build(BuildContext context) { + 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: Const.primaryBlue, height: 1.5), + ), + SizedBox(height: 8), + Text( + "هنا نضع\" تعريف بالاستفهام وتداخل الأساليب\"", + style: TextStyle(fontSize: 14, color: Const.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.only( + topLeft: Radius.circular(8), + topRight: Radius.circular(8), + ), + ), + child: Column( + children: [ + Expanded( + child: ListView( + physics: BouncingScrollPhysics(), + padding: EdgeInsets.all(4), + children: [ + Text( + " إِنَّ الَّذِينَ يَكْتُمُونَ مَا أَنْزَلْنَا مِنَ الْبَيِّنَاتِ وَالْهُدَىٰ مِنْ بَعْدِ مَا بَيَّنَّاهُ لِلنَّاسِ فِي الْكِتَابِ ۙ أُولَٰئِكَ يَلْعَنُهُمُ اللَّهُ وَيَلْعَنُهُمُ اللَّاعِنُونَ ﴿159﴾ إِلَّا الَّذِينَ تَابُوا وَأَصْلَحُوا وَبَيَّنُوا فَأُولَٰئِكَ أَتُوبُ عَلَيْهِمْ ۚ وَأَنَا التَّوَّابُ الرَّحِيمُ ﴿160﴾ْ", + textAlign: TextAlign.center, + style: TextStyle( + fontFamily: "UthmanicHafs", + color: Const.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: Const.secondaryOrange), + ), + color: Const.secondaryWhite, + ), + ), + ), + 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: Const.primaryBlack), + ), + color: Const.secondaryWhite, + ), + ), + ) + ], + ), + Container( + color: Const.primaryBlue, + margin: EdgeInsets.only(top: 8, bottom: 8), + padding: EdgeInsets.all(8), + child: Column( + children: [ + Text( + "خط التنغيم لأسلوب الإتمام", + style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white), + ), + SizedBox(height: 8), + myListView(temp1) + ], + ), + ), + myListView(temp2) + ], + ), + ), + SizedBox(height: 4), + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + nextOptionButton("assets/icons/go_forward.svg", "الآيات السابقة", () {}), + previousOptionButton("assets/icons/go_forward.svg", "الآيات التالية", () {}), + ], + ), + ], + ), + ), + ), + AyaPlayerWidget() + ], + ), + ); + } + + 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: 16, width: 16, color: Const.secondaryOrange), + SizedBox(width: 4), + Text( + text, + style: TextStyle(color: Const.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: Const.textGrey), + ), + SizedBox(width: 4), + SvgPicture.asset(icon, height: 16, width: 16, color: Const.secondaryOrange), + ], + ), + ); + } + + Widget myListView(List temp) { + return Container( + color: Colors.white, + child: ListView.separated( + itemCount: temp.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: Const.secondaryWhite, + padding: EdgeInsets.all(8), + child: Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + temp[index].title, + style: TextStyle(fontWeight: FontWeight.bold, fontSize: 12, color: Const.secondaryOrange), + ), + SizedBox(height: 4), + Text( + temp[index].description, + style: TextStyle(fontSize: 12, color: Const.secondaryPink), + ), + ], + ), + ); + }, + ), + ); + } +} + +class TempModel { + String title; + String description; + TempModel(this.title, this.description); +} diff --git a/lib/widgets/aya_player_widget.dart b/lib/widgets/aya_player_widget.dart new file mode 100644 index 0000000..663f1f2 --- /dev/null +++ b/lib/widgets/aya_player_widget.dart @@ -0,0 +1,141 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; +import 'package:tangheem/classes/const.dart'; +import 'dart:math' as math; + +class AyaPlayerWidget extends StatefulWidget { + AyaPlayerWidget({Key key}) : super(key: key); + + @override + _AyaPlayerWidgetState createState() { + return _AyaPlayerWidgetState(); + } +} + +class _AyaPlayerWidgetState extends State { + double sliderValue = 0.4; + bool isPlaying = false; + + @override + void initState() { + super.initState(); + } + + @override + void dispose() { + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return Container( + margin: EdgeInsets.only(top: 8, bottom: 8), + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.only( + topLeft: Radius.circular(8), + topRight: Radius.circular(8), + ), + ), + padding: EdgeInsets.all(8), + child: Column( + children: [ + Row( + children: [ + Transform.rotate( + angle: 180 * math.pi / 180, + child: SvgPicture.asset( + "assets/icons/drop_menu.svg", + color: Const.secondaryOrange, + width: 16, + ), + ), + Container( + width: 50.0, + margin: EdgeInsets.only(left: 8, right: 8), + height: 50.0, + decoration: BoxDecoration( + image: DecorationImage( + fit: BoxFit.cover, + image: NetworkImage("https://i.pinimg.com/originals/91/cf/45/91cf453d79f58df425b6b0267603ccb3.jpg"), + ), + borderRadius: BorderRadius.all( + Radius.circular(30.0), + ), + ), + ), + Expanded( + child: Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + "سورة البقسورة البقسورة البقرة", + maxLines: 1, + overflow: TextOverflow.ellipsis, + style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14, color: Const.primaryBlack, height: 1), + ), + SizedBox(height: 4), + Text( + "الشيخ عبد الشيخ عبد العزيز الزهراني", + style: TextStyle(fontSize: 10, color: Const.textGrey1, height: 1), + ), + ], + ), + ), + commonIconButton("assets/icons/download_aya.svg", () {}), + commonIconButton("assets/icons/share_aya.svg", () {}), + commonIconButton("assets/icons/bookmark.svg", () {}), + commonIconButton("assets/icons/audio_level.svg", () {}), + ], + ), + SizedBox(height: 8), + Row( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + commonIconButton("assets/icons/next_aya.svg", () {}), + SizedBox(width: 4), + commonIconButton(isPlaying ? "assets/icons/pause.svg" : "assets/icons/play_aya.svg", () { + setState(() { + isPlaying = !isPlaying; + }); + }), + SizedBox(width: 4), + commonIconButton("assets/icons/previous_aya.svg", () {}), + Expanded( + child: SliderTheme( + data: SliderTheme.of(context).copyWith( + activeTrackColor: Const.sliderBackground, + inactiveTrackColor: Const.secondaryOrange, + // trackShape: RoundedRectRangeSliderTrackShape(), + trackHeight: 8.0, + thumbColor: Const.primaryBlack, + thumbShape: RoundSliderThumbShape(enabledThumbRadius: 10.0), + overlayColor: Colors.red.withAlpha(32), + overlayShape: RoundSliderOverlayShape(overlayRadius: 12.0), + ), + child: Slider( + value: sliderValue, + onChanged: (value) { + setState(() { + sliderValue = value; + }); + }, + ), + ), + ), + Text( + "06:00", + style: TextStyle(color: Const.textGrey1, height: 1.1, fontFamily: "Roboto"), + ), + ], + ) + ], + ), + ); + } + + Widget commonIconButton(String icon, VoidCallback onPressed) { + return IconButton(constraints: BoxConstraints(), padding: EdgeInsets.only(right: 2), icon: SvgPicture.asset(icon, height: 16, width: 16, color: Const.textGrey), onPressed: onPressed); + } +} diff --git a/lib/widgets/common_appbar_widget.dart b/lib/widgets/common_appbar_widget.dart index 449c69a..2b45258 100644 --- a/lib/widgets/common_appbar_widget.dart +++ b/lib/widgets/common_appbar_widget.dart @@ -107,33 +107,108 @@ class _CommonAppbarWidgetState extends State { ], ), ), - Container( - height: 40, - margin: EdgeInsets.only(left: 24, right: 24), - padding: EdgeInsets.only(left: 8, right: 8), - alignment: Alignment.centerRight, - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(6), - gradient: LinearGradient( - stops: [0.0, 0.5], - begin: Alignment.topCenter, - end: Alignment.bottomCenter, - colors: [Const.gradientPink, Const.gradientOrange], + Expanded( + child: Container( + margin: EdgeInsets.only(left: 24, right: 24), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + myListItem("assets/icons/home.svg", "الرئيسية", true), + SizedBox(height: 2), + myListItem("assets/icons/encyclopedia.svg", "موسوعة تنغيم", false), + Container( + width: double.infinity, + child: Row( + children: [ + Expanded( + child: myListItem("assets/icons/about.svg", "التعريف بموسوعة تنغيم", false), + ), + Container( + // width: 35, + height: 40, + margin: EdgeInsets.only(right: 17, left: 10), + // color: Const.primaryBlack, + child: VerticalDivider(color: Const.primaryBlack, thickness: .7, width: 1), + ), + ], + ), + ), + Container( + width: double.infinity, + child: Row( + children: [ + Expanded( + child: myListItem("assets/icons/browse.svg", "تصفح الموسوعة", false), + ), + Container( + // width: 35, + height: 40, + margin: EdgeInsets.only(right: 17, left: 10), + // color: Const.primaryBlack, + child: VerticalDivider(color: Const.primaryBlack, thickness: .7, width: 1), + ), + ], + ), + ), + Container( + width: double.infinity, + child: Row( + children: [ + Expanded( + child: myListItem("assets/icons/download.svg", "تنزيل الموسوعة", false), + ), + Container( + // width: 35, + height: 40, + margin: EdgeInsets.only(right: 17, left: 10), + // color: Const.primaryBlack, + child: VerticalDivider(color: Const.primaryBlack, thickness: .7, width: 1), + ), + ], + ), + ), + Container( + width: double.infinity, + child: Row( + children: [ + Expanded( + child: myListItem("assets/icons/copyrights.svg", "حقوق الموسوعة", false), + ), + Container( + // width: 35, + height: 40, + margin: EdgeInsets.only(right: 17, left: 10), + // color: Const.primaryBlack, + child: VerticalDivider(color: Const.primaryBlack, thickness: .7, width: 1), + ), + ], + ), + ), + Container( + width: double.infinity, + child: Row( + children: [ + Expanded( + child: myListItem("assets/icons/members.svg", "اللجنة الاستشارية", false), + ), + Container( + // width: 35, + height: 40, + margin: EdgeInsets.only(right: 17, left: 10), + // color: Const.primaryBlack, + child: VerticalDivider(color: Const.primaryBlack, thickness: .7, width: 1), + ), + ], + ), + ), + SizedBox(height: 2), + myListItem("assets/icons/read_quran.svg", "اقرأ القرآن الكريم", false), + SizedBox(height: 2), + myListItem("assets/icons/contact.svg", "الاتصال بنا", false), + ], ), ), - child: Row( - mainAxisSize: MainAxisSize.min, - children: [ - Text( - "الرئيسية", - style: TextStyle(fontSize: 14, color: Colors.white), - ), - SizedBox(width: 8), - SvgPicture.asset("assets/icons /home.svg", height: 20, width: 20, color: Colors.white), - ], - ), ), - Expanded(child: Container()), Container( margin: EdgeInsets.only(top: 16, bottom: 0), padding: EdgeInsets.only(left: 32, right: 32), @@ -159,4 +234,34 @@ class _CommonAppbarWidgetState extends State { child: IconButton(padding: EdgeInsets.zero, icon: SvgPicture.asset(icon, height: size ?? 25, width: size ?? 30, color: Const.textGrey), onPressed: onPressed), ); } + + Widget myListItem(String icon, String title, bool isSelected) { + return Container( + height: 40, + padding: EdgeInsets.only(left: 8, right: 8), + alignment: Alignment.centerRight, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(6), + gradient: isSelected + ? LinearGradient( + stops: [0.0, 0.5], + begin: Alignment.topCenter, + end: Alignment.bottomCenter, + colors: [Const.gradientPink, Const.gradientOrange], + ) + : null, + ), + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + Text( + title, + style: TextStyle(fontSize: 14, color: isSelected ? Colors.white : Const.textGrey), + ), + SizedBox(width: 8), + SvgPicture.asset(icon, height: 20, width: 20, color: isSelected ? Colors.white : Const.textGrey), + ], + ), + ); + } }