menu dialog & pdf screen, landscape ui changed.

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

@ -23,48 +23,19 @@ class AppMenuDialog extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
bool isPortrait = MediaQuery.of(context).orientation == Orientation.portrait; bool isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;
return BackdropFilter( Widget _operationButtons = Row(
filter: ImageFilter.blur(sigmaX: 4, sigmaY: 4),
child: Dialog(
insetPadding: EdgeInsets.symmetric(horizontal: 60.0, vertical: 24.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
elevation: 0,
backgroundColor: Colors.transparent,
child: Container(
width: MediaQuery.of(context).size.width * 245 / 375,
decoration: BoxDecoration(
color: Colors.white.withOpacity(.91),
borderRadius: BorderRadius.circular(20),
),
child: SingleChildScrollView(
padding: EdgeInsets.all(12),
physics: BouncingScrollPhysics(),
child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
isPortrait ? 58.height : 24.height, menuOptions("assets/icons/new/bookmark.svg", isPortrait).onPress(() {
menuItem("الرئيسية", "assets/icons/new/home.svg", 0),
Container(width: 50, height: 1, color: ColorConsts.greyB5Color).paddingOnly(top: 16, bottom: 16),
menuItem("عن الموسوعة", "assets/icons/new/intro.svg", 1),
Container(width: 50, height: 1, color: ColorConsts.greyB5Color).paddingOnly(top: 16, bottom: 16),
menuItem("اللجنة الإشرافية", "assets/icons/new/members.svg", 4),
Container(width: 50, height: 1, color: ColorConsts.greyB5Color).paddingOnly(top: 16, bottom: 16),
menuItem("قراءة القرآن الكريم", "assets/icons/new/quran.svg", 2),
Row(
mainAxisSize: MainAxisSize.min,
children: [
menuOptions("assets/icons/new/bookmark.svg").onPress(() {
Navigator.pop(context); Navigator.pop(context);
Navigator.pushNamed(context, BookmarkScreen.routeName); Navigator.pushNamed(context, BookmarkScreen.routeName);
}), }),
14.width, 14.width,
menuOptions("assets/icons/new/zoom_in.svg").onPress(onFontIncrease), menuOptions("assets/icons/new/zoom_in.svg", isPortrait).onPress(onFontIncrease),
14.width, 14.width,
menuOptions("assets/icons/new/zoom_out.svg").onPress(onFontDecrease), menuOptions("assets/icons/new/zoom_out.svg", isPortrait).onPress(onFontDecrease),
14.width, 14.width,
menuOptions("assets/icons/new/user_acount.svg").onPress(() { menuOptions("assets/icons/new/user_acount.svg", isPortrait).onPress(() {
Navigator.pop(context); Navigator.pop(context);
if (AppState().isUserLogin) { if (AppState().isUserLogin) {
Navigator.pushNamed(context, UserProfileScreen.routeName); Navigator.pushNamed(context, UserProfileScreen.routeName);
@ -72,8 +43,9 @@ class AppMenuDialog extends StatelessWidget {
Navigator.pushNamed(context, LoginScreen.routeName); Navigator.pushNamed(context, LoginScreen.routeName);
}), }),
], ],
).paddingOnly(top: 32, bottom: 32), );
Container(
Widget _pdfButton = Container(
height: 26, height: 26,
padding: EdgeInsets.only(right: 16, left: 12), padding: EdgeInsets.only(right: 16, left: 12),
decoration: BoxDecoration( decoration: BoxDecoration(
@ -84,40 +56,93 @@ class AppMenuDialog extends StatelessWidget {
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
Icon(Icons.play_arrow_outlined, size: 20, color: Colors.white), Icon(Icons.play_arrow_outlined, size: 20, color: Colors.white),
"تصفح وتحميل الموسوعة".toText(13), "تصفح وتحميل الموسوعة".toText(isPortrait ? 13 : 16),
], ],
), ),
).onPress(() { ).onPress(() {
goToIndex(5); goToIndex(5);
}) });
return BackdropFilter(
filter: ImageFilter.blur(sigmaX: 4, sigmaY: 4),
child: Dialog(
insetPadding: EdgeInsets.symmetric(horizontal: 60.0, vertical: 24.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
elevation: 0,
backgroundColor: Colors.transparent,
child: Container(
width: MediaQuery.of(context).size.width * 245 / 375,
decoration: BoxDecoration(
color: Colors.white.withOpacity(.91),
borderRadius: BorderRadius.circular(20),
),
child: isPortrait
? SingleChildScrollView(
padding: EdgeInsets.all(12),
physics: BouncingScrollPhysics(),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
isPortrait ? 58.height : 24.height,
menuItem("الرئيسية", "assets/icons/new/home.svg", 0, isPortrait),
Container(width: 50, height: 1, color: ColorConsts.greyB5Color).paddingOnly(top: 16, bottom: 16),
menuItem("عن الموسوعة", "assets/icons/new/intro.svg", 1, isPortrait),
Container(width: 50, height: 1, color: ColorConsts.greyB5Color).paddingOnly(top: 16, bottom: 16),
menuItem("اللجنة الإشرافية", "assets/icons/new/members.svg", 4, isPortrait),
Container(width: 50, height: 1, color: ColorConsts.greyB5Color).paddingOnly(top: 16, bottom: 16),
menuItem("قراءة القرآن الكريم", "assets/icons/new/quran.svg", 2, isPortrait),
_operationButtons.paddingOnly(top: 32, bottom: 32),
_pdfButton
], ],
), ),
)
: Column(
mainAxisSize: MainAxisSize.min,
children: [
_operationButtons.paddingOnly(top: 20, bottom: 32),
Row(
mainAxisSize: MainAxisSize.min,
children: [
menuItem("الرئيسية", "assets/icons/new/home.svg", 0, isPortrait),
Container(width: 1, height: 50, color: ColorConsts.greyB5Color).paddingOnly(left: 20, right: 20),
menuItem("عن الموسوعة", "assets/icons/new/intro.svg", 1, isPortrait),
Container(width: 1, height: 50, color: ColorConsts.greyB5Color).paddingOnly(left: 20, right: 20),
menuItem("اللجنة الإشرافية", "assets/icons/new/members.svg", 4, isPortrait),
Container(width: 1, height: 50, color: ColorConsts.greyB5Color).paddingOnly(left: 20, right: 20),
menuItem("قراءة القرآن الكريم", "assets/icons/new/quran.svg", 2, isPortrait),
],
), ),
32.height,
_pdfButton
],
).paddingAll(12),
), ),
), ),
); );
} }
Widget menuOptions(String icon) { Widget menuOptions(String icon, bool isPortrait) {
return SvgPicture.asset( return SvgPicture.asset(
icon, icon,
width: 25, width: isPortrait ? 25 : 30,
height: 25, height: isPortrait ? 25 : 30,
color: ColorConsts.greyBAColor, color: ColorConsts.greyBAColor,
); );
} }
Widget menuItem(String title, String icon, int index) { Widget menuItem(String title, String icon, int index, bool isPortrait) {
return Column( return Column(
children: [ children: [
SvgPicture.asset( SvgPicture.asset(
icon, icon,
width: 25, width: isPortrait ? 25 : 30,
height: 25, height: isPortrait ? 25 : 30,
color: ColorConsts.darkText, color: ColorConsts.darkText,
), ),
6.height, isPortrait ? 6.height : 12.height,
title.toText(13, color: ColorConsts.darkText) title.toText(isPortrait ? 13 : 16, color: ColorConsts.darkText)
], ],
).onPress(() => goToIndex(index)); ).onPress(() => goToIndex(index));
} }

@ -93,22 +93,16 @@ class _PdfListScreenState extends State<PdfListScreen> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return SizedBox( bool isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;
height: double.infinity,
child: SingleChildScrollView( Widget _header = SizedBox(height: isPortrait ? null : double.infinity, width: double.infinity, child: CommonHeader("التصفح والتحميل", "assets/icons/new/pdf_bg.jpg", Color(0xffAE8646)));
physics: const AlwaysScrollableScrollPhysics(),
padding: EdgeInsets.only(bottom: 140), Widget _dataListView = contentList?.isEmpty ?? true
child: Column(
children: [
CommonHeader("التصفح والتحميل", "assets/icons/new/pdf_bg.jpg", Color(0xffAE8646)),
contentList == null
? SizedBox()
: contentList.isEmpty
? NoDataUI() ? NoDataUI()
: ListView.separated( : ListView.separated(
physics: const NeverScrollableScrollPhysics(), physics: isPortrait ? const NeverScrollableScrollPhysics() : const AlwaysScrollableScrollPhysics(),
shrinkWrap: true, shrinkWrap: isPortrait,
padding: EdgeInsets.only(left: 35, right: 35, top: 35, bottom: 0), padding: EdgeInsets.only(left: isPortrait ? 35 : 0, right: isPortrait ? 35 : 24, top: 35, bottom: 0),
itemCount: contentList.length, itemCount: contentList.length,
separatorBuilder: (context, index) { separatorBuilder: (context, index) {
return Divider(color: Color(0xffC7C7C7), height: 1, thickness: 1).paddingOnly(top: 14, bottom: 14); return Divider(color: Color(0xffC7C7C7), height: 1, thickness: 1).paddingOnly(top: 14, bottom: 14);
@ -174,16 +168,35 @@ class _PdfListScreenState extends State<PdfListScreen> {
), ),
); );
}, },
), );
if ((haqooqAlMosasa?.length ?? 0) > 0)
Column( Widget _aboutView = Column(
mainAxisSize: MainAxisSize.min,
children: [ children: [
"حقوق الموسوعة".toText(13, color: ColorConsts.greyLightColor), "حقوق الموسوعة".toText(isPortrait ? 13 : 16, color: ColorConsts.greyLightColor),
for (ContentInfoDataModel text in haqooqAlMosasa) text.content.toText(13, color: ColorConsts.greyLightColor, textAlign: TextAlign.center) for (ContentInfoDataModel text in haqooqAlMosasa) text.content.toText(13, color: ColorConsts.greyLightColor, textAlign: TextAlign.center)
], ],
).paddingOnly(left: 35, right: 35, top: 35), );
return SizedBox(
height: double.infinity,
child: isPortrait
? SingleChildScrollView(
physics: const AlwaysScrollableScrollPhysics(),
padding: EdgeInsets.only(bottom: 140),
child: Column(
children: [
_header,
contentList == null ? SizedBox() : _dataListView,
if ((haqooqAlMosasa?.length ?? 0) > 0) _aboutView.paddingOnly(left: 35, right: 35, top: 35),
], ],
), ),
)
: Row(
children: [
Expanded(child: ((haqooqAlMosasa?.length ?? 0) > 0) ? _aboutView.paddingOnly(left: 35, right: isPortrait ? 35 : 24, top: isPortrait ? 35 : 24) : SizedBox(), flex: 3),
Expanded(child: contentList == null ? SizedBox() : _dataListView, flex: 3),
Expanded(child: _header, flex: 4),
],
), ),
); );
} }

Loading…
Cancel
Save