[url_launcher] nested Link element not working [web]

[quaaantumdev]

Steps to reproduce

1. Place one Link widget somewhere inside another Link widget
2. Run it for web
3. Try hovering or clicking the inner Link widget (will not work in web)

(it does work on android but not on web)

Expected results

Both the outer and the inner Link widget should open the Uri they have been assigned.

Actual results

The other Link widget works as expected.
The inner Link widget does not allow clicks at all AND the browser shows the outer's Uri on hover.

Code sample

I created a simple app only to demonstrate this, all the code is in the main.dart file: https://github.com/quaaantumdev/urllauncher_nested_link_issue

The App is very simple, it shows a stream of dummy-posts, each made by some user. It should be possible to click the post, leading to the page for the post. It should also be possible to click the part for the user and this should lead you to the user's page.

You can simply run the app and try to click the user-part to see the issue.

Code sample from the example app which creates the two Link widgets

Widget _buildSinglePost({
  required BuildContext context,
  required String postId,
  required String userId,
}) {
  return Card(
    /// here is the [Link] widget that creates the the "outer layer"
    child: Link(
      uri: Uri.parse('/post/$postId'),
      builder: (context, followLink) => InkWell(
        onTap: followLink,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Padding(
              padding: const EdgeInsets.all(16),
              child: Text('A short post that goes by the id $postId. '
                  'Clicking this outer InkWell should open page for post $postId.'),
            ),

            /// here is the [Link] widget that creates the the "inner layer"
            Link(
              uri: Uri.parse('/user/$userId'),
              builder: (context, followLink) {
                return Padding(
                  padding: const EdgeInsets.fromLTRB(16, 0, 16, 16),
                  child: InkWell(
                    onTap: followLink,
                    child: Container(
                      decoration: BoxDecoration(
                          border: Border.all(
                              width: 1, color: const Color(0xcccccccc))),
                      padding: const EdgeInsets.all(16),
                      child: Text('Attributed to user $userId. '
                          'Clicking this inner InkWell should open the page for user $userId.'),
                    ),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    ),
  );
}

I also tried this with GestureDetector instead of the Inkwell, same result there.

Screenshots or Video

No response

Logs

No response

Flutter Doctor output

Doctor output

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.19.6, on Microsoft Windows [Version 10.0.19045.4291], locale en-GB)
[√] Windows Version (Installed version of Windows is version 10 or higher)
[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[√] Chrome - develop for the web
[√] Visual Studio - develop Windows apps (Visual Studio Build Tools 2019 16.11.32)
[√] Android Studio (version 2023.1)
[√] VS Code (version 1.88.0)
[√] Connected device (3 available)
[√] Network resources

• No issues found!

[danagbemava-nc]

Reproducible using the code sample provided in the repo above.

I tested on macOS and it worked as expected there as well, so this appears to be web specific.

Labeling for further investigation

flutter doctor -v

[!] Flutter (Channel stable, 3.19.6, on macOS 14.4.1 23E224 darwin-arm64, locale en-GB)
    • Flutter version 3.19.6 on channel stable at /Users/nexus/dev/sdks/flutter
    ! Warning: `flutter` on your path resolves to /Users/nexus/dev/sdks/flutters/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutter. Consider adding /Users/nexus/dev/sdks/flutter/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/nexus/dev/sdks/flutters/bin/dart, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutter. Consider adding /Users/nexus/dev/sdks/flutter/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 54e66469a9 (3 weeks ago), 2024-04-17 13:08:03 -0700
    • Engine revision c4cd48e186
    • Dart version 3.3.4
    • DevTools version 2.31.1
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Users/nexus/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode-15.3.0.app/Contents/Developer
    • Build 15E204a
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.1)
    • Android Studio at /Users/nexus/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 17.0.7+0-17.0.7b1000.6-10550314)

[✓] IntelliJ IDEA Ultimate Edition (version 2023.2.5)
    • IntelliJ at /Users/nexus/Applications/IntelliJ IDEA Ultimate.app
    • Flutter plugin version 77.2.2
    • Dart plugin version 232.10286

[✓] VS Code (version 1.88.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.88.0

[✓] Connected device (3 available)
    • Dean’s iPad (mobile) • 00008103-000825C811E3401E • ios            • iOS 17.4.1 21E236
    • macOS (desktop)      • macos                     • darwin-arm64   • macOS 14.4.1 23E224 darwin-arm64
    • Chrome (web)         • chrome                    • web-javascript • Google Chrome 124.0.6367.119
    ! Error: Browsing on the local area network for Nexus. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
      The device must be opted into Developer Mode to connect wirelessly. (code -27)

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

[✓] Flutter (Channel master, 3.22.0-27.0.pre.13, on macOS 14.4.1 23E224 darwin-arm64, locale en-GB)
    • Flutter version 3.22.0-27.0.pre.13 on channel master at /Users/nexus/dev/sdks/flutters
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision a318c79979 (8 hours ago), 2024-05-08 01:52:11 -0400
    • Engine revision 78878241c8
    • Dart version 3.5.0 (build 3.5.0-131.0.dev)
    • DevTools version 2.35.0

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Users/nexus/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode-15.3.0.app/Contents/Developer
    • Build 15E204a
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.1)
    • Android Studio at /Users/nexus/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 17.0.7+0-17.0.7b1000.6-10550314)

[✓] IntelliJ IDEA Ultimate Edition (version 2023.2.5)
    • IntelliJ at /Users/nexus/Applications/IntelliJ IDEA Ultimate.app
    • Flutter plugin version 77.2.2
    • Dart plugin version 232.10286

[✓] VS Code (version 1.88.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.88.0

[✓] Connected device (4 available)
    • Dean’s iPad (mobile)            • 00008103-000825C811E3401E • ios            • iOS 17.4.1 21E236
    • macOS (desktop)                 • macos                     • darwin-arm64   • macOS 14.4.1 23E224 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad     • darwin         • macOS 14.4.1 23E224 darwin-arm64
    • Chrome (web)                    • chrome                    • web-javascript • Google Chrome 124.0.6367.119
    ! Error: Browsing on the local area network for Nexus. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
      The device must be opted into Developer Mode to connect wirelessly. (code -27)

[✓] Network resources
    • All expected network resources are available.

• No issues found!

[yjbanov]

As for today, this is by design. Links are platform views, and platform views are leaf layers. What actually happens is one platform view is stacked on top of another platform view rather than becoming a child of the other. If we want <a> tags to be nested within other <a> tags, that's a whole different design, and something that Flutter's platform view system does not currently support.