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

Drawer ui improvement, tangheem screen added.

Browse Source
development
Sikander Saleem 5 years ago
parent 62b54b918f
commit ef69da80cb
9 changed files with 706 additions and 313 deletions
Show Stats Download Patch File Download Diff File

1
android/app/src/main/AndroidManifest.xml
Unescape Escape View File

@ -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. -->
<uses-permission android:name="android.permission.INTERNET"/>
<application
android:name="io.flutter.app.FlutterApplication"
android:label="tangheem"

2
android/local.properties
Unescape Escape View File

@ -1,5 +1,5 @@
sdk.dir=C:\\Users\\sikander.saleem\\Documents\\Sdks\\android
flutter.sdk=C:\\Users\\sikander.saleem\\Documents\\Sdks\\flutter
flutter.buildMode=debug
flutter.buildMode=release
flutter.versionName=1.0.0
flutter.versionCode=1

10
lib/main.dart
Unescape Escape View File

@ -1,7 +1,8 @@
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:tangheem/ui/home_screen.dart';
import 'package:tangheem/ui/search_screen.dart';
import 'package:tangheem/ui/surah_screen.dart';
import 'package:tangheem/ui/tangheem_screen.dart';
import 'package:tangheem/widgets/common_appbar_widget.dart';
import 'classes/const.dart';
@ -28,9 +29,12 @@ class Application extends StatelessWidget {
case HomeScreen.routeName:
className = CommonAppbarWidget(showDrawer: true, child: HomeScreen());
break;
case SearchScreen.routeName:
case TangheemScreen.routeName:
className = CommonAppbarWidget(child: TangheemScreen());
break;
case SurahScreen.routeName:
String query = settings.arguments.toString();
className = CommonAppbarWidget(child: SearchScreen(query: query));
className = CommonAppbarWidget(child: SurahScreen(query: query));
break;
}
return goToNavigation(className);

17
lib/ui/home_screen.dart
Unescape Escape View File

@ -4,7 +4,8 @@ import 'package:flutter/painting.dart';
import 'package:flutter/services.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:tangheem/classes/const.dart';
import 'package:tangheem/ui/search_screen.dart';
import 'package:tangheem/ui/surah_screen.dart';
import 'package:tangheem/ui/tangheem_screen.dart';
import 'package:tangheem/widgets/common_dropdown_button.dart';
class HomeScreen extends StatefulWidget {
@ -67,7 +68,17 @@ class _HomeScreenState extends State<HomeScreen> {
],
),
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<HomeScreen> {
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,

282
lib/ui/search_screen.dart
Unescape Escape View File

@ -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<SearchScreen> {
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),
],
),
);
}
}

168
lib/ui/surah_screen.dart
Unescape Escape View File

@ -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<SurahScreen> {
@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),
],
),
);
}
}

245
lib/ui/tangheem_screen.dart
Unescape Escape View File

@ -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<TangheemScreen> {
List<TempModel> temp1 = List();
List<TempModel> 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<TempModel> 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);
}

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

@ -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<AyaPlayerWidget> {
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);
}
}

153
lib/widgets/common_appbar_widget.dart
Unescape Escape View File

@ -107,33 +107,108 @@ class _CommonAppbarWidgetState extends State<CommonAppbarWidget> {
],
),
),
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<CommonAppbarWidget> {
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),
],
),
);
}
}

Write Preview
Loading…
Cancel
Save