How can I display different languages in a custom bottom bar and Drop List in Flutter?

Question

I'm using ARB files along with code generation for my internalization solution for my flutter app. Everything seems to be work as expecting, but I do have one problem. I can't get the options in the drop down lists and my bottom bar to switch languages.

Here is my locale.dart file

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'dart:async';

import 'package:manchester_maps/l10n/messages_all.dart';

class AppLocalizations {
  static Future<AppLocalizations> load(Locale locale) {
    final String name =
        locale.countryCode.isEmpty ? locale.languageCode : locale.toString();

    final String localeName = Intl.canonicalizedLocale(name);

    return initializeMessages(localeName).then((bool _) {
      Intl.defaultLocale = localeName;
      return AppLocalizations();
    });
  }

  static AppLocalizations of(BuildContext context) {
    return Localizations.of<AppLocalizations>(context, AppLocalizations);
  }

  String get title {
    return Intl.message(
      'Manchester Maps',
      name: 'title',
      desc: 'The name of the application',
    );
  }

  String get pageTitleMyPlaces {
    return Intl.message('My Places',
        name: 'pageTitleMyPlaces', desc: 'The My Places Title');
  }

  String get pageTitleSafetyInfo {
    return Intl.message('Safety Info',
        name: 'pageTitleSafetyInfo', desc: 'The Safety Info Title');
  }

  String get pageTitleSettings {
    return Intl.message('Settings',
        name: 'pageTitleSettings', desc: 'The Safety Info Title');
  }

  String get drawerResidences {
    return Intl.message('Residences',
        name: 'drawerResidences',
        desc: 'The Residences option on the sliding nav bar');
  }
  ...
  ...
  ...


class AppLocalizationsDelegate extends LocalizationsDelegate<AppLocalizations> {
  const AppLocalizationsDelegate();

  @override
  bool isSupported(Locale locale) {
    return ['en', 'es', 'fr', 'hi', 'ar', 'ru', 'zh', 'ja']
        .contains(locale.languageCode);
  }

  @override
  Future<AppLocalizations> load(Locale locale) {
    return AppLocalizations.load(locale);
  }

  @override
  bool shouldReload(AppLocalizationsDelegate old) {
    return false;
  }
}

I have a number of Lists (see below) and this is where I am having issues.

In the code below, I have an error with the context.

    class _SettingsFormState extends State<SettingsForm> {
  // TODO: Change this to retrieve data from local database
  bool _allowTilt = true;
  bool _enableRotate = true;
  bool _enableZoom = true;
  bool _showTraffic = false;
  bool _showCompass = true;

  // Properties for Theme Timing. This denotes whether the theme switches
  //  from day to night automatically at sunset and sunrise times
  List<String> _themeTiming = [**AppLocalizations.of(context).settingsDDLThemeDay**, 'Night', 'Auto'];
  String _selectedThemeTiming;
  // List of Day Themes
  List<String> _dayTheme = [
    'Standard',
    'Retro',
    'Simple Bright',
    'Map Posters',
    'Bentley',
    'Clean Cut'
  ];
  String _selectedDayTheme;
  // List of Night Themea
  List<String> _nightTheme = [
    'Night',
    'Simple Night',
    'Dark',
    'Midnight Commander',
    'Aubergine',
    'Cobalt'
  ];
  String _selectedNightTheme;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
            ...
            ...
            ...

Any help with this is appreciated as it is driving me nuts.

score 0 · Answer 1 · answered Dec 16 '19 at 10:13

0

You're not actually using the translations in your List, it should be

  List<String> _dayTheme = [
    AppLocalizations.standard,
    AppLocalizations.retro,
    AppLocalizations.simpleBright,
    AppLocalizations.mapPosters,
    AppLocalizations.bentley,
    AppLocalizations.cleanCut
  ];

Where you define all of standard, retro ...etc inside of your AppLocalization file

answered Dec 16 '19 at 10:13

Julien Lachal

1,101
14
23

Hi Julien, thanks for commenting. I've shown an example in how I have been using it in the themeTiming List (see code above). There is an error on the word "context) - AppLocalizations.of(context).settingsDDLThemeDay thanks – Andrew Stevenson Dec 16 '19 at 11:15
aaaah. Well just declare `List _themeTiming` and assign the value inside the class' `initState` method, because you can't access `context` from properties – Julien Lachal Dec 16 '19 at 11:47
Hi Julien, That got rid of the context error, but how do I display that in the dropdownMenuITem? It now says _themeTiming is not being used. – Andrew Stevenson Dec 16 '19 at 13:00
You don't show how to provide values for this menu. But you need to translate the messages the way I explained in this answer, otherwise you'll always see the hardcoded strings – Julien Lachal Dec 16 '19 at 15:41
Using AppLocalizations just didn't work in the list, but once I changed I used separate menu items, then that worked perfectly. Not sure how I'm going to get the bottom bar working though. Thanks for your help. – Andrew Stevenson Dec 20 '19 at 12:53
maybe you should post your findings as an answer to your question, it may be helpful for people landing on your question ;) – Julien Lachal Dec 23 '19 at 10:02

score 0 · Answer 2 · answered Dec 23 '19 at 10:12

I managed to add the localizations to my dropdown buttons by moving the options out of a list and adding them directly into the DropdownButton. It has increased the amount of code, but they are fully multi-lingual now. I've not been able to figure out getting the bottom bar multi-lingual yet, but progress has been made. Hopefully this will help.

Text(AppLocalizations.of(context).settingsLabelDayTheme),
// DAY THEME DROP DOWN LIST
DropdownButton(
hint: Text(AppLocalizations.of(context)
    .settingsDDLDayThemeHint),
items: [
  DropdownMenuItem(
    value: "standard",
    child: Text(AppLocalizations.of(context)
        .settingsDDLDayTheme1),
  ),
  DropdownMenuItem(
    value: "retro",
    child: Text(AppLocalizations.of(context)
        .settingsDDLDayTheme2),
  ),
  DropdownMenuItem(
    value: "simple_bright",
    child: Text(AppLocalizations.of(context)
        .settingsDDLDayTheme3),
  ),
  DropdownMenuItem(
    value: "map_posters",
    child: Text(AppLocalizations.of(context)
        .settingsDDLDayTheme4),
  ),
  DropdownMenuItem(
    value: "bentley",
    child: Text(AppLocalizations.of(context)
        .settingsDDLDayTheme5),
  ),
  DropdownMenuItem(
    value: "clean_cut",
    child: Text(AppLocalizations.of(context)
        .settingsDDLDayTheme6),
  ),
],
onChanged: (dayTheme) {
  setState(() {
    _selectedDayTheme = dayTheme;
  });
},
value: _selectedDayTheme,
),

score 0 · Answer 3 · answered May 29 '22 at 18:01

0

I had the same problem, I tried everything to work it out. And the solution worked for me was adding localizations directly into DropDownMenu. Not pulling them as list from somewhere else.

answered May 29 '22 at 18:01

Sezgin Özcan

51
8

How can I display different languages in a custom bottom bar and Drop List in Flutter?

3 Answers3