Support editing textScaleFactor, brightness, etc. in devtools

[bryanoltman]

The ability to switch between dark/light mode, adjust text scale, switch target platform (iOS, Android, etc.) would allow devs to quickly verify that their widget functions as expected in a variety of environments.

To illustrate the benefit this would provide, the current flow for switching between dark/light mode on an iOS simulator is:

• Open the Settings app
• Open the Developer page
• Toggle "Dark appearance"

Even worse, changing text scale:

• Open the Settings app
• Open the Accessibility page
• Open the Display & Text Size page
• Open the Larger Text page
• Drag the slider up or down to adjust text scale

Having a way to do this without so many clicks and without having to leave the app would be phenomenal.

https://pub.dev/packages/device_preview demonstrates a version of the functionality that would be great to have as part of DevTools.

[kenzieschmoll]

We would need to add functionality in the Flutter framework to change these settings, and then expose hooks via service extensions that DevTools can call. @goderbauer does functionality already exist in the framework to change these settings? Would adding this functionality be trivial?

[goderbauer]

dark/light mode, adjust text scale, switch target platform

Two if these are already exposed on the command line when you do a flutter run. From the help command:

o Simulate different operating systems.                                      (defaultTargetPlatform)
b Toggle platform brightness (dark and light mode).                        (debugBrightnessOverride)

So, for those two we should already have all the hooks necessary in place and devtools could just call the same hooks flutter_tools is currently calling here.

Adding "text scale" to this seem reasonably straight forward and could follow the same path we already use for the other two options.

[bryanoltman]

@goderbauer do these options exist outside of the CLI? For example, if I launched my app from VS Code, how would I access this functionality?

[kenzieschmoll]

A service extension already exists for the target platform - we just need to expose this in DevTools (https://github.com/flutter/devtools/issues/2780). For the toggle platform brightness, I suspect we'll have to add the service extension first and then expose it from DevTools. Same for the text scale option once the functionality for changing it exists in the framework.

[goderbauer]

if I launched my app from VS Code, how would I access this functionality?

I am not familiar with the VS Code plugin, so I don't know if the functionality is exposed there. The plugin could call into the same APIs the CLI tool is using, though. @DanTup may know if the feature already exists.

For the toggle platform brightness, I suspect we'll have to add the service extension first and then expose it from DevTools.

Can you just use this one? https://github.com/flutter/flutter/blob/526ca0d498120e93efbdd25f8824825dd7b6b13f/packages/flutter/lib/src/foundation/binding.dart#L498

Same for the text scale option once the functionality for changing it exists in the framework.

Correct, I don't think we have this one exposed yet. Shouldn't be a problem, though.

[kenzieschmoll]

I am not familiar with the VS Code plugin so I don't know if the functionality is exposed there.

@DanTup does VS code expose toggles like this outside of the embedded DevTools? Would it be better to just expose these through the inspector so that both IDEs can benefit?

Can you just use this one? https://github.com/flutter/flutter/blob/526ca0d498120e93efbdd25f8824825dd7b6b13f/packages/flutter/lib/src/foundation/binding.dart#L498

Yep - didn't know a service extension to toggle the debug bool already existed, but that's exactly what we need.

[DanTup]

We do already expose some of these services as commands in VS Code (in the command palette). There's already brightness toggle and target platform, but we don't have text scale factor.:

If you're not actively using DevTools then there's probably some value having them exposed here, although it may make sense to just stick to the simplest/most common ones to reduce the maintenance (and have a larger set in DevTools).

[bryanoltman]

Oh interesting! I've been developing Flutter in VS Code for something like 3 years now and had no idea those commands existed.

[xster]

@chingjun when we start working on VSCode support, I assume these vm services functions will work the same way inside Google?

[KoheiKanagu]

device_preview has not been maintained for over a year. The development experience would be great if devtools supported similar functionality.