Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

high contrast themes: ListTile selected state is not distinguishable from non-selected state #939

Closed
d-loose opened this issue Oct 25, 2024 · 1 comment · Fixed by #941
Closed
Assignees

Comments

@d-loose
Copy link
Member

d-loose commented Oct 25, 2024

For the high contrast themes the primaryColor defaults to either black or white, so that selected ListTiles are visually indistinguishable from non-selected ones.

Light Dark
Normal Screenshot From 2024-10-25 14-03-07 Screenshot From 2024-10-25 14-03-24
High Contrast Screenshot From 2024-10-25 14-02-18 Screenshot From 2024-10-25 14-02-51

Minimal example:

import 'package:flutter/material.dart';
import 'package:yaru/yaru.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return YaruTheme(
      builder: (context, yaru, child) {
        return MaterialApp(
          theme: yaru.theme,
          darkTheme: yaru.darkTheme,
          highContrastTheme: yaruHighContrastLight,
          highContrastDarkTheme: yaruHighContrastDark,
          title: 'Flutter Demo',
          home: Scaffold(
            body: ListView(
              children: const [
                ListTile(
                  selected: true,
                  title: Text('selected tile'),
                ),
                ListTile(
                  selected: false,
                  title: Text('unselected tile'),
                )
              ],
            ),
          ),
        );
      },
    );
  }
}
@Feichtmeier
Copy link
Member

For the high contrast themes the primaryColor defaults to either black or white, so that selected ListTiles are visually indistinguishable from non-selected ones.
Light Dark
Normal Screenshot From 2024-10-25 14-03-07 Screenshot From 2024-10-25 14-03-24
High Contrast Screenshot From 2024-10-25 14-02-18 Screenshot From 2024-10-25 14-02-51

Minimal example:

import 'package:flutter/material.dart';
import 'package:yaru/yaru.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return YaruTheme(
      builder: (context, yaru, child) {
        return MaterialApp(
          theme: yaru.theme,
          darkTheme: yaru.darkTheme,
          highContrastTheme: yaruHighContrastLight,
          highContrastDarkTheme: yaruHighContrastDark,
          title: 'Flutter Demo',
          home: Scaffold(
            body: ListView(
              children: const [
                ListTile(
                  selected: true,
                  title: Text('selected tile'),
                ),
                ListTile(
                  selected: false,
                  title: Text('unselected tile'),
                )
              ],
            ),
          ),
        );
      },
    );
  }
}

the listtile theme was somehow traited without much attention because we used a lot of those master tiles
will work on this in the eve

@Feichtmeier Feichtmeier self-assigned this Oct 27, 2024
Feichtmeier added a commit that referenced this issue Oct 27, 2024
Feichtmeier added a commit that referenced this issue Oct 27, 2024
…able from non-selected state (#941)

* fix: high contrast themes: `ListTile` selected state is not distinguishable from non-selected state
Fixes #939

* fix: update all animated_vector deps

* fix: update goldens
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants