diff --git a/assets/images/appbar_back.png b/assets/images/back_icon.png similarity index 100% rename from assets/images/appbar_back.png rename to assets/images/back_icon.png diff --git a/assets/images/daily_quote_background.png b/assets/images/daily_quote_background.png new file mode 100755 index 0000000..0166773 Binary files /dev/null and b/assets/images/daily_quote_background.png differ diff --git a/assets/images/dialog.png b/assets/images/dialog.png deleted file mode 100755 index 4b7792c..0000000 Binary files a/assets/images/dialog.png and /dev/null differ diff --git a/assets/images/history.png b/assets/images/history.png deleted file mode 100755 index c62a1d7..0000000 Binary files a/assets/images/history.png and /dev/null differ diff --git a/assets/images/homeBackground.png b/assets/images/homeBackground.png deleted file mode 100755 index 61c45bd..0000000 Binary files a/assets/images/homeBackground.png and /dev/null differ diff --git a/assets/images/homeMore.png b/assets/images/homeMore.png deleted file mode 100755 index b0889bf..0000000 Binary files a/assets/images/homeMore.png and /dev/null differ diff --git a/assets/images/home_background.png b/assets/images/home_background.png new file mode 100644 index 0000000..e6418a9 Binary files /dev/null and b/assets/images/home_background.png differ diff --git a/assets/images/home_more.png b/assets/images/home_more.png new file mode 100755 index 0000000..e360619 Binary files /dev/null and b/assets/images/home_more.png differ diff --git a/assets/images/photo.png b/assets/images/photo.png deleted file mode 100755 index b5bbe71..0000000 Binary files a/assets/images/photo.png and /dev/null differ diff --git a/assets/images/rabbitSayGood.png b/assets/images/rabbitSayGood.png deleted file mode 100755 index 99a6cc9..0000000 Binary files a/assets/images/rabbitSayGood.png and /dev/null differ diff --git a/assets/images/rabbit_say_good.png b/assets/images/rabbit_say_good.png new file mode 100644 index 0000000..9412812 Binary files /dev/null and b/assets/images/rabbit_say_good.png differ diff --git a/assets/images/title_bakcground.png b/assets/images/title_bakcground.png new file mode 100755 index 0000000..0e5d134 Binary files /dev/null and b/assets/images/title_bakcground.png differ diff --git a/assets/images/tools_dialog.png b/assets/images/tools_dialog.png new file mode 100755 index 0000000..04edfc5 Binary files /dev/null and b/assets/images/tools_dialog.png differ diff --git a/assets/images/tools_history.png b/assets/images/tools_history.png new file mode 100755 index 0000000..54806df Binary files /dev/null and b/assets/images/tools_history.png differ diff --git a/assets/images/tools_photo.png b/assets/images/tools_photo.png new file mode 100755 index 0000000..93638a1 Binary files /dev/null and b/assets/images/tools_photo.png differ diff --git a/assets/svg/homeMore.svg b/assets/svg/homeMore.svg deleted file mode 100755 index 82f63e1..0000000 --- a/assets/svg/homeMore.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/lib/generated/assets.dart b/lib/generated/assets.dart index 0b9fe01..f98e64b 100644 --- a/lib/generated/assets.dart +++ b/lib/generated/assets.dart @@ -2,21 +2,23 @@ class Assets { Assets._(); - static const String imagesAppbarBack = 'assets/images/appbar_back.png'; + static const String imagesBackIcon = 'assets/images/back_icon.png'; static const String imagesCopy = 'assets/images/copy.png'; + static const String imagesDailyQuoteBackground = 'assets/images/daily_quote_background.png'; static const String imagesDeleteIcon = 'assets/images/delete_icon.png'; - static const String imagesDialog = 'assets/images/dialog.png'; static const String imagesFullScreen = 'assets/images/fullScreen.png'; - static const String imagesHistory = 'assets/images/history.png'; - static const String imagesHomeBackground = 'assets/images/homeBackground.png'; - static const String imagesHomeMore = 'assets/images/homeMore.png'; - static const String imagesPhoto = 'assets/images/photo.png'; + static const String imagesHomeBackground = 'assets/images/home_background.png'; + static const String imagesHomeMore = 'assets/images/home_more.png'; static const String imagesPoyline = 'assets/images/poyline.png'; - static const String imagesRabbitSayGood = 'assets/images/rabbitSayGood.png'; + static const String imagesRabbitSayGood = 'assets/images/rabbit_say_good.png'; static const String imagesSpeakFace = 'assets/images/speak_face.png'; static const String imagesStar = 'assets/images/star.png'; static const String imagesSwitchHomeIcon = 'assets/images/switch_home_icon.png'; + static const String imagesTitleBakcground = 'assets/images/title_bakcground.png'; static const String imagesToHomeBottom = 'assets/images/to_home_bottom.png'; + static const String imagesToolsDialog = 'assets/images/tools_dialog.png'; + static const String imagesToolsHistory = 'assets/images/tools_history.png'; + static const String imagesToolsPhoto = 'assets/images/tools_photo.png'; static const String imagesTranslatorResultBackground = 'assets/images/translatorResultBackground.png'; static const String jsonLanguage = 'assets/json/language.json'; static const String jsonTranslationScene = 'assets/json/translation_scene.json'; @@ -27,7 +29,6 @@ class Assets { static const String svgFaceVoice = 'assets/svg/face_voice.svg'; static const String svgFamily = 'assets/svg/family.svg'; static const String svgHealthy = 'assets/svg/healthy.svg'; - static const String svgHomeMore = 'assets/svg/homeMore.svg'; static const String svgHomeRightIcon = 'assets/svg/home_right_icon.svg'; static const String svgHomeVoice = 'assets/svg/homeVoice.svg'; static const String svgMakeFriends = 'assets/svg/make_friends.svg'; diff --git a/lib/page/index/index_view.dart b/lib/page/index/index_view.dart index ff53c32..9d85b6d 100644 --- a/lib/page/index/index_view.dart +++ b/lib/page/index/index_view.dart @@ -15,7 +15,7 @@ class IndexView extends StatelessWidget { Widget build(BuildContext context) { return Scaffold( body: Container( - padding: const EdgeInsets.symmetric(horizontal: 20), + padding: const EdgeInsets.symmetric(horizontal: 12), decoration: const BoxDecoration( image: DecorationImage( image: AssetImage(Assets.imagesHomeBackground), @@ -26,6 +26,7 @@ class IndexView extends StatelessWidget { child: Column( children: [ _buildHead(), + const SizedBox(height: 30), Expanded( child: Column( children: [ @@ -50,29 +51,31 @@ class IndexView extends StatelessWidget { child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - const Text( - "Courses", - style: TextStyle( - color: Color(0xff1E1E1E), - fontSize: 24, - fontWeight: FontWeight.w700, + Container( + padding: const EdgeInsets.symmetric(horizontal: 20), + decoration: const BoxDecoration( + image: DecorationImage( + image: AssetImage( + Assets.imagesTitleBakcground, + ), + ), + ), + child: const Text( + "Instant Translator", + style: TextStyle( + color: Color(0xff1E1E1E), + fontSize: 24, + fontWeight: FontWeight.w700, + ), ), ), GestureDetector( onTap: logic.openSettingsBottomSheet, child: ClipOval( - child: Container( + child: Image.asset( + Assets.imagesHomeMore, width: 32, height: 32, - color: const Color(0xff4ECA8C), - child: FittedBox( - fit: BoxFit.none, - child: SvgPicture.asset( - Assets.svgHomeMore, - width: 20, - height: 20, - ), - ), ), ), ), @@ -82,298 +85,335 @@ class IndexView extends StatelessWidget { } Widget _buildDailyQuote() { - return Stack( - children: [ - GestureDetector( - onTap: logic.toSceneCategory, - child: Column( - children: [ - const SizedBox(height: 30), - Container( - height: 222, - decoration: BoxDecoration( - border: - Border.all(width: 1.5, color: const Color(0xff3AAA72)), - color: const Color.fromARGB(213, 78, 202, 140), - borderRadius: BorderRadius.circular(16)), - ), - ], - ), + return Container( + decoration: BoxDecoration( + border: Border.all( + width: 1.5, + color: const Color(0xff3AAA72), ), - Positioned( - top: 46, - left: 20, - child: GestureDetector( + color: const Color(0xff78dfa8), + borderRadius: BorderRadius.circular(16), + ), + child: Stack( + clipBehavior: Clip.none, + children: [ + Positioned( + top: 16, + right: 31, + left: 31, + child: Image.asset( + Assets.imagesDailyQuoteBackground, + ), + ), + GestureDetector( onTap: logic.toSceneCategory, - child: Row( + child: Column( children: [ - const Text( - "Daily Quote", - style: TextStyle( - fontSize: 20, - fontWeight: FontWeight.w800, - fontStyle: FontStyle.italic, - color: Colors.white, + Container( + padding: const EdgeInsets.symmetric( + horizontal: 30, + vertical: 15, + ), + child: Stack( + alignment: AlignmentDirectional.bottomStart, + children: [ + Positioned( + bottom: 2.8, + child: Container( + width: 73, + height: 7, + decoration: BoxDecoration( + color: const Color(0xfffff0a0), + borderRadius: BorderRadius.circular(16), + ), + ), + ), + Row( + children: [ + const Text( + "Daily Quote", + style: TextStyle( + fontSize: 20, + fontWeight: FontWeight.w800, + fontStyle: FontStyle.italic, + color: Colors.white, + ), + ), + Padding( + padding: const EdgeInsets.only(left: 5), + child: SvgPicture.asset(Assets.svgHomeRightIcon), + ), + ], + ) + ], ), ), - Padding( - padding: const EdgeInsets.only(left: 5), - child: SvgPicture.asset(Assets.svgHomeRightIcon), - ) + Column( + children: [ + Container( + width: double.infinity, + height: 168, + padding: const EdgeInsets.symmetric(horizontal: 20), + alignment: Alignment.center, + decoration: BoxDecoration( + border: const Border( + top: BorderSide( + width: 1.5, + color: Color(0xff1AB069), + ), + ), + color: Colors.white, + borderRadius: BorderRadius.circular(16), + ), + child: Column( + children: [ + Expanded( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Obx(() { + return Text( + logic.fromLanguage.value != null + ? logic.fromLanguage.value!.languageName + : '', + style: const TextStyle( + fontSize: 12, + color: Color(0xffC2C3C5), + ), + ); + }), + const SizedBox(height: 9), + Row( + mainAxisAlignment: + MainAxisAlignment.spaceBetween, + children: [ + Expanded( + child: Obx(() { + return Text( + TObjectUtils.getStr( + logic.fromStr.value), + overflow: TextOverflow.ellipsis, + style: const TextStyle( + fontSize: 16, + color: Color(0xff152A3D), + fontWeight: FontWeight.w500, + ), + ); + }), + ), + GestureDetector( + onTap: () => + logic.translatorTtsPlay(true), + child: Container( + width: 24, + height: 24, + padding: const EdgeInsets.all(3), + decoration: BoxDecoration( + color: const Color.fromARGB( + 78, 78, 202, 140), + borderRadius: + BorderRadius.circular(12)), + child: FittedBox( + fit: BoxFit.none, + child: SvgPicture.asset( + Assets.svgSpeaker, + width: 16, + height: 16, + ), + ), + ), + ), + ], + ), + ], + ), + ), + const Divider(height: 1, thickness: 1), + Expanded( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Obx(() { + return Text( + logic.toLanguage.value != null + ? logic.toLanguage.value!.languageName + : '', + style: const TextStyle( + fontSize: 12, + color: Color(0xffC2C3C5), + ), + ); + }), + const SizedBox(height: 9), + Row( + mainAxisAlignment: + MainAxisAlignment.spaceBetween, + children: [ + Expanded( + child: Obx(() { + return Text( + TObjectUtils.getStr( + logic.toStr.value), + overflow: TextOverflow.ellipsis, + style: const TextStyle( + fontSize: 16, + color: Color(0xff152A3D), + fontWeight: FontWeight.w500, + ), + ); + }), + ), + GestureDetector( + onTap: () => + logic.translatorTtsPlay(false), + child: Container( + width: 24, + height: 24, + padding: const EdgeInsets.all(3), + decoration: BoxDecoration( + color: const Color.fromARGB( + 78, 78, 202, 140), + borderRadius: + BorderRadius.circular(12), + ), + child: FittedBox( + fit: BoxFit.none, + child: SvgPicture.asset( + Assets.svgSpeaker, + width: 16, + height: 16, + ), + ), + ), + ), + ], + ), + ], + ), + ), + ], + ), + ), + ], + ), ], ), ), - ), - Positioned( - top: -4, - right: 24, - child: Image.asset( - Assets.imagesRabbitSayGood, - width: 90, - height: 90, + Positioned( + top: -22, + right: 5, + child: Image.asset( + Assets.imagesRabbitSayGood, + width: 137, + height: 115, + ), ), - ), - Column( - children: [ - const SizedBox( - height: 85, - ), - Container( - width: double.infinity, - height: 168, - padding: const EdgeInsets.symmetric(horizontal: 20), - alignment: Alignment.center, - decoration: BoxDecoration( - border: Border.all(width: 1.5, color: const Color(0xff3AAA72)), - color: Colors.white, - borderRadius: BorderRadius.circular(16), - ), - child: Column( - children: [ - Expanded( - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Obx(() { - return Text( - logic.fromLanguage.value != null - ? logic.fromLanguage.value!.languageName - : '', - style: const TextStyle( - fontSize: 12, - color: Color(0xffC2C3C5), - ), - ); - }), - const SizedBox(height: 9), - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Expanded( - child: Obx(() { - return Text( - TObjectUtils.getStr(logic.fromStr.value), - overflow: TextOverflow.ellipsis, - style: const TextStyle( - fontSize: 16, - color: Color(0xff152A3D), - fontWeight: FontWeight.w500, - ), - ); - }), - ), - GestureDetector( - onTap: () => logic.translatorTtsPlay(true), - child: Container( - width: 24, - height: 24, - padding: const EdgeInsets.all(3), - decoration: BoxDecoration( - color: - const Color.fromARGB(78, 78, 202, 140), - borderRadius: BorderRadius.circular(12)), - child: FittedBox( - fit: BoxFit.none, - child: SvgPicture.asset( - Assets.svgSpeaker, - width: 16, - height: 16, - ), - ), - ), - ), - ], - ), - ], - ), - ), - const Divider( - height: 1, - thickness: 1, - ), - Expanded( - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Obx(() { - return Text( - logic.toLanguage.value != null - ? logic.toLanguage.value!.languageName - : '', - style: const TextStyle( - fontSize: 12, - color: Color(0xffC2C3C5), - ), - ); - }), - const SizedBox(height: 9), - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Expanded( - child: Obx(() { - return Text( - TObjectUtils.getStr(logic.toStr.value), - overflow: TextOverflow.ellipsis, - style: const TextStyle( - fontSize: 16, - color: Color(0xff152A3D), - fontWeight: FontWeight.w500, - ), - ); - }), - ), - GestureDetector( - onTap: () => logic.translatorTtsPlay(false), - child: Container( - width: 24, - height: 24, - padding: const EdgeInsets.all(3), - decoration: BoxDecoration( - color: const Color.fromARGB(78, 78, 202, 140), - borderRadius: BorderRadius.circular(12), - ), - child: FittedBox( - fit: BoxFit.none, - child: SvgPicture.asset( - Assets.svgSpeaker, - width: 16, - height: 16, - ), - ), - ), - ), - ], - ), - ], - ), - ), - ], - ), - ), - ], - ), - ], + ], + ), ); } Widget _buildTools() { - return Row( - mainAxisAlignment: MainAxisAlignment.spaceAround, - children: [ - Column( - children: [ - GestureDetector( - onTap: logic.toPhotos, - child: Container( - width: 72, - height: 72, - padding: const EdgeInsets.all(10), - decoration: BoxDecoration( - color: const Color(0xffD2FFFB), - borderRadius: BorderRadius.circular(36), - ), - child: Image.asset( - Assets.imagesPhoto, + return Container( + padding: const EdgeInsets.symmetric(horizontal: 12), + child: Row( + children: [ + Column( + children: [ + GestureDetector( + onTap: logic.toPhotos, + child: Container( + width: 72, + height: 72, + padding: const EdgeInsets.all(12), + decoration: BoxDecoration( + color: const Color(0xffD2FFFB), + borderRadius: BorderRadius.circular(24), + ), + child: Image.asset( + Assets.imagesToolsPhoto, + ), ), ), - ), - const Padding( - padding: EdgeInsets.only(top: 10), - child: Text( - "Photo", - style: TextStyle( - fontSize: 14, - color: Colors.black, - fontWeight: FontWeight.w500, + const Padding( + padding: EdgeInsets.only(top: 10), + child: Text( + "Photo", + style: TextStyle( + fontSize: 14, + color: Colors.black, + fontWeight: FontWeight.w500, + ), + ), + ) + ], + ), + Expanded(child: Container()), + Column( + children: [ + GestureDetector( + onTap: logic.toP2P, + child: Container( + width: 72, + height: 72, + padding: const EdgeInsets.all(12), + decoration: BoxDecoration( + color: const Color(0xffE1E2FE), + borderRadius: BorderRadius.circular(24), + ), + child: Image.asset( + Assets.imagesToolsDialog, + ), ), ), - ) - ], - ), - Column( - children: [ - GestureDetector( - onTap: logic.toP2P, - child: Container( - width: 72, - height: 72, - padding: const EdgeInsets.all(10), - decoration: BoxDecoration( - color: const Color(0xffE1E2FE), - borderRadius: BorderRadius.circular(36), + const Padding( + padding: EdgeInsets.only(top: 10), + child: Text( + "Face2face", + style: TextStyle( + fontSize: 14, + color: Colors.black, + fontWeight: FontWeight.w500, + ), ), - child: Image.asset( - Assets.imagesDialog, + ) + ], + ), + Expanded(child: Container()), + Column( + children: [ + GestureDetector( + onTap: logic.toTranslateHistory, + child: Container( + width: 72, + height: 72, + padding: const EdgeInsets.all(12), + decoration: BoxDecoration( + color: const Color(0xffFEE5C5), + borderRadius: BorderRadius.circular(24), + ), + child: Image.asset( + Assets.imagesToolsHistory, + ), ), ), - ), - const Padding( - padding: EdgeInsets.only(top: 10), - child: Text( - "Face2face", - style: TextStyle( - fontSize: 14, - color: Colors.black, - fontWeight: FontWeight.w500, + const Padding( + padding: EdgeInsets.only(top: 10), + child: Text( + "History", + style: TextStyle( + fontSize: 14, + color: Colors.black, + fontWeight: FontWeight.w500, + ), ), - ), - ) - ], - ), - Column( - children: [ - GestureDetector( - onTap: logic.toTranslateHistory, - child: Container( - width: 72, - height: 72, - padding: const EdgeInsets.all(10), - decoration: BoxDecoration( - color: const Color(0xffFEE5C5), - borderRadius: BorderRadius.circular(36), - ), - child: Image.asset( - Assets.imagesHistory, - ), - ), - ), - const Padding( - padding: EdgeInsets.only(top: 10), - child: Text( - "History", - style: TextStyle( - fontSize: 14, - color: Colors.black, - fontWeight: FontWeight.w500, - ), - ), - ) - ], - ), - ], + ) + ], + ), + ], + ), ); } @@ -383,20 +423,12 @@ class IndexView extends StatelessWidget { GestureDetector( onTap: logic.toTranslate, child: Container( - height: 76, + height: 91, alignment: Alignment.center, decoration: BoxDecoration( - color: const Color.fromARGB( - 213, - 69, - 168, - 254, - ), - borderRadius: BorderRadius.circular(16), - border: Border.all( - width: 1.5, - color: const Color(0xff0087FF), - ), + color: const Color(0xff7678ef), + borderRadius: BorderRadius.circular(28), + border: Border.all(width: 1.5, color: const Color(0xff5153c0)), ), child: Row( children: [ @@ -424,7 +456,7 @@ class IndexView extends StatelessWidget { width: 36, padding: const EdgeInsets.all(5), decoration: BoxDecoration( - color: const Color(0xff8BCFFE), + color: const Color(0xff5153c0), borderRadius: BorderRadius.circular(18), ), child: SvgPicture.asset( @@ -439,7 +471,6 @@ class IndexView extends StatelessWidget { ), const SizedBox(height: 20), const TLanguageBarWidget(), - const SizedBox(height: 20), ], ); } diff --git a/lib/widget/t_base_appbar_widget.dart b/lib/widget/t_base_appbar_widget.dart index acca230..dcb15f0 100644 --- a/lib/widget/t_base_appbar_widget.dart +++ b/lib/widget/t_base_appbar_widget.dart @@ -52,7 +52,7 @@ class TBaseAppbarWidget extends StatelessWidget implements PreferredSizeWidget { child: Padding( padding: const EdgeInsets.all(10.0), child: Image.asset( - Assets.imagesAppbarBack, + Assets.imagesBackIcon, width: 24, height: 24, color: backColor,