Repository: flutter
Issue: Improve docs on MediaQuery: highContrast, invertColors and disableAnimations
Labels: framework,d: api docs,c: proposal,P2,team-framework,triaged-framework

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

1. Run `flutter create bug`.
2. 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,
      ),
```
3. 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)?

<details>
  <summary>Logs</summary>

<!--
      Run your application with `flutter run --verbose` and attach all the
      log output below between the lines with the backticks. If there is an
      exception, please see if the error message includes enough information
      to explain how to solve the issue.
-->

```
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.
```
</details>

<details>
  <summary>Full code</summary>

```
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),
        ),
      ),
    );
  }
}
```
</details>