Home > Blockchain >  unable to translate the whole app using easy localization flutter
unable to translate the whole app using easy localization flutter

Time:07-29

I have an app where I am converting English to Arabic. I am using easy localization package. The problem I am facing is, I am only able to convert one page (the page in which I choose the English is turning to Arabic) but when I go to another page, no translation is being done. The current code is this:

main.dart

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await EasyLocalization.ensureInitialized();

  runApp(EasyLocalization(
    supportedLocales: [
      Locale("en"),
      Locale("ar"),
    ],
    path: 'assets/languages',
    saveLocale: true,
    fallbackLocale: Locale('en'),
    child:  MyApp(),
  ));
}

class MyApp extends StatelessWidget {

   MyApp({Key? key}) : super(key: key);
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
      
        primarySwatch: Colors.blue,
      ),
      localizationsDelegates: context.localizationDelegates,
      supportedLocales: context.supportedLocales ,
      locale: context.locale,
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

This is the code in which I am converting the language from English to Arabic (I am using a drop down to change):

    String? dropdownvalue = 'English';
    Locale? lang = Locale("en");

    // List of items in our dropdown menu

    final language = Material(
      elevation: 0.9,
      borderRadius: BorderRadius.circular(10),
      child: Container(
        width: width*0.95,
        height: height*0.13,

        decoration:  BoxDecoration(
          borderRadius: BorderRadius.circular(150),),

        child: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Container(


            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Container(
                  height: height*0.13,


                  width: width*0.16,

                  child:
                  Image.asset('assets/images/fa_language.png'),
                  decoration: BoxDecoration(
                    color: Color(0xFFF9F2E7),

                    borderRadius: BorderRadius.circular(10),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 8.0,bottom: 8.0,left: 15.0,right: 15.0),
                  child: Row(
                    children: [
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          SizedBox(height: 10,),
                          Text("Language".tr().toString(),style: GoogleFonts.barlow(textStyle:  TextStyle(fontFamily: 'Barlow',fontSize: 14,fontWeight: FontWeight.w500,fontStyle: FontStyle.normal,color:Color(0xFF222222) ),),
                          ),SizedBox(height: height*0.01,),
                          Container(
                            width: width*0.69,
                            decoration: BoxDecoration(
                              border: Border.all(width: 1.4, color: Color(0xFFEEEEEE)),

                              borderRadius: BorderRadius.all(Radius.circular(4)),
                            ),

                            child: Row(
                              children: [
                                SizedBox(
                                  height: 32,
                                  child: DropdownButtonHideUnderline(
                                    child: DropdownButton(
                                      iconSize: 0.0,
                                      // Initial Value
                                      value: lang,
                                      // Down Arrow Icon

                                      // Array list of items
                                        items: [
                                    DropdownMenuItem( value: Locale( 'en' ),
                                    child: Text( '   English',    style: GoogleFonts.barlow(textStyle:  TextStyle(fontFamily: 'Barlow',fontSize: 14,fontWeight: FontWeight.w500,fontStyle: FontStyle.normal,color:Color(0xFF222222) ),),),),
                              DropdownMenuItem( value: Locale( 'ar' ),

                                child: Text( '  العربية'),),

                                  ],

                                      onChanged: (Locale? newValue) {
                                        setState(() {
                                          // lang = newValue! as Locale?;
                                          dropdownvalue="ej";
                                          context.locale = newValue!;

                                        });
                                      },
                                    ),
                                  ),
                                ),
                                SizedBox(width: width*0.47,),
                                ImageIcon(AssetImage("assets/images/downArrow.png")),
                              ],
                            ),
                          ),



                        ],
                      ),

                    ],
                  ),
                ),

              ],
            ),

          ),
        ),
      ),
    );

To change the language in this page I just add this to change the language:

Text("hello".tr().toString());

and it works. But if I do the same thing in another page it does not. Can someone help me please?

CodePudding user response:

It is because you are not setting the app locale to your selected locale language.

Use the following code in your onChanged function in your dropDown:

context.setLocale(Locale('en', 'US'));
  • Related