Bloc gives null value when controlling multiple states - bloc

Question

I wrapped my root widget with BlocProvider and used BlocBuilder to draw my widgets according to states of ScreensControllerBloc and used BlocProvider.of(context).add(....) to change states of bloc and the first state which is ScreenIndexState is working fine inside BlocBuilder but SectionIndexState however doesn't work and when i try to use state.sectionIndex inside BlocBuilder it gives me null! please help since this is a real project and i can't solve this problem
Edit: i added the code where i used BlocBuilder
here is the code
screens_controller_event.dart
abstract class ScreensControllerEvent {}
class ChangeScreenIndexEvent extends ScreensControllerEvent {
final int newScreenIndex;
ChangeScreenIndexEvent({this.newScreenIndex});
}
class ChangeSectionIndexEvent extends ScreensControllerEvent {
final int newSectionIndex;
ChangeSectionIndexEvent({this.newSectionIndex});
}
screens_controller_state.dart
abstract class ScreensControllerState {
int currentScreenIndex;
int sectionsIndex;
}
class Uninitialized extends ScreensControllerState {
Uninitialized._();
factory Uninitialized.set() {
return Uninitialized._()
..currentScreenIndex = 0
..sectionsIndex = 1;
}
}
class ScreenIndexState extends ScreensControllerState {
ScreenIndexState._();
factory ScreenIndexState.change(int newIndex) {
return ScreenIndexState._()..currentScreenIndex = newIndex;
}
}
class SectionIndexState extends ScreensControllerState {
SectionIndexState._();
factory SectionIndexState.change(int newIndex) {
return SectionIndexState._()..sectionsIndex = newIndex;
}
}
screens_controller_bloc..dart
class ScreensControllerBloc
extends Bloc<ScreensControllerEvent, ScreensControllerState> {
#override
ScreensControllerState get initialState => Uninitialized.set();
#override
Stream<ScreensControllerState> mapEventToState(
ScreensControllerEvent event,
) async* {
if (event is ChangeScreenIndexEvent) {
yield* _mapScreenIndexChangeToState(event.newScreenIndex);
} else if (event is ChangeSectionIndexEvent) {
yield* _mapSectionIndexChangeToState(event.newSectionIndex);
}
}
Stream<ScreensControllerState> _mapScreenIndexChangeToState(
int newIndex,
) async* {
yield ScreenIndexState.change(newIndex);
}
Stream<ScreensControllerState> _mapSectionIndexChangeToState(
int newIndex,
) async* {
yield SectionIndexState.change(newIndex);
}
}
on main_screen.dart page this works:
class _MainScreenState extends State<MainScreen> {
final userAccountAdmin = CustomerAccountAdmin.instance;
ScreensControllerBloc screensControllerBloc = ScreensControllerBloc();
#override
Widget build(BuildContext context) {
screensControllerBloc = BlocProvider.of<ScreensControllerBloc>(context);
return BlocBuilder<ScreensControllerBloc, ScreensControllerState>(
builder: (context, state) => SafeArea(
child: Directionality(
textDirection: TextDirection.rtl,
child: Scaffold(
resizeToAvoidBottomPadding: false,
appBar: buildAppBar(state.screenIndex),//state.screenIndex works here
body: buildCurrentScreen(state.screenIndex),
bottomNavigationBar: BottomNavigationBar(.....),
),
),
),
);
}
}
however on this page state.sectionIndex doesn't work
class _SectionsState extends State<Sections> {
#override
Widget build(BuildContext context) {
final deviceWidth = MediaQuery.of(context).size.width;
return BlocBuilder<ScreensControllerBloc, ScreensControllerState>(
builder: (context, state) {
return Row(
children: <Widget>[
Container(
width: deviceWidth / 3,
child: Column(
children: sections[state.sectionIndex].map((section) {
return Container(...),
color: section.color,
onPressed: () {
setState(() {
for (int i = 0;
i < sections[state.sectionIndex].length;
i++) {
sections[state.sectionIndex][i].color =
Color(0xffdddddd);
}
section.color = Colors.white;
});
},
),
);
}).toList()),
),
],
);
},
);
}