chore(#43): refactor to implement change language.

lib/app/app.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:provider/provider.dart';
+import 'package:times_up_flutter/app/features/parent_side/language/language_notififier.dart';
 import 'package:times_up_flutter/app/screen_controller.dart';
 import 'package:times_up_flutter/l10n/l10n.dart';
 import 'package:times_up_flutter/theme/theme.dart';
@@ -19,6 +20,7 @@ class TimesUpApp extends StatelessWidget {
 
     return MaterialApp(
       debugShowCheckedModeBanner: false,
+      locale: Provider.of<LanguageNotifier>(context).locale,
       title: Strings.appName,
       theme: AppTheme.lightTheme,
       darkTheme: AppTheme.darkTheme,

lib/app/features/parent_side/language/language_notififier.dart

@@ -0,0 +1,45 @@
+import 'dart:ui';
+
+import 'package:flutter/foundation.dart';
+import 'package:flutter/services.dart';
+
+class LanguageNotifier extends ChangeNotifier {
+  late String _selectedLanguage = '🇺🇸 English󠁢';
+  late Locale _locale = const Locale('en');
+
+  String get selectedLanguage => _selectedLanguage;
+  Locale get locale => _locale;
+
+  List<String> languages = [
+    '🇫🇷 Français󠁢',
+    '🇪🇸 Español',
+    '🇹🇷 Turkish',
+    '🇩🇪 Deutsch',
+  ];
+
+  void selectLanguage(String language) {
+    languages.insert(languages.indexOf(language), _selectedLanguage);
+    _selectedLanguage = language;
+    languages.removeWhere((element) => element == _selectedLanguage);
+    _locale = setLocale(_selectedLanguage);
+    HapticFeedback.heavyImpact();
+    notifyListeners();
+  }
+
+  Locale setLocale(String selectedLanguage) {
+    switch (selectedLanguage) {
+      case '🇫🇷 Français󠁢':
+        return const Locale('fr');
+      case '🇺🇸 English󠁢':
+        return const Locale('en');
+      case '🇪🇸 Español':
+        return const Locale('es');
+      case '🇹🇷 Turkish':
+        return const Locale('tr');
+      case '🇩🇪 Deutsch󠁢':
+        return const Locale('de');
+      default:
+        return const Locale('en');
+    }
+  }
+}

lib/app/features/parent_side/language/language_page.dart

@@ -0,0 +1,129 @@
+// ignore_for_file: library_private_types_in_public_api
+
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import 'package:times_up_flutter/app/features/parent_side/language/language_notififier.dart';
+import 'package:times_up_flutter/services/auth.dart';
+import 'package:times_up_flutter/theme/theme.dart';
+import 'package:times_up_flutter/widgets/jh_display_text.dart';
+
+class LanguagePage extends StatefulWidget {
+  const LanguagePage({
+    required this.auth,
+    required this.languageModel,
+    Key? key,
+  }) : super(key: key);
+  final AuthBase auth;
+  final LanguageNotifier languageModel;
+
+  static Widget create(
+    BuildContext context,
+    AuthBase auth,
+  ) {
+    return Consumer<LanguageNotifier>(
+      builder: (BuildContext context, value, Widget? child) => LanguagePage(
+        auth: auth,
+        languageModel: value,
+      ),
+    );
+  }
+
+  @override
+  _LanguagePageState createState() => _LanguagePageState();
+}
+
+class _LanguagePageState extends State<LanguagePage> {
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final color = Theme.of(context).brightness == Brightness.dark
+        ? Colors.white
+        : CustomColors.indigoDark;
+
+    return Scaffold(
+      body: NestedScrollView(
+        headerSliverBuilder: (BuildContext context, value) {
+          return [
+            SliverAppBar(
+              elevation: 0.5,
+              shadowColor: CustomColors.indigoLight,
+              iconTheme: IconThemeData(color: color),
+              backgroundColor: Theme.of(context).scaffoldBackgroundColor,
+              expandedHeight: 50,
+              pinned: true,
+              floating: true,
+            )
+          ];
+        },
+        body: ScrollConfiguration(
+          behavior: const ScrollBehavior().copyWith(overscroll: false),
+          child: CustomScrollView(
+            slivers: <Widget>[
+              SliverToBoxAdapter(
+                child: JHDisplayText(
+                  text: 'Languages',
+                  style: TextStyle(
+                    color: color,
+                    fontWeight: FontWeight.w700,
+                  ),
+                  fontSize: 32,
+                  maxFontSize: 34,
+                ).hP16,
+              ),
+              const SliverPadding(padding: EdgeInsets.only(top: 50)),
+              SliverToBoxAdapter(
+                child: Card(
+                  margin: const EdgeInsets.symmetric(horizontal: 50),
+                  color: CustomColors.indigoLight,
+                  child: Center(
+                    child: SizedBox(
+                      height: 60,
+                      child: Center(
+                        child: JHDisplayText(
+                          text: widget.languageModel.selectedLanguage,
+                          style: TextStyles.title,
+                        ),
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+              SliverList(
+                delegate: SliverChildListDelegate([
+                  SingleChildScrollView(
+                    child: SizedBox(
+                      height: 2000,
+                      child: ListView.separated(
+                        itemCount: 4,
+                        itemBuilder: (builder, index) => GestureDetector(
+                          onTap: () => widget.languageModel.selectLanguage(
+                            widget.languageModel.languages[index],
+                          ),
+                          child: JHDisplayText(
+                            text: widget.languageModel.languages[index],
+                            style: TextStyles.title,
+                          ).p(8),
+                        ),
+                        separatorBuilder: (BuildContext context, int index) =>
+                            const Divider(
+                          thickness: 1,
+                          indent: 20,
+                          endIndent: 20,
+                          color: Colors.grey,
+                        ).p4,
+                      ),
+                    ),
+                  ),
+                ]),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/app/features/parent_side/setting_page.dart

@@ -3,6 +3,7 @@
 import 'package:flutter/material.dart';
 import 'package:line_awesome_flutter/line_awesome_flutter.dart';
 import 'package:provider/provider.dart';
+import 'package:times_up_flutter/app/features/parent_side/language/language_page.dart';
 import 'package:times_up_flutter/services/app_info_service.dart';
 import 'package:times_up_flutter/services/auth.dart';
 import 'package:times_up_flutter/theme/theme.dart';
@@ -95,10 +96,9 @@ class SettingsPage extends StatelessWidget {
           ).vTopP(12),
           ProfileListItem(
             icon: LineAwesomeIcons.language,
-            onPressed: () => showDialog<Widget>(
-              context: context,
-              builder: (_) => const JHNoImplementationWidget(),
-            ),
+            onPressed: () => Navigator.of(context).push(MaterialPageRoute<void>(
+              builder: (context) => LanguagePage.create(context, auth),
+            )),
             text: 'Change language',
           ),
           ProfileListItem(

lib/main_development.dart

@@ -5,6 +5,7 @@ import 'package:flutter/material.dart';
 import 'package:package_info_plus/package_info_plus.dart';
 import 'package:provider/provider.dart';
 import 'package:times_up_flutter/app/app.dart';
+import 'package:times_up_flutter/app/features/parent_side/language/language_notififier.dart';
 import 'package:times_up_flutter/bootstrap.dart';
 import 'package:times_up_flutter/firebase_options_dev.dart';
 import 'package:times_up_flutter/services/app_info_service.dart';
@@ -44,6 +45,8 @@ Future<void> main() async {
         ),
         ChangeNotifierProvider<ThemeNotifier>(
             create: (context) => ThemeNotifier()..initThemeMode()),
+        ChangeNotifierProvider<LanguageNotifier>(
+            create: (context) => LanguageNotifier()),
         ChangeNotifierProvider<AppInfoService>(
             create: (context) => AppInfoService(packageInfo)),
       ],

lib/main_production.dart

@@ -43,7 +43,9 @@ Future<void> main() async {
             ..getInitialConnectionStatus(),
         ),
         ChangeNotifierProvider<ThemeNotifier>(
-            create: (context) => ThemeNotifier()..toggleTheme()),
+            create: (context) => ThemeNotifier()..initThemeMode()),
+        ChangeNotifierProvider<LanguageNotifier>(
+            create: (context) => LanguageNotifier()),
         ChangeNotifierProvider<AppInfoService>(
             create: (context) => AppInfoService(packageInfo)),
       ],

lib/main_staging.dart

@@ -43,7 +43,9 @@ Future<void> main() async {
             ..getInitialConnectionStatus(),
         ),
         ChangeNotifierProvider<ThemeNotifier>(
-            create: (context) => ThemeNotifier()..toggleTheme()),
+            create: (context) => ThemeNotifier()..initThemeMode()),
+        ChangeNotifierProvider<LanguageNotifier>(
+            create: (context) => LanguageNotifier()),
         ChangeNotifierProvider<AppInfoService>(
             create: (context) => AppInfoService(packageInfo)),
       ],

lib/utils/constants.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-
 import 'package:times_up_flutter/utils/app_strings.dart';
 
 class Keys {