我想应该是这样的：

ConstrainedBox(
  constraints: const BoxConstraints(maxWidth: 390),
  child: const ScreenUtilInit(
  //...
  ),
);

一般来说，只需将整个应用程序 Package 在Center中即可，例如

Center(
  child: SizedBox(
    height: 844,
    width: 390,
    child: MediaQuery(
      ...
    )
  )
)

但是我不熟悉ScreenUtilInit，可能是它的内部工作原理与这个解决方案不太兼容。

这将通过调整宽度在web中显示移动的设计：
验证码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'dart:ui' as ui;

class MobileDesignWidget extends StatelessWidget {
  final maxWebAppRatio = 4.8 / 6.0;
  final minWebAppRatio = 9.0 / 16.0;

  final Widget child;

  MobileDesignWidget({
    required this.child,
  });

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxHeight < constraints.maxWidth) {
          return Container(
            alignment: Alignment.center,
            child: ClipRect(
              child: AspectRatio(
                aspectRatio: getCurrentWebAppRatio(),
                child: child,
              ),
            ),
          );
        }
        return child;
      },
    );
  }

  double getCurrentWebAppRatio() {
    double currentWebAppRatio = minWebAppRatio;

    // Fixed ratio for Web
    var physicalScreenSize = ui.window.physicalSize;
    var physicalWidth = physicalScreenSize.width;
    var physicalHeight = physicalScreenSize.height;

    currentWebAppRatio = physicalWidth / physicalHeight;
    if (currentWebAppRatio > maxWebAppRatio) {
      currentWebAppRatio = maxWebAppRatio;
    } else if (currentWebAppRatio < minWebAppRatio) {
      currentWebAppRatio = minWebAppRatio;
    }
    return currentWebAppRatio;
  }
}

这样使用它：

@override
  Widget build(BuildContext context) {
    return ScreenWidthWidget(
      child: /*your scaffold*/,
    );
  }

我想这就是你想实现的，但没有设计/图片/图像是很难知道的。

void main() => runApp(const MyApp());

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

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: kIsWeb
          ? Row(children: const [
              Spacer(),
              SizedBox(
                width: 390,
                child: YourWidget(...),
              ),
              Spacer(),
            ])
          : ScreenUtilInit(...),
    );
  }
}

所以，如果你在web上运行，不要使用ScreenUtilInit（我以前没有使用过这个包），这样你就可以设置你想要的宽度，并用黑色填充剩余的空间。

你的方法的问题是你只设置了MainHomePageN的大小。当你把一个新的屏幕推到堆栈上的时候，它就不再有这些大小了。（我不熟悉ScreenUtilInit，所以我可能是错的）
一个非常过度设计的解决方案是像这样使用auto_route：

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

  @override
  Widget build(BuildContext context) {
    return const SizedBox(
      width: 500,
      child: AutoRouter(),
    );
  }
}

然后在路由文件中，你会有这样的东西：

@MaterialAutoRouter(
  replaceInRouteName: 'Screen,Route',
  routes: <AutoRoute>[
    AutoRoute(
      path: '/',
      children: [
        AutoRoute(
          path: '',
          page: LandingScreen,
        ),
        ... other screens and stuff
      ],
      page: WidgetAtTheTopOfTheApp,
    ),
  ],
)

请检查包的文档，因为我还没有测试过这个代码。
另一种方法是简单地创建一个具有所需大小的小部件，并将其放置在每个脚手架的顶部。（这将需要更多的重构）

class WidgetAtTheTopOfTheScaffold extends StatelessWidget {
  final Widget child;
  const WidgetAtTheTopOfTheScaffold({super.key, required this.child});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 500,
      child: child,
    );
  }
}

我认为有很多方法可以实现它。但是，为了只调整Web代码并更改最小的原始代码，让我们尝试使用LayoutBuilder。我们在这里没有关于您的原始代码的线索，但在屏幕的构造函数中添加一个变量。它们将是双倍宽度和双倍高度。技巧将是：如果我们在web上，我们将有一个Layoutbuilder传递自定义宽度和自定义高度。所以在屏幕的initState中，检查：

@override

void initState() {
    if (widget.width != null) {
      yourOriginalWidthVariable = widget.width; //receive the custom size from layoutBuilder simulating desirable screen size 
      yourOriginalHeightVariable = widget.height;
    } else {
      yourOriginalWidthVariable = MediaQuery.of(context).size.width; //receive the screen size
      yourOriginalWidthVariable = MediaQuery.of(context).size.height;
    }
    super.initState();
  }

有了这个，我们已经设置了屏幕大小。现在我们只需要在每一边插入黑色功能。所以，在你的主（或在根点）添加一个LayoutBuilder。我会给予你一个示例。让我们说你会把它放在你的主.dart文件：

return MaterialApp(
    onGenerateRoute: route.controller,
    initialRoute: route.indexPage,
    title: 'your app name',
    debugShowCheckedModeBanner: false,
    theme: ThemeData(
      colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      useMaterial3: true,
    ),
    home: LayoutBuilder(
    builder: (BuildContext context, BoxConstraints constraints) {
      width = constraints.maxWidth;
      height = constraints.maxHeight;
      if(kIsWeb){
        width = width&*0.25;// adjust to better simulate the mobile screen. Needs to test
        height = height*0.9; //the same
      }
      return SizedBox(
       height: constraints.maxHeight; //ensure allways max height
       width: constraints.maxWidth;// ensure always max width
       child: Row(
        children: [
         Expanded(
          child: Container(
          color: Colors.black)
         ),
         SizedBox(
         width:width, //will receive the size of your desire
         child: yourIndexScreen(width: kisweb ? width : null, height: kisWeb ? height : null); //pass the width and height if is web
        ),
         Expanded(
          child: Container(
          color: Colors.black)
         ),
        ]           
      ),
      );
      
    },
  ),
  );