Am trying to change my app language using buttons, i have set up the internationalization correctly and my app is working based on the system locale or language, now i want the user to change the language by pressing button.

so basically i found a solution for that in which i need to convert the "MyApp" widget in my main.dart file to stateful widget then create a setState method to update the state of locale property, here is the main.dart code:

import 'package:athaddakapp/screens/login_screen.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(const MyApp());
}

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

  @override
  State<MyApp> createState() => _MyAppState();
  static _MyAppState? of(BuildContext context) =>
      context.findAncestorStateOfType<_MyAppState>();
}

class _MyAppState extends State<MyApp> {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    Locale _locale = Locale('ar', '');

    void setLocale(Locale value) {
      setState(() {
        _locale = value;
      });
    }

    return MaterialApp(
        title: 'Login',
        theme: ThemeData(
          primarySwatch: Colors.purple,
        ),
        localizationsDelegates: [
          AppLocalizations.delegate,
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
          GlobalCupertinoLocalizations.delegate,
        ],
        supportedLocales: [
          Locale('en', ''), // English, no country code
          Locale('ar', ''), // Arabic, no country code
        ],
        locale: _locale,
        home: LoginScreen());
  }
}

and this is the code when i want to change the language from the button:

changeLanguage() {
    return showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: Center(child: Text("choose language")),
            content: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                MaterialButton(
                  onPressed: () => MyApp.of(context)!.setLocale(Locale.fromSubtags(languageCode: 'en')),
                  color: Colors.purple,
                  height: 50,
                  minWidth: MediaQuery.of(context).size.width / 2,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        "English",
                        style: TextStyle(color: Colors.white, fontSize: 16),
                      ),
                    ],
                  ),
                ),
                SizedBox(
                  height: 10,
                ),
                MaterialButton(
                  onPressed: () {},
                  color: Colors.purple,
                  height: 50,
                  minWidth: MediaQuery.of(context).size.width / 2,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        "عربي",
                        style: TextStyle(color: Colors.white, fontSize: 16),
                      ),
                    ],
                  ),
                )
              ],
            ),
          );
        });
  }
}

the errors appears here : onPressed: () => MyApp.of(context)!.setLocale(Locale.fromSubtags(languageCode: 'en'))

now am not sure what type exactly "MyApp" widget should be and how to change its type. ill be thankful for any help.

CodePudding user response：

You are putting the set locale function inside the build function. Move it outside the build to outside the class like this :

class _MyAppState extends State<MyApp> {
    Locale _locale = Locale('ar', '');
    void setLocale(Locale value) {
        setState(() {
            _locale = value;
        });
    }

    @override
    Widget build(BuildContext context) {
    ....
    }
}