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?
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'));