Translate-Flutter/lib/page/index/index_view.dart
xuhang-x 4bccb583d6 1
2024-07-25 11:51:23 +08:00

478 lines
17 KiB
Dart

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:trans_lark/generated/assets.dart';
import 'package:trans_lark/page/index/index_controller.dart';
import 'package:trans_lark/util/t_object_utils.dart';
import 'package:trans_lark/widget/t_language_bar_widget.dart';
class IndexView extends StatelessWidget {
final IndexController logic = Get.put(IndexController());
IndexView({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
padding: const EdgeInsets.symmetric(horizontal: 12),
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage(Assets.imagesHomeBackground),
fit: BoxFit.fill,
),
),
child: SafeArea(
child: Column(
children: [
_buildHead(),
const SizedBox(height: 30),
Expanded(
child: Column(
children: [
_buildDailyQuote(),
Expanded(child: Container()),
_buildTools(),
Expanded(child: Container()),
_buildTranslate(),
],
),
),
],
),
),
),
);
}
Widget _buildHead() {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
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: Image.asset(
Assets.imagesHomeMore,
width: 32,
height: 32,
),
),
),
],
),
);
}
Widget _buildDailyQuote() {
return Container(
decoration: BoxDecoration(
border: Border.all(
width: 1.5,
color: const Color(0xff3AAA72),
),
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: Column(
children: [
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),
),
],
)
],
),
),
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: -22,
right: 5,
child: Image.asset(
Assets.imagesRabbitSayGood,
width: 137,
height: 115,
),
),
],
),
);
}
Widget _buildTools() {
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,
),
),
)
],
),
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,
),
),
),
const Padding(
padding: EdgeInsets.only(top: 10),
child: Text(
"Face2face",
style: TextStyle(
fontSize: 14,
color: Colors.black,
fontWeight: FontWeight.w500,
),
),
)
],
),
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(
"History",
style: TextStyle(
fontSize: 14,
color: Colors.black,
fontWeight: FontWeight.w500,
),
),
)
],
),
],
),
);
}
Widget _buildTranslate() {
return Column(
children: [
GestureDetector(
onTap: logic.toTranslate,
child: Container(
height: 91,
alignment: Alignment.center,
decoration: BoxDecoration(
color: const Color(0xff7678ef),
borderRadius: BorderRadius.circular(28),
border: Border.all(width: 1.5, color: const Color(0xff5153c0)),
),
child: Row(
children: [
const Expanded(
child: Padding(
padding: EdgeInsets.only(left: 20),
child: Text(
"Type to Translate",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w400,
color: Colors.white,
),
),
),
),
Padding(
padding: const EdgeInsets.only(
right: 20,
),
child: GestureDetector(
onTap: logic.onTapSpeak,
child: Container(
height: 36,
width: 36,
padding: const EdgeInsets.all(5),
decoration: BoxDecoration(
color: const Color(0xff5153c0),
borderRadius: BorderRadius.circular(18),
),
child: SvgPicture.asset(
Assets.svgHomeVoice,
),
),
),
),
],
),
),
),
const SizedBox(height: 20),
const TLanguageBarWidget(),
],
);
}
}