Can't seem to workout why my BlocProvider is failing

I am re writing Reso Coder's TDD clean architecture course with some minor changes. End goal is to have the exact same content with latest version of flutter with updated libraries & also to have the option of Riverpod state managment. But while using flutter_bloc I can't seem to make it work.

BlocProvider buildBody({required BuildContext context}){
    return BlocProvider(
      create: (context) => sl<NumberTriviaBloc>(),
      child: Center(
        child: Padding(
          padding: const EdgeInsets.all(10.0),
          child: Column(
            children: [
              SizedBox(height: 20.0,),
              Container(
                  margin: EdgeInsets.all(5),
                  height: MediaQuery.of(context).size.height/2.5,
                  child: Placeholder()
              ),
              SizedBox(height: 20.0,),
              Column(
                children: [
                  Placeholder(fallbackHeight: 50),
                  SizedBox(height: 25),
                  Row(
                    children: [
                      Expanded(child: Placeholder(fallbackHeight: 30)),
                      SizedBox(width: 10),
                      Expanded(child: Placeholder(fallbackHeight: 30),),
                    ],
                  )
                ],
              )

            ],
          ),
        ),
      ),
    ) ;
  }

the above code seems to work fine without any errors.

But as soon as I introduce BlocBuilder (snippet given below), I get

Error: Could not find the correct Provider<NumberTriviaBloc> above this BlocBuilder<NumberTriviaBloc, NumberTriviaState> Widget

BlocProvider buildBody({required BuildContext context}){
    return BlocProvider(
      create: (context) => sl<NumberTriviaBloc>(),
      child: Center(
        child: Padding(
          padding: const EdgeInsets.all(10.0),
          child: Column(
            children: [
              SizedBox(height: 20.0,),
              //start of the problem
              BlocBuilder<NumberTriviaBloc, NumberTriviaState>(
                  builder: (context, state) {
                    if (state is Empty) {
                      return Text("1");
                    }else{
                      return Text("2");
                    }
                  }
              ),
              //end of the problem
              Container(
                  margin: EdgeInsets.all(5),
                  height: MediaQuery.of(context).size.height/2.5,
                  child: Placeholder()
              ),
              SizedBox(height: 20.0,),
              Column(
                children: [
                  Placeholder(fallbackHeight: 50),
                  SizedBox(height: 25),
                  Row(
                    children: [
                      Expanded(child: Placeholder(fallbackHeight: 30)),
                      SizedBox(width: 10),
                      Expanded(child: Placeholder(fallbackHeight: 30),),
                    ],
                  )
                ],
              )

            ],
          ),
        ),
      ),
    ) ;
  }

I have read everything I could get my hands on from the internet, still cant seem to figure it out. Any help would be much appreciated.

Full code available at here & Dependecy injection logic available here