Modify the languague when clicking the button using localizations

Question

I'm using localizations.

And I want to change the language of the app when I click the button

Code for the button

onPressed: () {
              Navigator.pushNamed(context, 'version');
            },
            child: Text('العربية'),
          ),

So I can access it from the other page

controller: uname,
            decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText:  AppLocalizations.of(context)?.username,
                hintText: 'اسم المستخدم من فضلك'),
          ),

List of the lang I have:

 static const List<Locale> supportedLocales = <Locale>[
    Locale('ar'),
    Locale('en'),
    Locale('fr')
  ];