Skip to content

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

Description

@mvolpato

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,
      ),
  1. 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),
        ),
      ),
    );
  }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work listc: proposalA detailed proposal for a change to Flutterd: api docsIssues with https://api.flutter.dev/frameworkflutter/packages/flutter repository. See also f: labels.team-frameworkOwned by Framework teamtriaged-frameworkTriaged by Framework team

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions