Semantics for CheckboxListTile are wrong under Windows

Minimal example

import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  /// Create an instance.
  const MyHomePage({Key? key}) : super(key: key);

  /// Create state for this widget.
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

/// State for [MyHomePage].
class _MyHomePageState extends State<MyHomePage> {
  /// First value.
  bool firstValue = false;

  /// Second value.
  bool secondValue = true;

  /// Build a widget.
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: const Text('Checkbox List Tiles'),
        ),
        body: ListView(
          children: [
            CheckboxListTile(
              value: firstValue,
              onChanged: (value) => setState(() => firstValue = value == true),
              title: const Text('First Value'),
              subtitle: Text(firstValue.toString()),
            ),
            CheckboxListTile(
              value: secondValue,
              onChanged: (value) => setState(() => secondValue = value == true),
              title: const Text('Second Value'),
              subtitle: Text(secondValue.toString()),
            )
          ],
        ),
      );
}

What happens

The checkboxes seem to be unchecked, even when they're clearly not.

This does not happen on the web, where the semantics are perfect.

Output of `flutter doctor -v`

[ÔêÜ] Flutter (Channel master, 2.9.0-1.0.pre.256, on Microsoft Windows [Version 10.0.22000.376], locale en-GB)
    ÔÇó Flutter version 2.9.0-1.0.pre.256 at C:\Users\chris\flutter
    ÔÇó Upstream repository https://github.com/flutter/flutter.git
    ÔÇó Framework revision 45726a8458 (9 hours ago), 2022-01-05 20:00:17 -0500
    ÔÇó Engine revision 36eafae59d
    ÔÇó Dart version 2.16.0 (build 2.16.0-144.0.dev)
    ÔÇó DevTools version 2.9.2

[ÔêÜ] Android toolchain - develop for Android devices (Android SDK version 31.0.0-rc2)
    ÔÇó Android SDK at C:\Users\chris\AppData\Local\Android\sdk
    ÔÇó Platform android-31, build-tools 31.0.0-rc2
    ÔÇó Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    ÔÇó Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)
    ÔÇó All Android licenses accepted.

[ÔêÜ] Chrome - develop for the web
    ÔÇó Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[ÔêÜ] Visual Studio - develop for Windows (Visual Studio Community 2022 17.0.4)
    ÔÇó Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    ÔÇó Visual Studio Community 2022 version 17.0.32014.148
    ÔÇó Windows 10 SDK version 10.0.22000.0

[ÔêÜ] Android Studio (version 2020.3)
    ÔÇó Android Studio at C:\Program Files\Android\Android Studio
    ÔÇó Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    ÔÇó Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    ÔÇó Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)

[ÔêÜ] VS Code, 64-bit edition (version 1.63.2)
    ÔÇó VS Code at C:\Program Files\Microsoft VS Code
    ÔÇó Flutter extension version 3.27.0

[ÔêÜ] Connected device (3 available)
    ÔÇó Windows (desktop) ÔÇó windows ÔÇó windows-x64    ÔÇó Microsoft Windows [Version 10.0.22000.376]
    ÔÇó Chrome (web)      ÔÇó chrome  ÔÇó web-javascript ÔÇó Google Chrome 96.0.4664.110
    ÔÇó Edge (web)        ÔÇó edge    ÔÇó web-javascript ÔÇó Microsoft Edge 96.0.1054.62

[ÔêÜ] HTTP Host Availability
    ÔÇó All required HTTP hosts are available

ÔÇó No issues found!

Thanks for reading.

Upon further inspection which I really should have done earlier, it appears that it is the Checkbox class itself that is to blame.

More minimal code

import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  /// Create an instance.
  const MyHomePage({Key? key}) : super(key: key);

  /// Create state for this widget.
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

/// State for [MyHomePage].
class _MyHomePageState extends State<MyHomePage> {
  /// First value.
  bool firstValue = false;

  /// Second value.
  bool secondValue = true;

  /// Build a widget.
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: const Text('Checkbox List Tiles'),
        ),
        body: ListView(
          children: [
            ListTile(
              title: const Text('First Value'),
              subtitle: Text(firstValue.toString()),
              trailing: Checkbox(
                onChanged: (value) =>
                    setState(() => firstValue = value == true),
                value: firstValue,
              ),
              isThreeLine: true,
            ),
            ListTile(
              title: const Text('Second Value'),
              subtitle: Text(secondValue.toString()),
              trailing: Checkbox(
                onChanged: (value) =>
                    setState(() => secondValue = value == true),
                value: secondValue,
              ),
              isThreeLine: true,
            )
          ],
        ),
      );
}

I'll have a look into the Checkbox class and see if it's something obvious, then hopefully submit a PR if I can figure it out.

@chrisnorman7

@chrisnorman7
Thanks for the detailed report. I ran your above code on latest master and stable on windows and web and observed same behavior on both:

Unchecking and checking the boxes correctly reflects the status. What exactly is the issue / behavior you are seeing ?

@darshankawar

@darshankawar Sorry, what I should have said in my original comment was that it's a problem with the Semantics widget. The widget doesn't seem to be telling my Screen reader (in this case NVDA) the proper checked state.

I hope this helps, and I'm sorry for not being clearer in my original comment.

@chrisnorman7

Hi @chrisnorman7, I am able to reproduce the issue.When running on flutter desktop the checkbox state is not read while on the web the state of the checkbox is read whenever it changes, But sometimes even on web, Nothing works.

Web: ListTitle title and subtitle is not read but checkbox state are read
Desktop: Only title and subtitle of listTile is read and not the checkbox state

Note: Make sure to unmute the video

Web	Desktop
web.mp4	desktop.mp4

flutter doctor -v

[√] Flutter (Channel stable, 2.8.1, on Microsoft Windows [Version 10.0.19042.1415], locale en-US)
    • Flutter version 2.8.1 at C:\flutter_sdk\stable
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 77d935af4d (3 weeks ago), 2021-12-16 08:37:33 -0800
    • Engine revision 890a5fca2e
    • Dart version 2.15.1

[√] Android toolchain - develop for Android devices (Android SDK version 31.0.0)    
    • Android SDK at C:\Users\mahesh\AppData\Local\Android\sdk
    • Platform android-31, build-tools 31.0.0
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)        
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.11.4)      
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.11.31727.386
    • Windows 10 SDK version 10.0.19041.0

[√] Android Studio (version 2020.3)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)

[√] VS Code (version 1.61.2)
    • VS Code at C:\Users\mahesh\AppData\Local\Programs\Microsoft VS Code   
    • Flutter extension version 3.29.0

[√] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.19042.1415]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 96.0.4664.110
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 96.0.1054.53

• No issues found!

[√] Flutter (Channel master, 2.9.0-1.0.pre.297, on Microsoft Windows [Version 10.0.19042.1415], locale en-US)    • Flutter version 2.9.0-1.0.pre.297 at C:\flutter_sdk\master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 7fe3565a9b (in the future), 2022-01-10 02:25:11 -0500
    • Engine revision 8989f3cb25
    • Dart version 2.16.0 (build 2.16.0-144.0.dev)
    • DevTools version 2.9.2
    • PATH = C:\Python310\Scripts\;C:\Python310\;C:\Program Files\Common
      Files\Oracle\Java\javapath;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\      WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;C:\Program Files\Git\cmd;C:\Program
      Files\nodejs\;C:\ProgramData\chocolatey\bin;;C:\Program
      Files\Docker\Docker\resources\bin;C:\ProgramData\DockerDesktop\version-bin;C:\Users\mahesh\AppData\Loca      l\Microsoft\WindowsApps;C:\Users\mahesh\AppData\Local\Programs\Microsoft VS
      Code\bin;C:\flutter_sdk\stable\bin;C:\Users\mahesh\Aliases;C:\Users\mahesh\AppData\Roaming\npm;C:\Progr      am Files\Java\jdk-17.0.1\bin;C:\Users\mahesh\AppData\Local\Android\Sdk\platform-tools;

[√] Android toolchain - develop for Android devices (Android SDK version 31.0.0)    
    • Android SDK at C:\Users\mahesh\AppData\Local\Android\sdk
    • Platform android-31, build-tools 31.0.0
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)        
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.11.4)      
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.11.31727.386
    • Windows 10 SDK version 10.0.19041.0

[√] Android Studio (version 2020.3)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)        

[√] VS Code (version 1.61.2)
    • VS Code at C:\Users\mahesh\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.29.0

[√] Connected device (4 available)
    • Windows (desktop)       • windows • windows-x64     • Microsoft Windows [Version 10.0.19042.1415]      
    • Windows (UWP) (desktop) • winuwp  • windows-uwp-x64 • 
    • Chrome (web)            • chrome  • web-javascript  • Google Chrome 96.0.4664.110
    • Edge (web)              • edge    • web-javascript  • Microsoft Edge 96.0.1054.53

[√] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

cc: @cbracken

Hi,
This is still present in 3.1.0.

The semantics state of checkboxes is now properly updated on Windows, as of PR 35557 in the Engine repo. Please confirm.

@yaakovschectman

Hi @yaakovschectman,
Thank you so much for the fix.

For simple checked / unchecked values, these semantics now work perfectly. However, with tristate checkboxes, it's still not working:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool? isChecked = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView(
        children: [
          CheckboxListTile(
            autofocus: true,
            onChanged: (value) => setState(() {
              isChecked = value;
            }),
            title: const Text('Tristate Value Checked'),
            tristate: true,
            value: isChecked,
          ),
          CheckboxListTile(
            value: isChecked ?? true,
            onChanged: (value) => setState(() {
              isChecked = value ?? false;
            }),
            title: const Text('Flag'),
          )
        ],
      ),
    );
  }
}

You will observe that the second checkbox (with the title "Flag") behaves as expected. The first however, reports only "checked" or "unchecked", so the half-checked state is not reported propertly. This is true on both Windows and the web.

@chrisnorman7

@chrisnorman7 This is probably going to take some more looking into then. We will have to identify if the mixed state flag is used/present

That's OK, I understand. Thanks in advance. Take care, Chris Norman

…

On Tue, 23 Aug 2022 at 14:41, yaakovschectman ***@***.***> wrote: @chrisnorman7 <https://github.com/chrisnorman7> This is probably going to take some more looking into then. We will have to identify if the mixed state flag is used/present — Reply to this email directly, view it on GitHub <#96218 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABBUZ2L2HABMGJRZPU56BYDV2TIJZANCNFSM5LL7X5UQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

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

Semantics for `CheckboxListTile` are wrong under Windows #96218

Minimal example

What happens

Output of `flutter doctor -v`

More minimal code

5 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Semantics for CheckboxListTile are wrong under Windows #96218

Description

Minimal example

What happens

Output of flutter doctor -v

Activity

chrisnorman7 commented on Jan 6, 2022

More minimal code

darshankawar commented on Jan 7, 2022

chrisnorman7 commented on Jan 7, 2022

maheshj01 commented on Jan 10, 2022

5 remaining items

chrisnorman7 commented on Aug 7, 2022

yaakovschectman commented on Aug 22, 2022

chrisnorman7 commented on Aug 23, 2022

yaakovschectman commented on Aug 23, 2022

chrisnorman7 commented on Aug 23, 2022

github-actions commented on Sep 6, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Semantics for `CheckboxListTile` are wrong under Windows #96218

Output of `flutter doctor -v`