Flutter响应式设计异常：屏幕尺寸变化时界面未切换

更新说明： #

本文中的代码为正确的最小可复现响应式代码。
问题根源在于导航至CourseDetails响应式页面的父组件，它始终被设置为跳转至MobileCourseDetailsScreen

我开发了一个名为CourseDetails的页面，为实现响应式设计，分别创建了移动端和桌面端页面，并通过一个自适应组件在窗口尺寸变化时切换页面：

class AdaptiveScreen extends StatelessWidget {
  const AdaptiveScreen(
      {super.key,
      required this.mobileLayout,
      required this.desktopLayout});

  final Widget mobileLayout, desktopLayout;
  @override
  Widget build(BuildContext context) {
 // get called when resizing
    return LayoutBuilder(
      builder: (context,constraints){
        double width = MediaQuery.of(context).size.width;
        log(width.toString());
        if (width >= SizeConfig.desktop) {  // desktop = 1200//
          return desktopLayout;
        }
        return mobileLayout;
      },
    );
  }
}

以下是CourseDetails页面的实现：

class CourseDetailsScreen extends StatelessWidget {
  const CourseDetailsScreen({super.key});

  @override
  Widget build(BuildContext context) {
    // this build method never get called when screen resize
    return AdaptiveScreen(
        mobileLayout: MobileCourseDetailsScreen(),
        desktopLayout: DesktopCourseDetailsScreen()
    );

  }
}

移动端和桌面端页面为仅显示文本的容器：

class DesktopCourseDetailsScreen extends StatelessWidget {

   DesktopCourseDetailsScreen({super.key,});

  @override
  Widget build(BuildContext context) {
    return Container(color: Colors.blue, child: Center(child: Text('Desktop Design'),),);
 }
}

class MobileCourseDetailsScreen extends StatelessWidget {
   MobileCourseDetailsScreen(
      {super.key,});

  @override
  Widget build(BuildContext context) {
   return Container(color: Colors.red, child: Center(child: Text('Mobile Design'),),);
 }
}

问题现象： 当调整屏幕尺寸超过桌面端阈值（1200）时，仍显示移动端设计，界面未切换至桌面端，且CourseDetails的build方法在屏幕resize时从未被调用。

内容的提问来源于stack exchange，提问作者A-E