apiKey

Find its value from the `firebase_options.dart` file and paste here.

appId

messagingSenderId

projectId

authDomain

storageBucket

iosClientId

iosBundleId

measurementId

Gain insights into using Flutter and Dart to build visually stunning, high-performance Android and iOS apps. Delve into UI/UX design, networking, state management, Firebase, testing, and deployment.

hello.tar.gz

Flutter_Web

Flutter_Web-copy

Flutter_Web-Firebase

Flutter_Web_build_runner

Flutter_Web_Testing

Flutter_API_Server

Flutter_API_Server-copy

Get ready to unlock the potential of Flutter and Dart as you learn to craft visually stunning and high-performance applications for both Android and iOS.

This course will teach you to plan, build, and deploy interactive Flutter applications. You’ll start by developing user interfaces and handling gestures. Next, you’ll explore navigation and routing to smoothly move around your app. You’ll then dive into networking and HTTP to connect your app to the internet and implement data persistence. You’ll use Firebase services for authentication and storing data. State management comes next, helping you manage the different pieces of your app efficiently. Then, you’ll focus on testing, analytics, and crash reporting. You’ll then explore accessibility and internationalization, making your app usable by everyone and suitable for different languages. Lastly, you’ll learn app deployment.

The course wraps up with a project: you will create an online furniture store, combining all the skills you’ve learned.

The Complete Guide to Flutter

# 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.

```Yaml
# 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.

```Yaml
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

```Dart
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.

```JSON
{
  "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.

```Dart
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:

Explore the solutions to the app internationalization challenge.

Solution: Internationalizing Your Application

Solution: Internationalizing the Application

Introduction

User Interface

Navigation and Routing

Networking and HTTP

Persisting Data

State Management

Firebase for Flutter

Essential Tools to Enhance Your Flutter Workflow

Quality Assurance

Accessibility and Internalization

Deployment

Project: Build an Online Furniture Store

Next Steps

Solution: Internationalizing the Application

Solutions

Solution 1: Set up