Solution: Internationalizing the Application

Solutions

Great job on completing all the steps in the previous challenge! Feel free to compare your code solutions with the solutions below:

Solution 1: Set up flutter_localizations

First, we add the flutter_localizations library to the pubspec.yaml file.

# SOLUTION-1: Include flutter_localizations
  flutter_localizations:
    sdk: flutter

Solution 2: Enable code generation

Then, we enable code generation in pubspec.yaml to enable the generation of localization files.

flutter:
  # SOLUTION-2: Enable code generation
  generate: true

Solution 3: Set localization delegates and supported locales

Next, we import the AppLocalizations class from package:flutter_gen/gen_l10n/app_localizations.dart and use it to set up localizationsDelegates and supportedLocales attributes of the MaterialApp widget

import 'dart:ui' as ui;

import 'package:finale/home_screen.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
// SOLUTION-3: Import your app localization class
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Quiz App',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const HomeScreen(),
      // SOLUTION-4: Set your localization delegates and supported locales here
      localizationsDelegates: AppLocalizations.localizationsDelegates,
      supportedLocales: AppLocalizations.supportedLocales,
      localeResolutionCallback: (Locale? locale, Iterable<Locale> supportedLocales) {
        for (Locale supportedLocale in supportedLocales) {
          if (kIsWeb) {
            Locale webLocale = ui.window.locale;
            return webLocale;
          } else if (supportedLocale.languageCode == locale?.languageCode ||
              supportedLocale.countryCode == locale?.countryCode) {
            return supportedLocale;
          }
        }
        return supportedLocales.first;
      },
      debugShowCheckedModeBanner: false,
    );
  }
}

Solution 4: Translate application Strings to French

Now, we translate the strings in the lib/l10n/app_en.arb file to French and add the translations to the lib/l1on/app_fr.arb file. Feel free to use Google Translate service to help you with translating.

{
  "developerSurvey": "Enquête auprès des développeurs",
  "surveyDescription": "Les questions que nous posons dans notre enquête nous aideront à améliorer votre expérience de développeur sur notre plateforme.",
  "startSurvey": "Commencer l'enquête"
}

Solution 5: Replace the stings with translated string constants

Finally, we replace the hard-coded English strings with string constants from the AppLocalizations class. We first import the package:flutter_gen/gen_l10n/app_localizations.dart file, which contains the AppLocalizations class.

import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
// SOLUTION-6: Import your app localization class
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        title: const Text('QuizApp'),
      ),
      body: Padding(
        padding: EdgeInsets.fromLTRB(20, 50, 20, 100),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            // SOLUTION-6a: Translate title
            Text(AppLocalizations.of(context)!.developerSurvey,
                style: Theme.of(context).textTheme.headline6),
            SvgPicture.asset(
              'assets/svg/survey.svg',
              semanticsLabel: 'Survey image',
              width: MediaQuery.of(context).size.width * 1.5,
            ),
            // SOLUTION-6b: Translate description
            Text(AppLocalizations.of(context)!.surveyDescription),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton.extended(
        icon: Icon(Icons.arrow_right_alt_sharp),
        // SOLUTION-6c: Translate button label
        label: Text(AppLocalizations.of(context)!.startSurvey),
        onPressed: () {},
      ),
    );
  }
}

Final app

Compare your final app with the app below: