How to use imported DropDown widget's values in Flutter? - flutter

Question

I'm new to Flutter and I'm working on a localization feature using the easy_localizations package. I created a dropdown that shows languages you can switch to and it works perfectly fine when the dropdown is directly on the page. But since it will be on every page, I want to have the dropdown as a custom widget instead, and then just import it on the pages, like this:
const Padding(
padding: xPadding25,
child: DropDown(),
),
However, that does not work. I'm still able to click on the dropdown and choose a language, but it doesn't translate the pages anymore. I think it has to do something with the context it's translating, but I don't know how to make it so that it will take context of the pages and not its own if it makes sense.
Here's the code for the DropDown widget:
class DropDown extends StatefulWidget {
const DropDown({Key? key}) : super(key: key);
#override
State<DropDown> createState() => _DropDownState();
}
String dropdownValue = 'English';
class _DropDownState extends State<DropDown> {
#override
Widget build(BuildContext context) {
return (DropdownButton<String>(
icon: const Icon(
Icons.language,
color: scTealColor,
),
value: dropdownValue,
elevation: 16,
style: smBodyStyle,
underline: Container(
height: 2,
color: scTealColor,
),
onChanged: (String? newValue) {
setState(() {
dropdownValue = newValue ?? "";
if (dropdownValue == 'French') {
context.setLocale(const Locale('fr'));
} else {
context.setLocale(const Locale('en'));
}
});
},
items: <String>['English', 'French']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
));
}
}
Any ideas on how to implement it so that the translation works when imported to pages as a custom widget? Thanks!

Answer 1

Have you tried to pass context into your dropdown class ? for i.e.,
const Padding(
padding: xPadding25,
child: DropDown(context),
),