bookmark, change password, member & user profile screen added.

development-design-2.0
Sikander Saleem 3 years ago
parent a1041637d0
commit f9706254d5

@ -58,95 +58,164 @@ class _BookmarkScreenState extends State<BookmarkScreen> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Stack( bool isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;
Widget _header = Stack(
alignment: Alignment.center,
children: [ children: [
Stack( SizedBox(
alignment: Alignment.center, height: isPortrait ? null : double.infinity,
width: double.infinity,
child: AspectRatio(
aspectRatio: 375 / 215,
child: Image.asset("assets/icons/new/quran_bg.jpg", fit: BoxFit.cover, alignment: Alignment(isPortrait ? -0.3 : -0.45, 0.5)),
),
),
Column(
mainAxisSize: MainAxisSize.min,
children: [ children: [
AspectRatio( Image.asset('assets/icons/new/Tangeem-logo-W.png', width: 50),
aspectRatio: 375 / 215, 26.height,
child: Image.asset("assets/icons/new/quran_bg.jpg", fit: BoxFit.cover, alignment: Alignment(-0.3, 0.5)), "المرجعية".toText(30),
),
Column(
mainAxisSize: MainAxisSize.min,
children: [
Image.asset('assets/icons/new/Tangeem-logo-W.png', width: 50),
26.height,
"المرجعية".toText(30),
],
).paddingOnly(top: 16),
], ],
), ).paddingOnly(top: 16),
_bookMarkList.isEmpty ],
? NoDataUI().paddingOnly(top: 215) );
: ListView.separated(
physics: BouncingScrollPhysics(), Widget _dataListView = (_bookMarkList?.isEmpty ?? true)
padding: EdgeInsets.only(left: 24, right: 24, top: 215, bottom: 24), ? NoDataUI().paddingOnly(top: isPortrait ? 215 : 0)
itemCount: _bookMarkList.length, : ListView.separated(
separatorBuilder: (context, index) { physics: isPortrait ? NeverScrollableScrollPhysics() : null,
return SizedBox(height: 8); shrinkWrap: isPortrait,
}, padding: EdgeInsets.all(24),
itemBuilder: (context, index) { itemCount: _bookMarkList.length,
return Slidable( separatorBuilder: (context, index) => 12.height,
controller: _slidableController, itemBuilder: (context, index) {
actionPane: SlidableBehindActionPane(), return Row(children: [
secondaryActions: <Widget>[ Container(
ClipRRect( width: double.infinity,
borderRadius: BorderRadius.circular(20), padding: EdgeInsets.symmetric(vertical: 6, horizontal: 12),
child: IconSlideAction( decoration: BoxDecoration(
color: Colors.redAccent, borderRadius: BorderRadius.circular(20),
icon: Icons.delete, border: Border.all(color: ColorConsts.greyLightColor, width: 1),
closeOnTap: true, ),
onTap: () { child: Column(
_bookMarkList.removeAt(index); crossAxisAlignment: CrossAxisAlignment.start,
BookMarkModel.saveToPrefs(_bookMarkList); mainAxisSize: MainAxisSize.min,
Utils.showToast("تم حذف المرجع"); children: [
setState(() {}); Row(
}, mainAxisSize: MainAxisSize.min,
), children: [
Icon(Icons.bookmark, color: ColorConsts.dark2Text, size: 18),
8.width,
(_bookMarkList[index].surahNameAR).toText(16, color: ColorConsts.darkText),
12.width,
Text(
"الآية رقم ${_bookMarkList[index].numberInSurah}",
style: TextStyle(fontSize: 14, color: ColorConsts.brownB7Color),
),
],
), ),
// Text(
// _bookMarkList[index].reverseAyatNumber(),
// textAlign: TextAlign.start,
// style: TextStyle(
// fontFamily: "UthmanicHafs",
// fontSize: 16,
// color: ColorConsts.primaryBlue,
// fontWeight: FontWeight.bold,
// ),
// ),
], ],
child: Container( ),
width: double.infinity, ).onPress(() {
padding: EdgeInsets.fromLTRB(12, 12, 12, 12), Navigator.pushNamed(context, QuranScreen.routeName, arguments: _bookMarkList[index]);
decoration: BoxDecoration( }).expanded,
color: Colors.white, 12.width,
borderRadius: BorderRadius.circular(20), Icon(Icons.cancel_outlined, color: ColorConsts.greyLightColor).onPress(() {
border: Border.all(color: ColorConsts.greyE0Color, width: 1), _bookMarkList.removeAt(index);
), BookMarkModel.saveToPrefs(_bookMarkList);
child: Column( Utils.showToast("تم حذف المرجع");
crossAxisAlignment: CrossAxisAlignment.start, setState(() {});
}),
8.width,
Icon(Icons.arrow_forward_ios_rounded, color: ColorConsts.brownB7Color).onPress(() {
Navigator.pushNamed(context, QuranScreen.routeName, arguments: _bookMarkList[index]);
}),
]);
return Slidable(
controller: _slidableController,
actionPane: SlidableBehindActionPane(),
secondaryActions: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(20),
child: IconSlideAction(
color: Colors.redAccent,
icon: Icons.delete,
closeOnTap: true,
onTap: () {
_bookMarkList.removeAt(index);
BookMarkModel.saveToPrefs(_bookMarkList);
Utils.showToast("تم حذف المرجع");
setState(() {});
},
),
),
],
child: Container(
width: double.infinity,
padding: EdgeInsets.fromLTRB(12, 12, 12, 12),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
border: Border.all(color: ColorConsts.greyE0Color, width: 1),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
Row( (_bookMarkList[index].surahNameAR + ":").toText(12, color: ColorConsts.primaryBlue),
mainAxisSize: MainAxisSize.min,
children: [
(_bookMarkList[index].surahNameAR + ":").toText(12, color: ColorConsts.primaryBlue),
Text(
" ${_bookMarkList[index].numberInSurah}",
style: TextStyle(fontSize: 14, fontFamily: "BArabics", color: ColorConsts.secondaryOrange),
),
],
),
Text( Text(
_bookMarkList[index].reverseAyatNumber(), " ${_bookMarkList[index].numberInSurah}",
textAlign: TextAlign.start, style: TextStyle(fontSize: 14, fontFamily: "BArabics", color: ColorConsts.secondaryOrange),
style: TextStyle(
fontFamily: "UthmanicHafs",
fontSize: 16,
color: ColorConsts.primaryBlue,
fontWeight: FontWeight.bold,
),
), ),
], ],
), ),
).onPress(() { Text(
Navigator.pushNamed(context, QuranScreen.routeName, arguments: _bookMarkList[index]); _bookMarkList[index].reverseAyatNumber(),
}), textAlign: TextAlign.start,
); style: TextStyle(
}, fontFamily: "UthmanicHafs",
fontSize: 16,
color: ColorConsts.primaryBlue,
fontWeight: FontWeight.bold,
),
),
],
),
).onPress(() {
Navigator.pushNamed(context, QuranScreen.routeName, arguments: _bookMarkList[index]);
}),
);
},
);
return SizedBox(
height: double.infinity,
child: isPortrait
? SingleChildScrollView(
child: Column(
children: [_header, _dataListView],
), ),
], )
: Row(
children: [
Expanded(child: _header, flex: 4),
Expanded(child: _dataListView, flex: 6),
],
),
); );
} }
} }

@ -65,6 +65,47 @@ class _ChangePasswordScreenState extends State<ChangePasswordScreen> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
bool isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;
List<Widget> _actionsList = [
"تغيير كلمة المرور".toText(20),
24.height,
LoginTextFieldWidget(hint: "كلمة المرور الحالية", controller: _currentPasswordController, iconData: Icons.lock_rounded, isPassword: true, isForChangePassword: true),
10.height,
LoginTextFieldWidget(hint: "كلمة المرور الجديدة", controller: _passwordController, iconData: Icons.lock_rounded, isForChangePassword: true),
10.height,
LoginTextFieldWidget(hint: "تأكيد كلمة المرور الجديدة", controller: _confirmPasswordController, iconData: Icons.lock_rounded, isPassword: true, isForChangePassword: true),
16.height,
Container(
height: 45,
// width: 165,
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(32),
border: Border.all(color: ColorConsts.brownLightColor, width: 2),
),
child: "إعادة تعيين كلمة لمرور".toText(13),
).onPress(() {
if (_currentPasswordController.text.length < 1) {
Utils.showToast("يرجى إاخال كلمة المرور");
return;
}
if (_passwordController.text.length < 1) {
Utils.showToast("يرجى إاخال كلمة المرور");
return;
}
if (_confirmPasswordController.text.length < 1) {
Utils.showToast("يرجى تأكيد كلمة المرور");
return;
}
if (_passwordController.text != _confirmPasswordController.text) {
Utils.showToast("خطأ في تطابق كلمات المرور");
return;
}
updatePassword(AppState().userEmail, _currentPasswordController.text, _passwordController.text);
}),
];
return SizedBox( return SizedBox(
width: double.infinity, width: double.infinity,
child: Stack( child: Stack(
@ -73,69 +114,57 @@ class _ChangePasswordScreenState extends State<ChangePasswordScreen> {
Image.asset( Image.asset(
"assets/icons/new/home_dark.jpg", "assets/icons/new/home_dark.jpg",
fit: BoxFit.cover, fit: BoxFit.cover,
height: double.infinity, height: isPortrait ? double.infinity : null,
width: isPortrait ? null : double.infinity,
opacity: const AlwaysStoppedAnimation(1), opacity: const AlwaysStoppedAnimation(1),
), ),
Container(color: ColorConsts.darkText.withOpacity(0.8)), Container(color: ColorConsts.darkText.withOpacity(0.8)),
Column( isPortrait
mainAxisSize: MainAxisSize.min, ? Column(
children: [ mainAxisSize: MainAxisSize.min,
100.height, children: [
Image.asset('assets/icons/new/Tangeem-logo-W.png', width: 50), 100.height,
100.height, Image.asset('assets/icons/new/Tangeem-logo-W.png', width: 50),
Container( 100.height,
width: 54, Container(
height: 54, width: 54,
decoration: BoxDecoration( height: 54,
shape: BoxShape.circle, decoration: BoxDecoration(
color: ColorConsts.dark2Text, shape: BoxShape.circle,
), color: ColorConsts.dark2Text,
child: SvgPicture.asset( ),
"assets/icons/new/user_acount.svg", child: SvgPicture.asset(
color: Colors.white, "assets/icons/new/user_acount.svg",
), color: Colors.white,
), ),
14.height, ),
(AppState().userName ?? "").toText(18), 14.height,
50.height, (AppState().userName ?? "").toText(18),
"تغيير كلمة المرور".toText(20), 50.height,
24.height, ..._actionsList,
LoginTextFieldWidget(hint: "كلمة المرور الحالية", controller: _currentPasswordController, iconData: Icons.lock_rounded, isPassword: true, isForChangePassword: true), ],
10.height, ).paddingOnly(left: 65, right: 65)
LoginTextFieldWidget(hint: "كلمة المرور الجديدة", controller: _passwordController, iconData: Icons.lock_rounded, isForChangePassword: true), : Row(
10.height, children: [
LoginTextFieldWidget(hint: "تأكيد كلمة المرور الجديدة", controller: _confirmPasswordController, iconData: Icons.lock_rounded, isPassword: true, isForChangePassword: true), Column(
16.height, mainAxisSize: MainAxisSize.min,
Container( children: [
height: 45, Container(
// width: 165, width: 78,
alignment: Alignment.center, height: 78,
decoration: BoxDecoration( decoration: BoxDecoration(shape: BoxShape.circle, color: ColorConsts.dark2Text),
borderRadius: BorderRadius.circular(32), child: SvgPicture.asset(
border: Border.all(color: ColorConsts.brownLightColor, width: 2), "assets/icons/new/user_acount.svg",
), color: Colors.white,
child: "إعادة تعيين كلمة لمرور".toText(13), ),
).onPress(() { ),
if (_currentPasswordController.text.length < 1) { 14.height,
Utils.showToast("يرجى إاخال كلمة المرور"); (AppState().userName ?? "").toText(25),
return; ],
} ).expanded,
if (_passwordController.text.length < 1) { Column(mainAxisAlignment: MainAxisAlignment.center, children: _actionsList).expanded
Utils.showToast("يرجى إاخال كلمة المرور"); ],
return; ).paddingOnly(right: 65, left: 65),
}
if (_confirmPasswordController.text.length < 1) {
Utils.showToast("يرجى تأكيد كلمة المرور");
return;
}
if (_passwordController.text != _confirmPasswordController.text) {
Utils.showToast("خطأ في تطابق كلمات المرور");
return;
}
updatePassword(AppState().userEmail, _currentPasswordController.text, _passwordController.text);
})
],
).paddingOnly(left: 65, right: 65),
], ],
), ),
); );

@ -55,7 +55,7 @@ class _MemberScreenState extends State<MemberScreen> {
bool isPortrait = MediaQuery.of(context).orientation == Orientation.portrait; bool isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;
Widget _header = SizedBox(height: isPortrait ? null : double.infinity, width: double.infinity, child: CommonHeader("اللجنة الإشرافية", "assets/icons/new/commette_bg.jpg", Color(0xff416A6C))); Widget _header = SizedBox(height: isPortrait ? null : double.infinity, width: double.infinity, child: CommonHeader("اللجنة الإشرافية", "assets/icons/new/commette_bg.jpg", Color(0xff416A6C)));
Widget _dataListView = membersList.isEmpty Widget _dataListView = membersList?.isEmpty ?? true
? NoDataUI() ? NoDataUI()
: ListView.separated( : ListView.separated(
physics: const NeverScrollableScrollPhysics(), physics: const NeverScrollableScrollPhysics(),

@ -55,6 +55,38 @@ class _UserProfileScreenState extends State<UserProfileScreen> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
bool isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;
List<Widget> _actionsList = [
button("تغيير كلمة المرور", isPortrait).onPress(() {
Navigator.pushNamed(context, ChangePasswordScreen.routeName);
}),
Container(width: 50, height: 1, color: ColorConsts.dark99Text).paddingOnly(top: 15, bottom: 15),
button("تسجيل الخروج", isPortrait).onPress(() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
await prefs.remove(GlobalConsts.userAuthData);
AppState().setAuthenticationModel(null);
Utils.showToast("تسجيل خروج المستخدم");
Navigator.pop(context);
}),
Container(width: 50, height: 1, color: ColorConsts.dark99Text).paddingOnly(top: 15, bottom: 15),
button("حذف الحساب", isPortrait).onPress(() {
showDialog(
context: context,
barrierColor: Colors.white.withOpacity(0.2),
builder: (BuildContext context) => GeneralDialog(
message: "هل تود حذف حسابك عبر تطبيق تنغيم؟",
backgroundColor: Color(0xff598A8D),
buttonTitle: "تأكيد الحذف",
buttonBorderColor: ColorConsts.brownLightColor,
onTap: () {
Navigator.pop(context);
deleteUserAccount();
},
),
);
}),
];
return SizedBox( return SizedBox(
width: double.infinity, width: double.infinity,
child: Stack( child: Stack(
@ -63,70 +95,68 @@ class _UserProfileScreenState extends State<UserProfileScreen> {
Image.asset( Image.asset(
"assets/icons/new/home_dark.jpg", "assets/icons/new/home_dark.jpg",
fit: BoxFit.cover, fit: BoxFit.cover,
height: double.infinity, height: isPortrait ? double.infinity : null,
width: isPortrait ? null : double.infinity,
opacity: const AlwaysStoppedAnimation(1), opacity: const AlwaysStoppedAnimation(1),
), ),
Container(color: ColorConsts.darkText.withOpacity(0.8)), Container(color: ColorConsts.darkText.withOpacity(0.8)),
Column( isPortrait
mainAxisSize: MainAxisSize.min, ? Column(
children: [ mainAxisSize: MainAxisSize.min,
100.height, children: [
Image.asset('assets/icons/new/Tangeem-logo-W.png', width: 50), 100.height,
100.height, Image.asset('assets/icons/new/Tangeem-logo-W.png', width: 50),
Container( 100.height,
width: 78, Container(
height: 78, width: 78,
decoration: BoxDecoration( height: 78,
shape: BoxShape.circle, decoration: BoxDecoration(
color: ColorConsts.dark2Text, shape: BoxShape.circle,
), color: ColorConsts.dark2Text,
child: SvgPicture.asset( ),
"assets/icons/new/user_acount.svg", child: SvgPicture.asset(
color: Colors.white, "assets/icons/new/user_acount.svg",
), color: Colors.white,
), ),
14.height, ),
(AppState().userName ?? "").toText(25), 14.height,
50.height, (AppState().userName ?? "").toText(25),
button("تغيير كلمة المرور").onPress(() { 50.height,
Navigator.pushNamed(context, ChangePasswordScreen.routeName); ..._actionsList
}), ],
Container(width: 50, height: 1, color: ColorConsts.dark99Text).paddingOnly(top: 15, bottom: 15), )
button("تسجيل الخروج").onPress(() async { : Row(
SharedPreferences prefs = await SharedPreferences.getInstance(); children: [
await prefs.remove(GlobalConsts.userAuthData); Column(
AppState().setAuthenticationModel(null); mainAxisAlignment: MainAxisAlignment.center,
Utils.showToast("تسجيل خروج المستخدم"); children: [
Navigator.pop(context); Image.asset('assets/icons/new/Tangeem-logo-W.png', width: 75),
}), 30.height,
Container(width: 50, height: 1, color: ColorConsts.dark99Text).paddingOnly(top: 15, bottom: 15), Container(
button("حذف الحساب").onPress(() { width: 78,
showDialog( height: 78,
context: context, decoration: BoxDecoration(shape: BoxShape.circle, color: ColorConsts.dark2Text),
barrierColor: Colors.white.withOpacity(0.2), child: SvgPicture.asset(
builder: (BuildContext context) => GeneralDialog( "assets/icons/new/user_acount.svg",
message: "هل تود حذف حسابك عبر تطبيق تنغيم؟", color: Colors.white,
backgroundColor: Color(0xff598A8D), ),
buttonTitle: "تأكيد الحذف", ),
buttonBorderColor: ColorConsts.brownLightColor, 24.height,
onTap: () { (AppState().userName ?? "").toText(25),
Navigator.pop(context); ],
deleteUserAccount(); ).expanded,
}, Column(mainAxisAlignment: MainAxisAlignment.center, children: _actionsList).expanded,
), ],
); ).paddingOnly(right: 36, left: 36),
}),
],
),
], ],
), ),
); );
} }
Widget button(String title) { Widget button(String title, bool isPortrait) {
return Container( return Container(
height: 36, height: 36,
width: 165, width: isPortrait ? 165 : 200,
alignment: Alignment.center, alignment: Alignment.center,
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: BorderRadius.circular(32), borderRadius: BorderRadius.circular(32),

Loading…
Cancel
Save