TF-297 Add LanguageAndRegionView and inject in ManageAccountDashboard

2022-07-08 14:03:43 +07:00
parent 3aea76fc1e
commit b7ff5cdbad
8 changed files with 268 additions and 149 deletions
@@ -0,0 +1,54 @@
+
+import 'package:core/core.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/language_and_region/language_and_region_controller.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/language_and_region/widgets/change_language_widget.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/language_and_region/widgets/language_and_region_header_widget.dart';
+
+class LanguageAndRegionView extends GetWidget<LanguageAndRegionController> {
+
+  final _responsiveUtils = Get.find<ResponsiveUtils>();
+
+  LanguageAndRegionView({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: _responsiveUtils.isWebDesktop(context)
+          ? AppColor.colorBgDesktop
+          : Colors.white,
+      body: Container(
+        width: double.infinity,
+        margin: _responsiveUtils.isWebDesktop(context)
+          ? const EdgeInsets.only(left: 48, right: 24, top: 24, bottom: 24)
+          : EdgeInsets.zero,
+        color: _responsiveUtils.isWebDesktop(context) ? null : Colors.white,
+        decoration: _responsiveUtils.isWebDesktop(context)
+            ? BoxDecoration(
+                borderRadius: BorderRadius.circular(20),
+                border: Border.all(color: AppColor.colorBorderBodyThread, width: 1),
+                color: Colors.white)
+            : null,
+        child: ClipRRect(
+          borderRadius: BorderRadius.circular(
+              _responsiveUtils.isWebDesktop(context) ? 20 : 0),
+          child: Padding(
+            padding: EdgeInsets.only(
+                left: _responsiveUtils.isWebDesktop(context) ? 24 : 10,
+                top: 24,
+                right: 24),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                const LanguageAndRegionHeaderWidget(),
+                const SizedBox(height: 22),
+                Expanded(child: ChangeLanguageWidget())
+              ]
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
@@ -0,0 +1,59 @@
+
+import 'package:core/core.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:tmail_ui_user/features/base/widget/drop_down_button_widget.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/language_and_region/language_and_region_controller.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class ChangeLanguageWidget extends StatelessWidget {
+
+  final _controller = Get.find<LanguageAndRegionController>();
+  final _responsiveUtils = Get.find<ResponsiveUtils>();
+
+  ChangeLanguageWidget({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final titleLanguageWidget = Text(
+        AppLocalizations.of(context).language,
+        style: const TextStyle(
+          fontSize: 14,
+          fontWeight: FontWeight.normal,
+          color: AppColor.colorContentEmail));
+
+    final dropDownMenuSelectLanguage = Row(children: [
+      Expanded(child: Obx(() =>
+        DropDownButtonWidget<Locale>(
+          items: _controller.listSupportedLanguages,
+          itemSelected: _controller.languageSelected.value,
+          onChanged: (newLanguage) =>
+              _controller.selectLanguage(newLanguage),
+          supportSelectionIcon: true))),
+    ]);
+
+    return LayoutBuilder(builder: (context, constraints) {
+      return ResponsiveWidget(
+        responsiveUtils: _responsiveUtils,
+        mobile: Scaffold(
+          body: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              titleLanguageWidget,
+              const SizedBox(height: 8),
+              dropDownMenuSelectLanguage
+            ]
+          )),
+        desktop: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            titleLanguageWidget,
+            const SizedBox(height: 8),
+            SizedBox(
+              width: constraints.maxWidth / 2,
+              child: dropDownMenuSelectLanguage
+            ),
+          ]));
+    });
+  }
+}
@@ -0,0 +1,28 @@
+
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:flutter/material.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class LanguageAndRegionHeaderWidget extends StatelessWidget {
+
+  const LanguageAndRegionHeaderWidget({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(AppLocalizations.of(context).languageAndRegion,
+          style: const TextStyle(
+              fontSize: 17,
+              fontWeight: FontWeight.bold,
+              color: Colors.black)),
+        const SizedBox(height: 4),
+        Text(AppLocalizations.of(context).languageAndRegionSubtitle,
+            style: const TextStyle(
+                fontSize: 15,
+                fontWeight: FontWeight.normal,
+                color: AppColor.colorTextButtonHeaderThread))
+      ]);
+  }
+}