From 42362c41fa2c79218db35be0bcb51a326ee60821 Mon Sep 17 00:00:00 2001 From: MohammadTaha Basiri Date: Thu, 16 Dec 2021 13:57:46 +0330 Subject: [PATCH] D1APP-29 profile (static) --- lib/config/design_config.dart | 23 +++-- .../authentication/screens/verification.dart | 2 +- lib/pages/home/home.dart | 2 +- .../profile/edit_profile/edit_profile.dart | 10 +++ lib/pages/home/profile/profile.dart | 89 ++++++++++++++++++- lib/pages/home/profile/widgets/menu_item.dart | 40 +++++++++ lib/pages/home/radar/radar.dart | 16 +--- .../home/radar/widgets/search_field.dart | 7 +- .../widgets/{didvan_bnb.dart => bnb.dart} | 0 lib/pages/home/widgets/logo_app_bar.dart | 23 +++++ lib/widgets/didvan/card.dart | 20 +++++ lib/widgets/didvan/divider.dart | 16 ++++ lib/widgets/didvan/text.dart | 2 +- lib/widgets/didvan/text_field.dart | 4 +- lib/widgets/item_title.dart | 35 ++++++++ 15 files changed, 258 insertions(+), 31 deletions(-) create mode 100644 lib/pages/home/profile/edit_profile/edit_profile.dart create mode 100644 lib/pages/home/profile/widgets/menu_item.dart rename lib/pages/home/widgets/{didvan_bnb.dart => bnb.dart} (100%) create mode 100644 lib/pages/home/widgets/logo_app_bar.dart create mode 100644 lib/widgets/didvan/card.dart create mode 100644 lib/widgets/didvan/divider.dart create mode 100644 lib/widgets/item_title.dart diff --git a/lib/config/design_config.dart b/lib/config/design_config.dart index b609d7c..9188728 100644 --- a/lib/config/design_config.dart +++ b/lib/config/design_config.dart @@ -2,13 +2,17 @@ import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; class DesignConfig { + static const backgroundColor = Color(0XFFF8F8FA); + static const Color lightPrimaryColor2 = Color(0XFFE6F3FA); static const Color lightPrimaryColor3 = Color(0XFFF5FAFC); static const Color primaryColor = Color(0XFF007EA7); static const Color darkPrimaryColor2 = Color(0XFF1B3C59); - static const Color greyColor4 = Color(0XFFE0E0E0); - static const Color greyColor5 = Color(0XFFE0E0E0); + static const Color cardBorderColor = Color(0XFFEBEBEB); + static const Color borderColor = Color(0XFFE0E0E0); + static const Color hintColor = Color(0XFFE0E0E0); + static const Color captionColor = Color(0XFF666666); static const Color lightRedColor = Color(0XFFFFF8F8); @@ -18,11 +22,12 @@ class DesignConfig { fontFamily: 'Dana-FA', textTheme: const TextTheme( bodyText1: body1Text, - bodyText2: body1Text, + bodyText2: body2Text, caption: captionText, subtitle2: subtitle2Text, subtitle1: subtitle1Text, ), + scaffoldBackgroundColor: backgroundColor, ); static const ColorScheme lightColorScheme = ColorScheme( @@ -31,7 +36,7 @@ class DesignConfig { secondary: Color(0XFFD61515), secondaryVariant: Color(0XFFA30001), surface: Colors.white, - background: Color(0XFFF8F8FA), + background: backgroundColor, error: Color(0XFFF00505), onPrimary: Colors.white, onSecondary: Colors.white, @@ -52,10 +57,16 @@ class DesignConfig { fontWeight: FontWeight.w700, ); static const TextStyle body1Text = TextStyle( - fontSize: 14, + fontSize: 15, + fontWeight: FontWeight.w700, + ); + static const TextStyle body2Text = TextStyle( + fontSize: 15, + fontWeight: FontWeight.w400, ); static const TextStyle captionText = TextStyle( fontSize: 13, + color: captionColor, ); static const BorderRadius lowBorderRadius = BorderRadius.all( @@ -67,7 +78,7 @@ class DesignConfig { static const BorderRadius highBorderRadius = BorderRadius.all( Radius.circular(16), ); - static final Border lightBorder = Border.all(color: DesignConfig.greyColor4); + static final Border lightBorder = Border.all(color: DesignConfig.borderColor); static final BoxDecoration actionCardDecoration = BoxDecoration( color: lightPrimaryColor3, boxShadow: defaultShadow, diff --git a/lib/pages/authentication/screens/verification.dart b/lib/pages/authentication/screens/verification.dart index 3dd17b8..2ef4a59 100644 --- a/lib/pages/authentication/screens/verification.dart +++ b/lib/pages/authentication/screens/verification.dart @@ -47,7 +47,7 @@ class Verification extends StatelessWidget { pinTheme: PinTheme( fieldHeight: 48, fieldWidth: 48, - inactiveColor: DesignConfig.greyColor4, + inactiveColor: DesignConfig.borderColor, activeFillColor: Theme.of(context).primaryColorLight, activeColor: Theme.of(context).primaryColor, borderRadius: DesignConfig.lowBorderRadius, diff --git a/lib/pages/home/home.dart b/lib/pages/home/home.dart index eb84b4e..e6d8645 100644 --- a/lib/pages/home/home.dart +++ b/lib/pages/home/home.dart @@ -5,7 +5,7 @@ import 'package:didvan/pages/home/radar/radar.dart'; import 'package:didvan/pages/home/radar/radar_state.dart'; import 'package:didvan/pages/home/statistics/statistics.dart'; import 'package:didvan/pages/home/studio/studio.dart'; -import 'package:didvan/pages/home/widgets/didvan_bnb.dart'; +import 'package:didvan/pages/home/widgets/bnb.dart'; import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; diff --git a/lib/pages/home/profile/edit_profile/edit_profile.dart b/lib/pages/home/profile/edit_profile/edit_profile.dart new file mode 100644 index 0000000..8f0cfff --- /dev/null +++ b/lib/pages/home/profile/edit_profile/edit_profile.dart @@ -0,0 +1,10 @@ +import 'package:flutter/material.dart'; + +class EditProfile extends StatelessWidget { + const EditProfile({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return const Scaffold(); + } +} diff --git a/lib/pages/home/profile/profile.dart b/lib/pages/home/profile/profile.dart index 980fc84..7ddfd0f 100644 --- a/lib/pages/home/profile/profile.dart +++ b/lib/pages/home/profile/profile.dart @@ -1,3 +1,12 @@ +import 'package:didvan/config/design_config.dart'; +import 'package:didvan/constants/app_icons.dart'; +import 'package:didvan/pages/home/profile/widgets/menu_item.dart'; +import 'package:didvan/pages/home/widgets/logo_app_bar.dart'; +import 'package:didvan/routes/routes.dart'; +import 'package:didvan/widgets/didvan/card.dart'; +import 'package:didvan/widgets/didvan/divider.dart'; +import 'package:didvan/widgets/didvan/text.dart'; +import 'package:didvan/widgets/item_title.dart'; import 'package:flutter/material.dart'; class Profile extends StatelessWidget { @@ -5,6 +14,84 @@ class Profile extends StatelessWidget { @override Widget build(BuildContext context) { - return Container(); + return SingleChildScrollView( + padding: const EdgeInsets.all(16), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const LogoAppBar(hasExtraPadding: false), + const SizedBox(height: 16), + DidvanCard( + child: Column( + children: [ + MenuItem( + title: 'پیام‌ها', + icon: DidvanIcons.message_regular, + onTap: () => {}, + ), + const DidvanDivider(), + MenuItem( + title: 'ویرایش پروفایل', + icon: DidvanIcons.user_edit_regular, + onTap: () => {}, + ), + const DidvanDivider(), + MenuItem( + title: 'تنظیمات', + icon: DidvanIcons.setting_regular, + onTap: () => {}, + ), + const DidvanDivider(), + MenuItem( + title: 'نشان شده‌ها', + icon: DidvanIcons.bookmark_regular, + onTap: () => {}, + ), + const DidvanDivider(), + MenuItem( + title: 'پیام‌ها', + icon: DidvanIcons.sign_out_regular, + color: Theme.of(context).colorScheme.secondary, + onTap: () => {}, + ), + ], + ), + ), + const ItemTitle( + title: 'درباره ما', + icon: DidvanIcons.info_circle_regular, + ), + DidvanCard( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + MenuItem( + icon: DidvanIcons.didvan_solid, + title: 'معرفی دیدوان', + onTap: () => {}, + ), + const DidvanDivider(), + MenuItem( + icon: DidvanIcons.support_regular, + title: 'پیام به پشتیبانی', + onTap: () => {}, + ), + const DidvanDivider(), + MenuItem( + icon: DidvanIcons.alert_regular, + title: 'حریم خصوصی', + onTap: () => {}, + ), + ], + ), + ), + const SizedBox(height: 16), + DidvanText( + 'نسخه نرم‌افزار: آزمایشی', + style: Theme.of(context).textTheme.bodyText2, + ), + ], + ), + ); } } diff --git a/lib/pages/home/profile/widgets/menu_item.dart b/lib/pages/home/profile/widgets/menu_item.dart new file mode 100644 index 0000000..bfa8542 --- /dev/null +++ b/lib/pages/home/profile/widgets/menu_item.dart @@ -0,0 +1,40 @@ +import 'package:didvan/config/design_config.dart'; +import 'package:didvan/constants/app_icons.dart'; +import 'package:didvan/widgets/didvan/text.dart'; +import 'package:flutter/material.dart'; + +class MenuItem extends StatelessWidget { + final String title; + final IconData? icon; + final String? suffix; + final VoidCallback onTap; + final Color color; + const MenuItem({ + Key? key, + required this.title, + this.icon, + this.suffix, + required this.onTap, + this.color = DesignConfig.darkPrimaryColor2, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + return GestureDetector( + onTap: onTap, + child: Row( + children: [ + if (icon != null) Icon(icon, size: 18, color: color), + if (icon != null) const SizedBox(width: 4), + DidvanText(title, color: color), + const Spacer(), + Icon( + DidvanIcons.angle_left_regular, + size: 18, + color: color, + ), + ], + ), + ); + } +} diff --git a/lib/pages/home/radar/radar.dart b/lib/pages/home/radar/radar.dart index acd3f16..3921214 100644 --- a/lib/pages/home/radar/radar.dart +++ b/lib/pages/home/radar/radar.dart @@ -2,8 +2,8 @@ import 'package:didvan/config/design_config.dart'; import 'package:didvan/pages/home/radar/widgets/categories_gird.dart'; import 'package:didvan/pages/home/radar/widgets/categories_list.dart'; import 'package:didvan/pages/home/radar/widgets/search_field.dart'; +import 'package:didvan/pages/home/widgets/logo_app_bar.dart'; import 'package:didvan/widgets/didvan/text.dart'; -import 'package:didvan/widgets/logos/didvan_vertical_logo.dart'; import 'package:flutter/material.dart'; class Radar extends StatefulWidget { @@ -29,7 +29,6 @@ class _RadarState extends State { @override Widget build(BuildContext context) { - final d = MediaQuery.of(context); return Scaffold( body: Stack( children: [ @@ -42,18 +41,7 @@ class _RadarState extends State { child: CustomScrollView( controller: _scrollController, slivers: [ - SliverPadding( - padding: const EdgeInsets.all( - 20, - ).copyWith(top: d.padding.top + 20), - sliver: SliverToBoxAdapter( - child: Container( - alignment: Alignment.centerRight, - height: 76, - child: const DidvanHorizontalLogo(), - ), - ), - ), + const SliverToBoxAdapter(child: LogoAppBar()), const SliverPadding( padding: EdgeInsets.symmetric(horizontal: 16), sliver: SliverToBoxAdapter( diff --git a/lib/pages/home/radar/widgets/search_field.dart b/lib/pages/home/radar/widgets/search_field.dart index 0b78189..dae26aa 100644 --- a/lib/pages/home/radar/widgets/search_field.dart +++ b/lib/pages/home/radar/widgets/search_field.dart @@ -51,7 +51,7 @@ class _SearchFieldState extends State { Radius.circular(4), ), borderSide: BorderSide( - color: DesignConfig.greyColor4, + color: DesignConfig.borderColor, ), ), fillColor: Colors.red, @@ -62,10 +62,7 @@ class _SearchFieldState extends State { ), border: InputBorder.none, hintText: 'جستجو مطلب در رادار', - hintStyle: Theme.of(context) - .textTheme - .subtitle2! - .copyWith(color: DesignConfig.greyColor5), + hintStyle: const TextStyle(color: DesignConfig.hintColor), ), ), ); diff --git a/lib/pages/home/widgets/didvan_bnb.dart b/lib/pages/home/widgets/bnb.dart similarity index 100% rename from lib/pages/home/widgets/didvan_bnb.dart rename to lib/pages/home/widgets/bnb.dart diff --git a/lib/pages/home/widgets/logo_app_bar.dart b/lib/pages/home/widgets/logo_app_bar.dart new file mode 100644 index 0000000..b8f2803 --- /dev/null +++ b/lib/pages/home/widgets/logo_app_bar.dart @@ -0,0 +1,23 @@ +import 'package:didvan/widgets/logos/didvan_vertical_logo.dart'; +import 'package:flutter/material.dart'; + +class LogoAppBar extends StatelessWidget { + final bool hasExtraPadding; + const LogoAppBar({Key? key, this.hasExtraPadding = true}) : super(key: key); + + @override + Widget build(BuildContext context) { + final MediaQueryData d = MediaQuery.of(context); + final double extraPadding = hasExtraPadding ? 0 : 16; + return Container( + padding: EdgeInsets.only( + left: 140 - extraPadding, + top: d.padding.top + 16 - extraPadding, + bottom: 16 - extraPadding, + right: 16 - extraPadding, + ), + alignment: Alignment.centerRight, + child: const DidvanHorizontalLogo(), + ); + } +} diff --git a/lib/widgets/didvan/card.dart b/lib/widgets/didvan/card.dart new file mode 100644 index 0000000..5b0e747 --- /dev/null +++ b/lib/widgets/didvan/card.dart @@ -0,0 +1,20 @@ +import 'package:didvan/config/design_config.dart'; +import 'package:flutter/material.dart'; + +class DidvanCard extends StatelessWidget { + final Widget child; + const DidvanCard({Key? key, required this.child}) : super(key: key); + + @override + Widget build(BuildContext context) { + return Container( + padding: const EdgeInsets.all(16), + decoration: BoxDecoration( + borderRadius: DesignConfig.lowBorderRadius, + color: Theme.of(context).colorScheme.surface, + border: DesignConfig.lightBorder, + ), + child: child, + ); + } +} diff --git a/lib/widgets/didvan/divider.dart b/lib/widgets/didvan/divider.dart new file mode 100644 index 0000000..22e2bf0 --- /dev/null +++ b/lib/widgets/didvan/divider.dart @@ -0,0 +1,16 @@ +import 'package:didvan/config/design_config.dart'; +import 'package:flutter/material.dart'; + +class DidvanDivider extends StatelessWidget { + const DidvanDivider({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return Container( + height: 1, + width: double.infinity, + margin: const EdgeInsets.symmetric(vertical: 12), + color: DesignConfig.borderColor, + ); + } +} diff --git a/lib/widgets/didvan/text.dart b/lib/widgets/didvan/text.dart index 2192f4d..3a0386c 100644 --- a/lib/widgets/didvan/text.dart +++ b/lib/widgets/didvan/text.dart @@ -12,7 +12,7 @@ class DidvanText extends StatelessWidget { const DidvanText( this.text, { Key? key, - this.style = DesignConfig.body1Text, + this.style = DesignConfig.body2Text, this.color, this.fontSize, this.fontWeight, diff --git a/lib/widgets/didvan/text_field.dart b/lib/widgets/didvan/text_field.dart index 9580aac..9b0af01 100644 --- a/lib/widgets/didvan/text_field.dart +++ b/lib/widgets/didvan/text_field.dart @@ -83,7 +83,7 @@ class _DidvanTextFieldState extends State { hintStyle: Theme.of(context) .textTheme .bodyText1! - .copyWith(color: DesignConfig.greyColor5), + .copyWith(color: DesignConfig.hintColor), ), ), ), @@ -97,7 +97,7 @@ class _DidvanTextFieldState extends State { } else if (_hasError) { return Theme.of(context).colorScheme.error; } - return DesignConfig.greyColor4; + return DesignConfig.borderColor; } Color _fillColor() { diff --git a/lib/widgets/item_title.dart b/lib/widgets/item_title.dart new file mode 100644 index 0000000..ed8bb84 --- /dev/null +++ b/lib/widgets/item_title.dart @@ -0,0 +1,35 @@ +import 'package:didvan/config/design_config.dart'; +import 'package:didvan/widgets/didvan/text.dart'; +import 'package:flutter/material.dart'; + +class ItemTitle extends StatelessWidget { + final String title; + final IconData? icon; + final Color color; + + const ItemTitle({ + Key? key, + required this.title, + this.icon, + this.color = DesignConfig.darkPrimaryColor2, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + return Padding( + padding: const EdgeInsets.only(top: 16, bottom: 12), + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + if (icon != null) Icon(icon, color: color), + if (icon != null) const SizedBox(width: 4), + DidvanText( + title, + style: Theme.of(context).textTheme.subtitle1, + color: DesignConfig.darkPrimaryColor2, + ) + ], + ), + ); + } +}