Botón para cambiar el idioma Flutter

Ya no necesitas indagar más por todo internet porque estás al sitio justo, tenemos la solución que necesitas recibir sin problema.

Solución:

Puede configurar el locale propiedad de MaterialApp con su método de gestión estatal favorito. Por ejemplo:

class MyApp extends StatefulWidget 
  @override
  _MyAppState createState() => _MyAppState();

  static _MyAppState of(BuildContext context) => context.findAncestorStateOfType<_MyAppState>();


class _MyAppState extends State 
  Locale _locale;

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

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      locale: _locale,
      home: Dashboard(),
    );
  


class Dashboard extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Column(
      children: [
        TextButton(
          child: Text("Set locale to German"),
          onPressed: () => MyApp.of(context).setLocale(Locale.fromSubtags(languageCode: 'de')),
        ),
        TextButton(
          child: Text("Set locale to English"),
          onPressed: () => MyApp.of(context).setLocale(Locale.fromSubtags(languageCode: 'en')),
        ),
      ],
    );
  

Tienes que usar las localizaciones proporcionadas por Flutter. Debe utilizar archivos JSON y delegados personalizados para los idiomas admitidos. Implementé usando bloc

Pasos a seguir,

1. Crea una carpeta assets/languages/ en la carpeta raíz
2. Crear JSON archivos para los idiomas admitidos. Me gusta: en.json, es.json
3. Crear un key, pares de valores para sus cadenas en cada archivo de acuerdo con sus cadenas de idioma específicas
4. En main.dart crear predeterminado locale, supportedLocales and localizationsDelegates.

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

import 'package:movie_app/common/constants/languages.dart';
import 'package:movie_app/presentation/app_localizations.dart';
import 'package:movie_app/presentation/blocs/language/language_bloc.dart';
import 'package:movie_app/presentation/journeys/home/home_screen.dart';

class MovieApp extends StatefulWidget 
  @override
  _MovieAppState createState() => _MovieAppState();


class _MovieAppState extends State 
  LanguageBloc _languageBloc;

  @override
  void initState() 
    _languageBloc = LanguageBloc();
    super.initState();
  

  @override
  void dispose() 
    _languageBloc.close();
    super.dispose();
  

  @override
  Widget build(BuildContext context) 
    return BlocProvider.value(
      value: _languageBloc,
      child: BlocBuilder(
        builder: (context, state) 
          if (state is LanguageLoaded) 
            return MaterialApp(
                debugShowCheckedModeBanner: false,
                title: 'Movie App',
                home: HomeScreen(),
                supportedLocales:
                    Languages.languages.map((e) => Locale(e.code)).toList(),
                locale: state.locale,
                localizationsDelegates: [
                  AppLocalizations.delegate,
                  GlobalMaterialLocalizations.delegate,
                  GlobalWidgetsLocalizations.delegate,
                ],
              );
          
          return SizedBox.shrink();
        ,
      ),
    );
  

5. Ahora cree modelos de idiomas y constantes de idiomas

class LanguageEntity 
  final String code;
  final String value;

  const LanguageEntity(
     this.code,
     this.value,
  );


class Languages 
  const Languages._();

  static const languages = [
    LanguageEntity(code: 'en', value: 'English'),
    LanguageEntity(code: 'es', value: 'Spanish'),
  ];

6. Ahora cree delegado de localización de aplicaciones

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:movie_app/common/constants/languages.dart';

class AppLocalizations 
  final Locale locale;

  AppLocalizations(this.locale);

  static const LocalizationsDelegate delegate =
      _AppLocalizationDelagate();

  static AppLocalizations of(context) =>
      Localizations.of(context, AppLocalizations);

  Map _localisedString;

  Future load() async 
    final jsonString = await rootBundle
        .loadString('assets/languages/$locale.languageCode.json');
    final Map jsonMap = json.decode(jsonString);
    _localisedString =
        jsonMap.map((key, value) => MapEntry(key, value.toString()));
    return true;
  

  String translate(String key) 
    return _localisedString[key];
  


class _AppLocalizationDelagate extends LocalizationsDelegate 
  const _AppLocalizationDelagate();

  @override
  bool isSupported(Locale locale) 
    return Languages.languages
        .map((e) => e.code)
        .toList()
        .contains(locale.languageCode);
  

  @override
  bool shouldReload(covariant LocalizationsDelegate old) 
    return false;
  

  @override
  Future load(Locale locale) async 
    AppLocalizations appLocalizations = AppLocalizations(locale);
    await appLocalizations.load();
    return appLocalizations;
  

7. Ahora crea bloques

import 'dart:async';

import 'package:bloc/bloc.dart';
// import 'package:equatable/equatable.dart';
import 'package:flutter/material.dart';
import 'package:movie_app/common/constants/languages.dart';
import 'package:movie_app/domain/entities/language_entity.dart';

part 'language_event.dart';
part 'language_state.dart';

class LanguageBloc extends Bloc 
  LanguageBloc() : super(LanguageLoaded(Locale(Languages.languages[0].code)));

  @override
  Stream mapEventToState(
    LanguageEvent event,
  ) async* 
    if (event is ToggleLanguageEvent) 
      yield LanguageLoaded(Locale(event.language.code));
    
  

8.Ahora crea un evento

part of 'language_bloc.dart';

abstract class LanguageEvent 
  const LanguageEvent();


class ToggleLanguageEvent extends LanguageEvent 
  final LanguageEntity language;

  ToggleLanguageEvent(this.language);

9. Ahora crea el estado

part of 'language_bloc.dart';

abstract class LanguageState 
  const LanguageState();



class LanguageLoaded extends LanguageState 
  final Locale locale;

  LanguageLoaded(this.locale);

10. Ahora botón Crear para cambiar de idioma.

RaisedButton(child: ,RaisedButton(child: Text('Switch', 
     onPressed: (int index) 
        BlocProvider.of(context).add(
          ToggleLanguageEvent(
            Languages.languages[index], // index value can be 0 or 1 in our case
          ),                            // 0 - en, 1 - es
        );
        Navigator.of(context).pop();
      ,
);

Además, consulte el enlace para una implementación clara https://www.youtube.com/watch?v=W-2p3zB1z8k

Si está utilizando el proveedor como administración estatal, puede seguir este artículo.

https://medium.com/flutter-community/flutter-internationalization-the-easy-way-using-provider-and-json-c47caa4212b2

Sección de Reseñas y Valoraciones

Si te gustó nuestro trabajo, eres capaz de dejar un enunciado acerca de qué le añadirías a esta noticia.

---

---

Utiliza Nuestro Buscador