A simple flag toggle that can be placed anywhere on your application, ideal for internationalization (i18n).

Simple toggle for country/region flags

Features

378 flags to choose (credits to this project).

Nice rolling animation during toogle (credits to this project).

Platform support

Simple Flag Toggle	Android	iOS	macOS	Web	Windows	Linux
Compatibility	✅	✅	✅	✅	✅	✅

Getting started

• Usage

  // Defines the flags you want to use
  static final List<String> flagList = ["us", "br", "ca"];

  // Receives the flag list, the initial index and a callback function that will be executed once the toggle has changed.
  FlagBar myToggle = FlagBar(
    flagList: flagList,
    initialIndex: 0,
    onChanged: (index) {
      print("Toggle changed to: index = $index and value = ${flagList[index]}");
    },
  );

• I18n (example using easy_localization)

  Locale _getLocale(int index) {
    switch (index) {
      case 0:
        return const Locale('pt', 'BR');
      case 1:
        return const Locale('en', 'US');
    }
  }

  FlagBar myToggle = FlagBar(
    flagList: const ["br", "us"],
    initialIndex: context.supportedLocales.indexOf(context.locale),
    onChanged: (index) {
      Locale locale = _getLocale(index);
      context.setLocale(locale);
    },
  );

For more details, see the example section.

Parameters

Required:

• flagList: The list of flags to be used, each flag is a string.
• initialIndex: The initial index of the flag list. The default is 0 (first flag on the left).
• onChanged: Defines the callback function to be called when the toggle changes state. The [index] variable is the index of the flag list.

Caveats

• Soon it will be possible to customize other parameters, like the color (for now is always "Theme.of(context).primaryColor").

Contributing

You can contribute in many ways:

• Fell free to open issues and report bugs.
• Pull requests are welcome!
• English is not my native language, if you find any errors in this documentation then please let me know.
• You can buy me a coffee!