telereso 0.0.5-alpha copy "telereso: ^0.0.5-alpha" to clipboard
telereso: ^0.0.5-alpha copied to clipboard

outdated

Controle your application's resrouces remotely .

Telereso #

Flutter package to use Telereso,

Telereso will allow you to control your app resources (strings,images) remotely and out of the box , without the need to add extra logic ,

Pub

Installation #

Telereso depends on Firebase to use Remote Config for resource management
And Cloud Messaging for realtime changes (optional)

All you need to get started is make sure your project has set up firebase (check docs)
then just add Telereso dependency to your project

dependencies:
  telereso: ^0.0.5-alpha

Run pub get.

Usage #

Initialization #

Initialization will not make api calls it's just to set up resources,

In your main.dart file, call init():

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Telereso.instance.init();
    return MaterialApp();
  }
}

Skipping the Initialization will not cause crashes, but the app will not be able to use the remote version of the resources, So it is a way to disable remote functionality.

Firebase #

Please follow the steps found here to set up your Remote Config correctly.

Localization #

According to Flutter Docs there is 2 ways to implement localization, Telereso support both

Minimal internationalization

If your app implement localization using this approach,
All you need to do is do the following changes :

Extend BasicRemoteLocalizations

  • Use translateOrDefault() to retrieve your string.

Example

Before:

class DemoLocalizations {
  DemoLocalizations(this.localeName);

  static Future<DemoLocalizations> load(Locale locale) {
    final String name = locale.countryCode.isEmpty ? locale.languageCode : locale.toString();
    final String localeName = Intl.canonicalizedLocale(name);
    return initializeMessages(localeName).then((_) {
      return DemoLocalizations(localeName);
    });
  }

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

  final String localeName;

  String get title {
    return Intl.message(
      'Hello World',
      name: 'title',
      desc: 'Title for the Demo application',
      locale: localeName,
    );
  }
}

After

class DemoLocalizations extends BasicRemoteLocalizations {
  DemoLocalizations(this.locale) : super(locale: locale);

  @override
  final Locale locale;

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

  // Static member to have a simple access to the delegate from the MaterialApp
  static const delegate = DemoLocalizationsDelegate();

  static Map<String, Map<String, String>> _localizedValues = {
    'en': {
      'title': 'Hello World',
    },
    'es': {
      'title': 'Hola Mundo',
    },
  };

  String get title {
    var key = 'title';
    return translateOrDefault(key, _localizedValues[locale.languageCode][key]);
  }
}

Internationalization based on the intl package

If your app implement localization using this approach,

All you need to do is apply the following changes :

  1. add telereso_generator to your dev_dependencies

    dev_dependencies:
        build_runner: ^1.0.0
        telereso_generator: ^0.0.5-alpha
    

    check telerso_generator usage

    Run pub get.

  2. Add build.yaml in your project's root (next to l10n.yaml)

    targets:
      $default:
        builders:
          telereso_generator|telereso:
            enabled: true
            options:
              template-arb-file: app_en.arb
              output-localization-file: app_localizations.dart
              output-class: AppLocalizations
              output-class-remote: RemoteLocalizations
    
  • Notice that first 3 options are the same as your l10n.yaml file, these flags has to be the same and required
  • output-class-remote is the name of your new wrapper class, if not set it will be RemoteLocalizationsDefault
  1. Build

     flutter pub run build_runner build --delete-conflicting-outputs
    

    Make sure a class named remote_localizations.telereso.dart was created next to your arb template

  2. Add RemoteLocalizations delegate above your AppLocalizations.delegate

    MaterialApp(
      localizationsDelegates: [
        RemoteLocalizations.delegate //<---- add this
        AppLocalizations.delegate, //<---- keep this
      ],
      supportedLocales: [
        const Locale('nn')
      ],
      home: ...
    )
    
  3. Start using your knew wrapper RemoteLocalizations instead of AppLocalizations

    Example:

    BEFORE

     // In your Material/Widget/CupertinoApp:
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          onGenerateTitle: (BuildContext context) => AppLocalizations.of(context).appTitle,
          // ...
        );
      }
    

    After

     // In your Material/Widget/CupertinoApp:
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          onGenerateTitle: (BuildContext context) => RemoteLocalizations.of(context).appTitle,
          // ...
        );
      }
    

Asset Images #

You can make your asset images dynamic with one simple change,
Use RemoteImage.asset instead of Image.asset

Example Before

....
child: Image.asset("assets/icons/image.png")
....

After

....
child: RemoteImage.asset("assets/icons/image.png"),
....

In Remote config console make sure to use full path assets/icons/image.png as your key in your drawable json, like:

{
   "assets/icons/image.png": "<url>",
   "assets/icons/image2.png": "<url2>"
}