Nesting BlocBuilders to Manage Multiple States on the same Widget

Question

I wanted to nest the text Update BlocBuilder inside another BlocBuilder that controls its font size through a slider widget. But, I can't get it to work. Please help!

BlocBuilder<SettingsBloc, SettingsState>(
            builder: (context, state) {
       return BlocBuilder<TextFieldBloc, TextFieldState>(
        builder: (context, state) {
          if (state is TextFieldInitState) {
            return Text(
                state.text.toString(),
              style: TextStyle(
                fontSize: state.fontSize,
                fontFamily: 'EthiopicWookianos',
                fontWeight: FontWeight.normal,
                color: Colors.blueGrey,
              ),
            );
          } else if (state is TextFieldLaterState) {
            return Text(
              state.text.toString(),
              style: TextStyle(
                fontSize: state.fontSize,
                fontFamily: 'EthiopicWookianos',
                fontWeight: FontWeight.normal,
                color: Colors.blueGrey,
              ),
            );
          } else {
            return Text("something wrong");
          }
});
}),

Here is the code for the TextField Bloc...(of course they are in separate files).

import 'package:flutter/widgets.dart';

abstract class TextFieldEvent {}

class TextInit extends TextFieldEvent {

}

class TextChange extends TextFieldEvent {
  final String data;
  TextChange({@required this.data});
}

class TextFieldState {}

class TextFieldInitState extends TextFieldState {
  String text;
  TextFieldInitState({this.text});
}

class TextFieldLaterState extends TextFieldState {
  String text;
  TextFieldLaterState({this.text});
}

class TextFieldBloc extends Bloc<TextFieldEvent, TextFieldState> {
  @override
  get initialState => TextFieldInitState(text: '');

  @override
  Stream<TextFieldState> mapEventToState(event) async* {
    if (event is TextInit) {
      yield TextFieldInitState(text: "");
    } else if (event is TextChange) {
      yield TextFieldLaterState(text: event.data);
    }
  }
}

Here is the code for the Settings Bloc...(they are in separate files too).

part of 'settings_bloc.dart';

@immutable
abstract class SettingsEvent {
  final dynamic payload;
  SettingsEvent(this.payload);

  }

class FontSize extends SettingsEvent {
FontSize(payload) : super(payload);
}

abstract class SettingsState {
  final double sliderFontSize;

  SettingsState({this.sliderFontSize});

  double get fontSize => sliderFontSize;

}


class InitialSettingsState extends SettingsState {
  InitialSettingsState() : super(
    sliderFontSize: 20,
  );

}

class NewSettingsState extends SettingsState {
  NewSettingsState.fromOldSettingsState(SettingsState oldState,
      {double sliderFontSize})
      : super(
    sliderFontSize: sliderFontSize ?? oldState.sliderFontSize,
  );
}

class SettingsBloc extends Bloc<SettingsEvent, SettingsState> {


  @override
  SettingsState get initialState => InitialSettingsState();


  @override
  Stream<SettingsState> mapEventToState(SettingsEvent event) async* {
    if (event is FontSize) {
      SettingsState currentState;
      yield NewSettingsState.fromOldSettingsState(
          currentState, sliderFontSize: event.payload);
    }

  }

}

Answer 1

you are using two bloc together and for state you have same variable name. so when you are using it, it will consider inner state variable only.

so i think just if you just change settingstate variable name then it should work. give it a try.

BlocBuilder<SettingsBloc, SettingsState>(
            builder: (context, Settingstate) { //change variable name
       return BlocBuilder<TextFieldBloc, TextFieldState>(
        builder: (context, state) {
          if (state is TextFieldInitState) {
            return Text(
                state.text.toString(),
              style: TextStyle(
                fontSize: Settingstate.fontSize, // change variable name
                fontFamily: 'EthiopicWookianos',
                fontWeight: FontWeight.normal,
                color: Colors.blueGrey,