iOS context menu shadow

[justinmc]

The shadow on the iOS text selection toolbar seems too light compared to native. This PR tweaks the values to try to match it more closely. Here are the things I ended up changing:

1. I adjusted the blurRadius based on a measurement I took from the screenshot of native below.
2. I adjusted the position of the shadow. Previously it was extended down below the arrow, but I found that it looked more accurate when it simply had the same position as the menu (including the arrow). I also tried shrinking it so that it didn't hang down near the arrow, but that looked wrong to me when comparing with native.
3. I adjusted the opacity by starting with @MitchellGoodwin's value of 0.14 mentioned in the issue and then darkening it until it looked close (eyeballing it).

I'm no expert, but this looks much better to me based on the screenshots below. However, there are still many other fidelity problems with this menu, like the thickness of the divider between buttons, and I see small 1 or 2 pixel artifacts in the arrow and elsewhere, and so on. These tweaks will not be handled by this PR.

Lastly, if anyone still sees some imperfection with this after it is merged and wants to continue making tweaks, don't hesitate to do so. These changes are just my best guess.

Flutter old	Flutter new	Native (physical iPad iOS 16.3.1)

Reference app

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

void main() {
  debugDefaultTargetPlatformOverride = TargetPlatform.iOS;
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        platform: TargetPlatform.iOS,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;
  final TextEditingController controller = TextEditingController(
    text: 'Foo',
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              controller: controller,
            ),
          ],
        ),
      ),
    );
  }
}

TODOs

• Screenshot this on a real iOS device.
• Run the reference app above on a real iOS device. Tweak the values and screenshot it.
• Post both screenshots here.
• Update the comment in the code to match the version of the iOS device used.
• Make sure tests pass, and maybe add a test.

Fixes #120373

[bernaferrari]

I'm not sure how feasible, but you could try to overlay the Flutter widget on top of a screenshot of the iOS thing and apply a blendMode of subtract to see if the end result is nothing.

[justinmc]

I haven't thought of that before, thanks for the idea!

[justinmc]

I posted some screenshots above, but I didn't have much luck programmatically comparing them due to other small differences. I think we'll need to fix some of the other problems I mentioned before we can really make this pixel perfect.

[gnprice]

Neat! That looks a lot closer, and I think it will fix the lack of contrast that is #120373.

I adjusted the position of the shadow. Previously it was extended down below the arrow, but I found that it looked more accurate when it simply had the same position as the menu (including the arrow).

This sounds like it will put the shadow in the direction of the arrow, when seen as a shadow of the menu itself. In the native screenshot in #120373, the arrow is above the menu (because the menu is below the text) but the shadow is still below the menu.

So I think one thing that would be good is to compare screenshots in the case where the arrow is above the menu, as well as when the arrow is below.

[justinmc]

Good call, I'll try that as well and add screenshots above.

[justinmc]

Added the screenshots. You're right that the shadow is below the toolbar on native and not in Flutter. I'll see if I can fix that.

[bernaferrari]

The shadow looks way better now. We can make it perfect another day. It is already "good enough" for now.

Next up, fixing the chevron? The Flutter chevron is so odd. It is spiky, while iOS is rounded.

[justinmc]

I've updated it so that the shadow is always offset to the bottom. Turning off blurRadius so you can see it better, it looks like the screenshot below. I've also updated the screenshots in the description up top with the final blurred version. I'll write a test and then put this into review.

[gnprice]

LGTM!

In the screenshots, to my eye it looks like the shadow is slightly darker with the PR than it is for the native toolbar. But I'm not sure — it's possible that's just an illusion caused by the small differences in the context and the size of the screenshot. If someone does want to do the work to really dial it in exactly, that can be a followup, and this will give them a much better starting point.

[justinmc]

Sounds good, I will happily help with review if anyone with a good eye for iOS wants to tweak that.

[bernaferrari]

I want to review and see if I can improve even further, but I don't think I'll be able to do that today or tomorrow (and, regardless, your change improved the situation loooot already), so feel free to merge it. We can later tweak 0.10 to 0.07, but the biggest tweak was already made by you :)

That said, I'm going after that chevron. But first I want to see if I can get the iOS border merged (PR also coming soon lol)

[bernaferrari]

Now I have approving powers.. I approve lol

[justinmc]

Thanks! I'm happy to review those.