@override
  Widget build(BuildContext context) {
    return ComponentTheme(
      child: MultiProvider(
        providers: [
          // Language provider for dynamic language switching; notifies components when the language changes
          ChangeNotifierProvider.value(value: LocaleProvider()),
        ],
        child: Builder(builder: (context) {
          final themeState = BaseThemeProvider.of(context);
          final isDarkMode = themeState.isDarkMode;
          // Access the language provider
          final localeProvider = Provider.of<LocaleProvider>(context);
          return MaterialApp(
            // ...... other configurations omitted
            localizationsDelegates: const [
              AtomicLocalizations.delegate,
            // ...... you can add other localization delegates for additional components
            ],
            supportedLocales: AtomicLocalizations.supportedLocales, // Supported app languages
            locale: localeProvider.locale, // Current language setting
          );
        }),
      ),
    );

final localeProvider = Provider.of<LocaleProvider>(context, listen: false);
// Switch to English
localeProvider.changeLanguage('en');

class ContactList extends StatefulWidget {
  const ContactList({
    super.key,
  });

  @override
  State<ContactList> createState() => _ContactListState();
}

class _ContactListState extends State<ContactList> {
  late AtomicLocalizations atomicLocale;
  // Other code omitted
  
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // Initialize localization dynamically
    atomicLocale = AtomicLocalizations.of(context);
  }
  
  @override
  Widget build(BuildContext context) {
    // Display the addFriend label in the current language
    return Text(atomicLocale.addFriend);
  }
}