Stream Language

Check it out at Pub.Dev

A simple way to support your Flutter application, which from firebase with realtime database supports multiple languages!

ezgif com-video-to-gif (1)

Getting Started

You must first create an object with the following attributes:

var language = LanguageBloc(
  child: 'languages',      
  defaultLanguage: 'pt_BR',
  defaultRoute: 'default'
);

LanguageBloc is a singleton, after the first start, it will have the same attributes.

Child:

The child in your realtime database that contains the app language. In app example its likes this:

Captura de Tela (101)

Each child of this node must be named in the language and iso-code of the country as shown in the screenshot.

DefaultLanguage

Here will be informed the default home language when connecting the language of the user device does not have in the database.

DefaultRoute

Here you enter the node within the language that contains words that can be used on more than one screen as in the example below:

Captura de Tela (102)

The first time you use firebase language you should do this:

final language = LanguageBloc(
    child: 'languages',
    defaultLanguage: 'pt_BR',
    defaultRoute: 'default'
);

@override
Widget build(BuildContext context) {
  return FirstLanguageStart(
    future: language.init(),
    builder: (c) => StreamLanguage(
      screenRoute: ['screen-1'],
      builder: (data, route, def) => Scaffold(
        appBar: AppBar(
          title: Text(route['title']),
        ),
        body: Center(
          child: RaisedButton(
              child: Text(route['btn']),
              onPressed: () => language.showAlertChangeLanguage(
                  context: context,
                  title: def['change-language']['title'],
                  btnNegative: def['change-language']['btn-negative']
              )
          ),
        ),
      ),
    )
  );
}

From the next you start using only the StreamLanguage widget, the first one is needed because the first app should download all language and start the default language from the user's mobile language.

Widget StreamLanguage

ScreenRoute

This is where the magic happens, as a parameter it receives the screen route within the language node, see that in the code above is as: screenRoute: ['screen-1'], in firebase it looks like this:

Captura de Tela (103)

If the route were a node within 'screen-1' you would go something like this: screenRoute: ['screen-1', 'route_inside']

Builder

The builder receives as parameter 3 fields: data, route and def

Data

Data contains all node of current language.

Route

Contains all node passed by ScreenRoute.

Def

Contains all node passed as parameter in LanguageBloc constructor in DefaultRoute

Changing Language

For this, every language node must have a child named config with the following attributes: Captura de Tela (104)

After that you can call the method:

language.showAlertChangeLanguage(
    context: context,
    title: def['change-language']['title'],
    btnNegative: def['change-language']['btn-negative']
)

This will show an alert dialog like this (Language and flag listing is done automatically from the data passed in the config node):

Captura de Tela (105)

To change the language programmatically, just call this method passing as the language prefix ex:

languageBloc.changeLanguage('pt_BR');

Libraries

stream_language