Home > Enterprise >  Automatically adjust the language of the page when you open it using getX in flutter
Automatically adjust the language of the page when you open it using getX in flutter

Time:10-28

Automatically adjust the language of the page when you open it using getX in flutter, I want to choose the language on a page, and when I choose it, I will move to another page and be in the language I chose

Container(
                margin: const EdgeInsets.only(top: 20.0),
                padding: const EdgeInsets.only(left: 20.0, right: 20.0),
                child: new Row(
                  children: <Widget>[
                    new Expanded(
                      child: FlatButton(
                        shape: new RoundedRectangleBorder(
                            borderRadius: new BorderRadius.circular(30.0)),
                        splashColor: this.primaryColor,
                        color: this.primaryColor,
                        child: new Row(
                          children: <Widget>[
                            new Padding(
                              padding: const EdgeInsets.only(left: 20.0),
                              child: Text(
                                "English",
                                style: TextStyle(color: Colors.white),
                              ),
                            ),
                            new Expanded(
                              child: Container(),
                            ),
                            new Transform.translate(
                              offset: Offset(15.0, 0.0),
                              child: new Container(
                                padding: const EdgeInsets.all(5.0),
                                child: FlatButton(
                                  shape: new RoundedRectangleBorder(
                                      borderRadius:
                                          new BorderRadius.circular(28.0)),
                                  splashColor: Colors.white,
                                  color: Colors.white,
                                  child: Icon(
                                    Icons.arrow_forward,
                                    color: this.primaryColor,
                                  ),
                                  onPressed: () {
                                    box.write('lang', 'en_US');
                                    Get.to(() => LoginScreen1());
                                  },
                                ),
                              ),
                            )
                          ],
                        ),
                        onPressed: () {
                          box.write('lang', 'en_US');
                          Get.to(() => LoginScreen1());
                        },
                      ),
                    ),
                  ],
                ),
              ),

the second page

Padding(
                  padding: const EdgeInsets.only(left: 40.0),
                  child: Text(
                    'serverAddress'.tr,
                    style: TextStyle(color: Colors.grey, fontSize: 16.0),
                  ),
                ),

There is more than this too

CodePudding user response:

GetX Provide a function to change locale language

Get.updateLocale(locale);

you need to pass locale to change the language. Eg:

var locale = Locale('hi','IN');
Get.updateLocale(locale);

CodePudding user response:

In the onPressed function, we can use the Get.updateLocale function accordingly:

onPressed: () {
  box.write('lang', 'en_US');
  Locale locale = Locale('en','en_US');
  Get.updateLocale(locale);
  Get.to(() => LoginScreen1());
}

CodePudding user response:

We've many solution for this... U read the documentation about internationalization in flutter ? https://flutter.dev/docs/development/accessibility-and-localization/internationalization

This link show a good approch to solution your question. But I work with getx with another approch...

I've a class with all strings localizations (en,es,pt ...), in my Main.dart I've a getx obs to listen all changes in localization.

See:

Main.dart:

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

  @override
  Widget build(BuildContext context){
   
    return GetX<AppController>(
      builder: (_) =>(
        _buildWithTheme(context,_)
      )
    );
    
  }

  Widget _buildWithTheme(BuildContext context, AppController state) {

    return  MaterialApp(
      title: 'App Title',
      theme:  makeAppTheme(),           
      debugShowCheckedModeBanner: false,
      initialRoute: '/',
      locale: setLocale(state),      
      navigatorKey: GeneralUtils.globalCtx,
      routes: {
          '/': (context) => const Page1(),
          '/page2': (context) => const Page2(),
      },

    );
  }

  Locale setLocale(AppController state){

    switch (state.pdvLocale) {
      
      case 'en':
        return const Locale('en','US');
      case 'es':
        return const Locale('es','');
      case 'pt':       
      default:
        return const Locale('pt','BR');
    }

  }

Page1.dart:

Text(AppLocalization.hello)

AppLocalization.dart

class AppLocalizations{

  static String hellow;

  static setStringsLocation(String localization){

    switch (localization) {
      case 'en':
        hello = 'hello';
        break;
      case 'es':   
        hello = 'hola';
        break;
      case 'pt':
      default:
        hello = 'ola';
    }
  } 
}

AppController.dart

Future<void> setLocale(String value) async{
    pdvLocale = value;
    await StoreData.instance.saveString('pdv_locale',value); 
    await AppLocalizations.setStringsLocation(pdvLocale);

    update();
}

This workaround works perfecttly for me using getx.

  • Related