move pages using page controller Flutter Bloc

Question

how to move pages using page controller ?

menu here

      @override
      Widget build(BuildContext context) {
        final PageController pageController = PageController(
          initialPage: 0,
          keepPage: true,
        );
        // final PageController pageController = PageController();
        return Scaffold(
          body: SafeArea(
            child: PageView(
              controller: pageController,
              children: [


                const Center(
                  child: Text("Shop"),
                ),
                const Center(
                  child: Text("Shop1"),
                ),
                const Center(
                  child: Text("Shop2"),
                ),
                const Center(
                  child: Text("Shop3"),
                ),
                const Center(
                  child: Text("Shop4"),
                ),
              ],
            ),
          ),
          bottomNavigationBar: const _Menu(),
        );
      }
    }

class _Menu extends StatelessWidget {
  const _Menu({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final PageController pageController = PageController(
      initialPage: 0,
      keepPage: true,
    );

    return BlocListener<MenuBloc, MenuState>(
      listener: (context, state) {
        if (state is MenuSelected) {
          pageController.jumpToPage(state.index);
        }
      },
      child: BlocBuilder<MenuBloc, MenuState>(
        builder: (context, state) {
          return Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Container(
                decoration: BoxDecoration(
                  boxShadow: [
                    BoxShadow(
                      color: const Color(0XFFBFC4C7).withOpacity(0.5),
                      offset: const Offset(5, 8),
                      blurRadius: 15,
                      spreadRadius: 5,
                    ),
                  ],
                  color: Colors.white,
                ),
                padding: const EdgeInsets.only(
                  top: 20,
                  bottom: 40,
                  right: 10,
                  left: 10,
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    MenuItems(
                      onTap: () {
                        context.read<MenuBloc>().add(MenuSwitch(0));
                      },
                      label: "Shop",
                      icon: Icon(
                        Icons.explore,
                        size: 24,
                        color: state.index == 0
                            ? const Color(0XFF851252)
                            : const Color(0XFFD4D6DD),
                      ),
                    ),
                    MenuItems(
                      onTap: () {
                        context.read<MenuBloc>().add(MenuSwitch(1));
                      },
                      label: "Shop1",
                      icon: Icon(
                        Icons.apps,
                        size: 24,
                        color: state.index == 1
                            ? const Color(0XFF851252)
                            : const Color(0XFFD4D6DD),
                      ),
                    ),
                    MenuItems(
                      onTap: () {
                        context.read<MenuBloc>().add(MenuSwitch(2));
                      },
                      label: "Shop2",
                      icon: Icon(
                        Icons.signal_cellular_alt,
                        size: 24,
                        color: state.index == 2
                            ? const Color(0XFF851252)
                            : const Color(0XFFD4D6DD),
                      ),
                    ),
                    MenuItems(
                      onTap: () {
                        context.read<MenuBloc>().add(MenuSwitch(3));
                      },
                      label: "Shop3",
                      icon: Icon(
                        Icons.store,
                        size: 24,
                        color: state.index == 3
                            ? const Color(0XFF851252)
                            : const Color(0XFFD4D6DD),
                      ),
                    ),
                    MenuItems(
                      onTap: () {
                        context.read<MenuBloc>().add(MenuSwitch(4));
                      },
                      label: "Shop4",
                      icon: Icon(
                        Icons.account_balance_wallet,
                        size: 24,
                        color: state.index == 4
                            ? const Color(0XFF851252)
                            : const Color(0XFFD4D6DD),
                      ),
                    ),
                  ],
                ),
              )
            ],
          );
        },
      ),
    );
  }
}

how can i switch pages using page controller and bloc-bloc i have?

Answer 1

I think you have to define state each state for each of the page and emit same in the block only then the block listener will listen to change of the state.