Bloc: More samples: Language change, Theme change, Fragment

[amreniouinnovent]

I wonder if you could add more samples especially for these cases
1-Language change
2-Theme change
3-Fragment management "https://stackoverflow.com/questions/56223550/flutter-switch-between-fragments-by-supporting-back-to-previous-fragment"

[felangel]

Hi @amreniouinnovent 👋
Thanks for opening an issue!

Regarding your question:

1. I would just recommend using the intl package for language changes as it handles everything for you
2. Theme change is included in the flutter_bloc example. Is there any particular part that you want to know more about?
3. Can you please provide a bit more detail on what specifically you’d like to see in terms of fragment management? If you have an existing example app that you’d want ported over to use the bloc library that’d be awesome 👍

Thanks!

[amreniouinnovent]

@felangel For Language change, I mean changing the language in runtime by the user, not the device language it is ok and theme no need for a sample.

But Fragments what I want a clean implementation from your side to help others using bloc as lifecycle management to widgets replacement like what we have in Android
The example is here:https://stackoverflow.com/questions/56223550/flutter-switch-between-fragments-by-supporting-back-to-previous-fragment but if you integrate your own implementation by bloc it would be much cleaner.

[felangel]

Thanks for the clarification! I’m still not sure I understand what you mean by change language at runtime but not the device language. Can you point me to an example or provide more details around why you wouldn’t want to use the device language?

I’ll look into the fragment example shortly 👍

[amreniouinnovent]

@felangel
I use most of the applications in English but some application I choose a different language "Arabic"
For example, I use Facebook English, Google Arabic, Windows 10 English, Chrome Arabic
If I got an error message in Windows 10 in the Arabic language I will not find good help on the Internet that's why I have to use Windows 10 English and same for my Bank application I use English.

Sample of language change:
https://www.didierboelens.com/2018/04/internationalization---language-selector-widget-with-auto-collapse/

[amreniouinnovent]

@felangel Thank you for being interested in my issue.
And I am sure if you add a clean implementation to Fragments a lot of Developers will use it.

[amreniouinnovent]

@felangel I refactored the fragment recipe on the stackoverflow answer and I integrated flutter bloc into it.
could you review it? if everything is working well I will make a pub library
https://github.com/amorenew/FlutterBlocFragment

[amorenew]

@felangel I have an issue in my fragment bloc in the drawer when I use
```
BlocProvider.of(context)
.dispatch(FragmentNavigateEvent(FRAGMENT_1));

It gives me error

BlocProvider.of() called with a context that does not contain a Bloc of type Bloc.
No ancestor could be found starting from the context that was passed to BlocProvider.of>().
```
While the ancestor "ContainerPage" is already wrapped in a BlocBuilder

Could you guide me on how I could make drawer works in fragment bloc?
Drawer file is class MainDrawer

[amorenew]

@felangel
I tried passing the parent context but not working

  MainDrawer({@required this.parentContext,
    Key key,
  }) : super(key: key);
  final BuildContext parentContext;

[felangel]

@amorenew I think you just forgot to specify the bloc type in your BlocProvider.of call.

It should look like

BlocProvider.of<BlocType>(context)

Hope that helps 👍

[amorenew]

@felangel yes it works thank you

[felangel]

@amorenew I took a look at your repo and it seems fine to me.

I'm still not 100% sure I understand the use-case for fragments in flutter (since everything is a widget) but I might be missing something haha.

In any case, closing this for now since it seems like all of the original questions have been addressed 👍

[amreniouinnovent]

@felangel fragment is navigation but for widget level, not page level

[amreniouinnovent]

Snippets for Change language in runtime

import 'package:location/location.dart';

class GlobalData {
  factory GlobalData() => _instance ??= new GlobalData._();
  GlobalData._();
  // One instance, needs factory
  static GlobalData _instance;

  bool isArabic = false;
}

import 'package:equatable/equatable.dart';
import 'package:meta/meta.dart';

@immutable
abstract class AppConfigState extends Equatable {
  AppConfigState([List props = const <dynamic>[]]) : super(props);
}

class AppConfigInitialState extends AppConfigState {}

class AppConfigLanguageChangedState extends AppConfigState {
  AppConfigLanguageChangedState({@required this.languageCode})
      : super(<dynamic>[languageCode]);

  final String languageCode;
}

import 'package:equatable/equatable.dart';
import 'package:meta/meta.dart';

@immutable
abstract class AppConfigEvent extends Equatable {
  AppConfigEvent([List props = const <dynamic>[]]) : super(props);
}

class AppConfigToggleLanguageEvent extends AppConfigEvent {}

class AppConfigDefaultEvent extends AppConfigEvent {}



md5-865365b97009dcc3c4f6199d665f406f



import 'dart:async';
import 'package:bloc/bloc.dart';
import 'package:supervisor_flutter/utils/shared.dart';
import './bloc.dart';

class AppConfigBloc extends Bloc<AppConfigEvent, AppConfigState> {
  @override
  AppConfigState get initialState => AppConfigInitialState();

  @override
  Stream<AppConfigState> mapEventToState(
    AppConfigEvent event,
  ) async* {
    if (event is AppConfigToggleLanguageEvent) {
      final bool isArabic = await Shared().isArabic();
      final String updatedLanguageCode = isArabic ? 'en' : 'ar';
      await Shared().saveLanguage(updatedLanguageCode);
      yield AppConfigLanguageChangedState(languageCode: updatedLanguageCode);
    } else if (event is AppConfigDefaultEvent) {
      final String languageCode = await Shared().getLanguage();
      yield AppConfigLanguageChangedState(languageCode: languageCode);
    }
  }
}



md5-865365b97009dcc3c4f6199d665f406f



    return BlocBuilder<AppConfigBloc, AppConfigState>(
        condition: (AppConfigState previousState, AppConfigState currentState) {
      if (currentState is AppConfigInitialState) {
        BlocProvider.of<AppConfigBloc>(context)
            .dispatch(AppConfigDefaultEvent());
        return false;
      }
      return true;
    }, builder: (BuildContext context, AppConfigState appConfigState) {
      String languageCode = 'en';
      if (appConfigState is AppConfigLanguageChangedState) {
        languageCode = appConfigState.languageCode;
      }
      GlobalData().isArabic = languageCode.toLowerCase().contains('ar');
      return MaterialApp(
        locale: Locale(languageCode),