Flutter CarouselController报错：PageController未关联PageView

问题描述 #

在Flutter项目中，我在ScreenA中实例化了CarouselController：

final CarouselController _carouselController = CarouselController();

从ScreenB通过Bloc触发事件后，在ScreenA的BlocListener中处理TestAStatus.saving状态时，先调用Navigator.of(context).pop()试图退出ScreenB，接着通过PictureCarouselBloc触发ChangeCarousel事件。在对应的BlocListener中，即使判断了组件已挂载且_carouselController.ready，调用_carouselController.jumpToPage(state.index)仍报错：

'positions.isNotEmpty': PageController.page cannot be accessed before a PageView is built with it

同时还存在执行pop操作后界面仍停留在ScreenB的异常。相关代码结构如下：

class _ScreenAState extends State<ScreenA> {
  final CarouselController _carouselController = CarouselController();
  final CarouselController _carouselModalController = CarouselController();


  @override
  void initState() {
    context.read<TestABloc>().add(InitStatusATest());

    super.initState();
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MultiBlocListener(
      listeners: [
        BlocListener<TestABloc, TestAState>(
          bloc: context.read<TestABloc>(),
          listener: (context, state){
            switch (state.status) {
              case TestAStatus.saving:
                /// Exits ScreenB
                Navigator.of(context).pop();

                /// Functions that calls the state to change the carousel
                context.read<PictureCarouselBloc>().add(
                  ChangeCarousel(
                     pictureList: [],
                     isImagePage: false,
                  ),
                );


                break;
              default:
            }
          },
        ),
        // * PICTURE CAROUSEL BLOC - LISTENER
        BlocListener<PictureCarouselBloc, PictureCarouselState>(
          bloc: context.read<PictureCarouselBloc>(),
          listener: (context, state) {
            switch (state.status) {
              case PictureCarouselStatus.change:
                if (mounted) {
                  if (_carouselController.ready) {
                    if (state.isAnimated) {
                      _carouselController.animateToPage(
                        state.index,
                        duration: const Duration(milliseconds: 300),
                      );
                    } else {
                      _carouselController.jumpToPage(state.index); /// ERROR HERE
                    }
                  }
                }
                break;
             
              default:
            }
          },
        ),
      ],
      child: WillPopScope(
        onWillPop: null,
        child: Scaffold(
          resizeToAvoidBottomInset: false,
          appBar: [...],
          // * TEST A BLOC - BUILDER
          body: BlocBuilder<TestABloc, TestAState>(
            bloc: context.read<TestABloc>(),
            builder: (context, state) {
              switch (state.status) {
                case TestAStatus.success:
                  return PictureCarousel(
                    carouselController: _carouselController,
                    carouselModalController: _carouselModalController,
                  );
                case TestAStatus.failure:
                  return ErrorMessage(
                    state.failureMessage,
                    isFailure: true,
                    isIcon: true,
                  );
                default:
                  return const Container();
              }
            },
          ),
        ),
      ),
    );
  }


class PictureCarousel extends StatelessWidget {
  const PictureCarousel({
    Key? key,
    required this.carouselController,
    required this.carouselImagePageController,
  }) : super(key: key);


  final CarouselController carouselController;
  final CarouselController carouselImagePageController;


  @override
  Widget build(BuildContext context) {
    return Container(
      height: Device.w(33),
      child: BlocBuilder<PictureCarouselBloc, PictureCarouselState>(
        bloc: context.read<PictureCarouselBloc>(),
        builder: (context, state) {
          switch (state.status) {
            case PictureCarouselStatus.change:
            case PictureCarouselStatus.success:
              return _PictureCarouselBody(
                pictureList: [],
                isImagePage: state.isImagePage,
                carouselController: carouselController,
                carouselImagePageController: carouselImagePageController,
              );
            case PictureCarouselStatus.loading:
              return const LoadingWidget();
            case PictureCarouselStatus.failure:
              return ErrorMessage(
                state.failureMessage,
                isFailure: true,
                isIcon: true,
              );
            default:
              return Container();
          }
        },
      ),
    );
  }
}


// * PICTURE CAROUSEL BODY
class _PictureCarouselBody extends StatelessWidget {
  const _PictureCarouselBody({
    Key? key,
    required this.pictureList,
    required this.isImagePage,
    required this.carouselController,
    required this.carouselImagePageController,
  }) : super(key: key);

  final List<dynamic> pictureList;
  final CarouselController carouselController;
  final CarouselController carouselImagePageController;
  final bool isImagePage;

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: [
        GestureDetector(
          onTap: null,

          child: SizedBox(
            width: Device.screenWidth,
            height: Device.screenHeight,
            child: CarouselSlider(
                      carouselController: isImagePage
                          ? carouselImagePageController
                          : carouselController,
                      options: CarouselOptions(
                        viewportFraction: 1.0,
                        height: _carouselHeight,
                        initialPage: state.index,
                        enableInfiniteScroll: false,
                      ),
                      items: []
                    ),
      
          ),
        ),
      ],
    );
  }


}

解决方案 #

1. 修复Navigator.pop失效问题 #

Navigator.of(context).pop()失效通常是因为使用的上下文不属于ScreenB所在的导航栈，可改用根上下文执行pop：

Navigator.of(context, rootNavigator: true).pop();

另外，pop是异步操作，直接在其后发送Bloc事件会导致ScreenA UI未完成重建，CarouselSlider还未关联Controller。需等待pop完成后再执行后续逻辑：

case TestAStatus.saving:
  await Navigator.of(context).pop();
  Future.microtask(() {
    context.read<PictureCarouselBloc>().add(
      ChangeCarousel(
        pictureList: [],
        isImagePage: false,
      ),
    );
  });
  break;

2. 解决CarouselController未就绪问题 #

_carouselController.ready的判断存在延迟，因为CarouselSlider的PageView需要时间完成构建并绑定Controller。可将跳转逻辑移到Carousel组件内部，确保组件已构建完成：

// 修改_PictureCarouselBody的build方法，内置BlocListener监听状态
@override
Widget build(BuildContext context) {
  return BlocListener<PictureCarouselBloc, PictureCarouselState>(
    listener: (context, state) {
      if (state.status == PictureCarouselStatus.change) {
        final targetController = isImagePage ? carouselImagePageController : carouselController;
        if (state.isAnimated) {
          targetController.animateToPage(
            state.index,
            duration: const Duration(milliseconds: 300),
          );
        } else {
          targetController.jumpToPage(state.index);
        }
      }
    },
    child: Stack(
      alignment: Alignment.center,
      children: [
        GestureDetector(
          onTap: null,
          child: SizedBox(
            width: Device.screenWidth,
            height: Device.screenHeight,
            child: CarouselSlider(
              carouselController: isImagePage
                  ? carouselImagePageController
                  : carouselController,
              options: CarouselOptions(
                viewportFraction: 1.0,
                height: _carouselHeight,
                initialPage: state.index,
                enableInfiniteScroll: false,
              ),
              items: []
            ),
          ),
        ),
      ],
    ),
  );
}

也可以在ScreenA的BlocListener中，等待Widget完成下一帧构建后再执行跳转：

case PictureCarouselStatus.change:
  if (mounted) {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (_carouselController.ready) {
        if (state.isAnimated) {
          _carouselController.animateToPage(
            state.index,
            duration: const Duration(milliseconds: 300),
          );
        } else {
          _carouselController.jumpToPage(state.index);
        }
      }
    });
  }
  break;

3. 完善Controller生命周期管理 #

确保CarouselController在ScreenA销毁时正确释放，避免内存泄漏：

@override
void dispose() {
  _carouselController.dispose();
  _carouselModalController.dispose();
  _scrollController.dispose();
  super.dispose();
}

4. 验证Controller绑定逻辑 #

检查TestAStatus.success状态下，PictureCarousel是否正确将_carouselController传递到CarouselSlider，避免出现Controller未绑定的情况。

内容的提问来源于stack exchange，提问作者Daniel Roldán