|
|
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);
|
|
|
}
|