Solution: Internationalizing the Application
Explore the solutions to the app internationalization challenge.
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:
Get hands-on with 1200+ tech skills courses.