Repository: flutter
Issue:  WASM + video_player + ShellRoute offset bug
Labels: platform-web,p: video_player,has reproducible steps,P2,p: go_router,e: wasm,e: web_skwasm,team-web,triaged-web,found in release: 3.27,found in release: 3.28

### Steps to reproduce

When building a video player with GoRouter ShellRoute and a left navigation bar, the video player is shifted to the right if building with WASM flag.

### Expected results

The video player does not shift to the right.

### Actual results

The video player shifts to the right.

### Code sample

<details open><summary>Code sample</summary>

```dart
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:video_player/video_player.dart';

void main() {
  runApp(const MyApp());
}

// 1. We use MaterialApp.router with a GoRouter
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      debugShowCheckedModeBanner: false,
      routerConfig: _router,
    );
  }
}

// 2. Define our GoRouter with a top-level '/' and a ShellRoute
final _router = GoRouter(
  routes: [
    // Top-level route (no shell)
    GoRoute(
      path: '/',
      builder: (context, state) => const HomePage(),
    ),

    // ShellRoute that surrounds the child route '/video'
    ShellRoute(
      builder: (context, state, child) {
        return Scaffold(
          // A row that has a left nav area and the main content
          body: Row(
            children: [
              // Left nav bar
              SizedBox(
                width: 160,
                // For styling, we give it a background color
                child: _MyLeftNavBar(),
              ),

              // The "main content" is whichever child route we navigate to
              Expanded(
                child: child,
              ),
            ],
          ),
        );
      },
      routes: [
        // The child route (the "main content" that goes to the Expanded section)
        GoRoute(
          path: '/video',
          builder: (context, state) => const VideoPage(),
        ),
      ],
    ),
  ],
);

// 3. A simple “Home” page with a button to show we can navigate to the shell route
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home (No Shell)')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => context.go('/video'),
          child: const Text('Go to Video'),
        ),
      ),
    );
  }
}

// 4. Our left nav bar widget
//    This is displayed by the shell, so it’s visible whenever we're on '/video' route.
class _MyLeftNavBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blueGrey.shade100,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text('Left Nav', style: TextStyle(fontSize: 18)),
          const SizedBox(height: 20),
          ElevatedButton(
            onPressed: () => context.go('/'), // navigate to Home
            child: const Text('Go Home'),
          ),
          const SizedBox(height: 20),
          ElevatedButton(
            onPressed: () => context.go('/video'), // navigate to /video
            child: const Text('Go Video'),
          ),
        ],
      ),
    );
  }
}

// 5. The child route that shows a VideoPlayer
class VideoPage extends StatefulWidget {
  const VideoPage({super.key});

  @override
  State<VideoPage> createState() => _VideoPageState();
}

class _VideoPageState extends State<VideoPage> {
  late VideoPlayerController _controller;
  late Future<void> _initializeVideoPlayerFuture;

  @override
  void initState() {
    super.initState();
    // A sample 5-second MP4 link. Replace with your own if desired
    _controller = VideoPlayerController.networkUrl(
      Uri.parse('https://samplelib.com/lib/preview/mp4/sample-5s.mp4'),
    );

    _initializeVideoPlayerFuture = _controller.initialize().then((_) {
      _controller.setLooping(true);
      _controller.setVolume(0); // Mute to avoid autoplay blocking
      _controller.play();
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: FutureBuilder<void>(
        future: _initializeVideoPlayerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            final ratio = _controller.value.aspectRatio;
            return AspectRatio(
              aspectRatio: ratio > 0 ? ratio : 16 / 9,
              child: VideoPlayer(_controller),
            );
          } else {
            return const CircularProgressIndicator();
          }
        },
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

```

</details>


### Screenshots or Video

<details open>
<summary>Screenshots / Video demonstration</summary>

[Upload media here]

</details>
<img width="1191" alt="Regular build" src="https://github.com/user-attachments/assets/7586d4d2-fe3f-4a78-ac66-bc50ba4f3563" />
<img width="1191" alt="WASM build" src="https://github.com/user-attachments/assets/6ad5cb07-60ae-432f-b95d-6d33ebf1096f" />



### Logs

<details open><summary>Logs</summary>

```console
flutter run -d chrome

Launching lib/main.dart on Chrome in debug mode...
Waiting for connection from debug service on Chrome...              9.7s
This app is linked to the debug service: ws://127.0.0.1:50602/IhdCtZcSa2M=/ws
Debug service listening on ws://127.0.0.1:50602/IhdCtZcSa2M=/ws

🔥  To hot restart changes while running, press "r" or "R".
For a more detailed help message, press "h". To quit, press "q".

A Dart VM Service on Chrome is available at: http://127.0.0.1:50602/IhdCtZcSa2M=
The Flutter DevTools debugger and profiler on Chrome is available at: http://127.0.0.1:9102?uri=http://127.0.0.1:50602/IhdCtZcSa2M=
Application finished.

flutter run -d chrome --wasm

Launching lib/main.dart on Chrome in debug mode...
Compiling lib/main.dart for the Web...                             941ms
✓ Built build/web

🔥  To hot restart changes while running, press "r" or "R".
For a more detailed help message, press "h". To quit, press "q".

```

</details>


### Flutter Doctor output

<details open><summary>Doctor output</summary>

```console
[✓] Flutter (Channel stable, 3.27.1, on macOS 14.5 23F79 darwin-arm64, locale en-US)
    • Flutter version 3.27.1 on channel stable at /Users/anh/Dev/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 17025dd882 (3 weeks ago), 2024-12-17 03:23:09 +0900
    • Engine revision cb4b5fff73
    • Dart version 3.6.0
    • DevTools version 2.40.2

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc2)
    • Android SDK at /Users/anh/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0-rc2
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

[!] Xcode - develop for iOS and macOS (Xcode 16.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16C5032a
    ! iOS 18.2 Simulator not installed; this may be necessary for iOS and macOS development.
      To download and install the platform, open Xcode, select Xcode > Settings > Components,
      and click the GET button for the required platform.

      For more information, please visit:
        https://developer.apple.com/documentation/xcode/installing-additional-simulator-runtimes
    • CocoaPods version 1.14.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)

[✓] VS Code (version 1.96.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.102.0

[✓] Connected device (3 available)
    • macOS (desktop)                 • macos                 • darwin-arm64   • macOS 14.5 23F79 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin         • macOS 14.5 23F79 darwin-arm64
    • Chrome (web)                    • chrome                • web-javascript • Google Chrome 131.0.6778.205

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.
```

</details>