Improve docs on MediaQuery: highContrast, invertColors and disableAnimations

Changing the values of highContrast, invertColors, and maybe disableAnimations, in a MediaQuery does not affect the app.

I am not sure how to test disableAnimations, in another project I created some animations and set the simulator to Reduce motion but I could not see any difference, so I am not sure how I could test this.

Note that boldText, which is set in MediaQuery in the same way, works as expected (see below).

Steps to Reproduce

Run flutter create bug.
Update the files as follows (full code is available at the end of the issue):
- Add darkTheme, highContrastTheme, and highContrastDarkTheme to the MaterialApp. For instance:

MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      highContrastTheme: ThemeData.dark(),
      highContrastDarkTheme: ThemeData.light(),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );

Add a bool _switchValues = false; property to _MyHomePageState.
Add _switchValues = !_switchValues; to the setState in _incrementCounter().
Wrap Scaffold with a MediaQuery with data:

MediaQuery.of(context).copyWith(
        highContrast: _switchValues,
        invertColors: _switchValues,
        boldText: _switchValues,
        disableAnimations: _switchValues,
      ),

Run the app on a iOS simulator. Every time you tap the increment button...

Expected results:

The text in the app switches from normal to bold and vice versa.
The theme of the app switches from normal to high contrast and vice versa.
The app switches from normal to inverted colours and vice versa.
Animations switches from enabled to disabled and vice versa (not sure how to test this).

Actual results:

Correct: The text in the app switches from normal to bold and vice versa.
Wrong: The theme of the app does NOT switch from normal to high contrast and vice versa.
Wrong: The app does NOT switch from normal to inverted colours and vice versa.
Untested: Animations switches from enabled to disabled and vice versa (not sure how to test this)?

Logs

flutter analyze
Analyzing bug_media_query_accessibility...                              
No issues found! (ran in 4.0s)

flutter doctor -v
[✓] Flutter (Channel stable, 2.0.2, on macOS 11.2.3 20D91 darwin-x64, locale en-GB)
    • Flutter version 2.0.2 at /Users/martin/Developer/flutter
    • Framework revision 8962f6dc68 (5 days ago), 2021-03-11 13:22:20 -0800
    • Engine revision 5d8bf811b3
    • Dart version 2.12.1

[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.


[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.4, Build version 12D4e
    • CocoaPods version 1.10.1

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

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).

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

[✓] Connected device (2 available)
    • iPhone 8 (mobile) • BA94B51E-EE6B-4FD9-A497-18D3F2F534D4 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-4 (simulator)
    • Chrome (web)      • chrome                               • web-javascript • Google Chrome 89.0.4389.82

! Doctor found issues in 2 categories.

Full code

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      highContrastTheme: ThemeData.dark(),
      highContrastDarkTheme: ThemeData.light(),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  bool _switchValues = false;

  void _incrementCounter() {
    setState(() {
      _counter++;
      _switchValues = !_switchValues;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MediaQuery(
      data: MediaQuery.of(context).copyWith(
        highContrast: _switchValues,
        invertColors: _switchValues,
        boldText: _switchValues,
        disableAnimations: _switchValues,
      ),
      child: Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'You have pushed the button this many times:',
              ),
              Text(
                '$_counter',
                style: Theme.of(context).textTheme.headline4,
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

Did you read the description of what these fields do?

https://api.flutter.dev/flutter/widgets/MediaQueryData/invertColors.html

Whether the device is inverting the colors of the platform.

This does not indicate that the application should be painted inverted: The OS is already doing that.

That is what most of these settings do - indicate that the OS is already performing some action, to allow the framework to react. For example, re-inverting images so that pictures do not appear inverted, and removing the timeout of snackbars when a screen-reader is enabled

@goderbauer

We should probably rename this field to osRequestedColorsInverted and similarly for the others. cc @goderbauer

changing dart:ui is probably too hard, but MediaQueryData is feasible

Did you read the description of what these fields do?

https://api.flutter.dev/flutter/widgets/MediaQueryData/invertColors.html

Whether the device is inverting the colors of the platform.

This does not indicate that the application should be painted inverted: The OS is already doing that.

That is what most of these settings do - indicate that the OS is already performing some action, to allow the framework to react. For example, re-inverting images so that pictures do not appear inverted, and removing the timeout of snackbars when a screen-reader is enabled

Thanks for the reply.

I better understand now what the documentation means. I wonder if it could be better explained.

For instance, if you change boldText as shown in the example above, it changes in the app, but the description in the documentation is similar: https://api.flutter.dev/flutter/widgets/MediaQueryData/boldText.html

Whether the platform is requesting that text be drawn with a bold font weight.

For disableAnimations https://api.flutter.dev/flutter/widgets/MediaQueryData/disableAnimations.html:

Whether the platform is requesting that animations be disabled or reduced as much as possible.

For highContrast https://api.flutter.dev/flutter/widgets/MediaQueryData/highContrast.html

Whether the user requested a high contrast between foreground and background content on iOS, via Settings -> Accessibility -> Increase Contrast.

Maybe a rephrasing of this

This does not indicate that the application should be painted inverted: The OS is already doing that.

That is what most of these settings do - indicate that the OS is already performing some action, to allow the framework to react. For example, re-inverting images so that pictures do not appear inverted, and removing the timeout of snackbars when a screen-reader is enabled

could be added to the documentation.

PRs to improve the documentation are very welcome!

I agree, that we could have named these better, but I don't think we should make renaming these a high priority. It's something we could add to #24722, though.

That is what most of these settings do - indicate that the OS is already performing some action, to allow the framework to react

that's it, MediaQuery doesn't guarantee the way framework reacts to the data it provides, as it's just a representation of OS settings, and to me something like osRequestedColorsInverted looks too verbose, as "osRequested" part is already in MediaQuery class by definition

Improve docs on MediaQuery: highContrast, invertColors and disableAni…

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

Improve docs on MediaQuery: highContrast, invertColors and disableAnimations #78323

Steps to Reproduce

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Improve docs on MediaQuery: highContrast, invertColors and disableAnimations #78323

Description

Steps to Reproduce

Activity

jonahwilliams commented on Mar 17, 2021

jonahwilliams commented on Mar 17, 2021

mvolpato commented on Mar 17, 2021

goderbauer commented on Mar 17, 2021

nt4f04uNd commented on Mar 18, 2021

github-actions commented on Jul 14, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions