Skip to content

[Feature] Add a dedicated doneKeyTextStyle property for custom stylingΒ #3

@pincruxJimmy

Description

@pincruxJimmy

Hello,

Thank you for developing and maintaining the WithSecureKeyboard widget. It's a very useful package!

I am currently working on styling the secure keyboard and have run into a limitation regarding the Done Key (the green/blue key typically used for submission).

πŸ“ The Current Limitation
The current WithSecureKeyboard widget provides the following styling properties:

keyTextStyle: Sets the text style (font size, color, weight) for all keys uniformly.

doneKeyColor: Allows custom coloring for the Done Key's background.

The issue is that even when I set a distinct doneKeyColor (e.g., a dark color) to highlight the Done Key, the key's text color is still forced to use the global keyTextStyle color, which might not provide enough contrast or the desired aesthetic.

For instance, if keyTextStyle sets all text to RewardAppColors.clrGrey700 (a dark color), the Done Key's text will also be dark, making it hard to read when its background (doneKeyColor) is set to a darker brand color.

πŸš€ Proposed Solution
I kindly request the addition of a dedicated TextStyle property specifically for the Done Key: doneKeyTextStyle.

Proposed Property:

Dart

const WithSecureKeyboard({
// ... existing properties
this.keyTextStyle, // Existing: Global text style
this.doneKeyColor, // Existing: Done key background color

// ✨ Requested Addition: Done key text style
final TextStyle? doneKeyTextStyle, 

// ... other properties

})
How it should behave:

If doneKeyTextStyle is provided, it should override keyTextStyle and be used exclusively for the Done Key's label.

If doneKeyTextStyle is null, the widget should fall back to using the global keyTextStyle.

This feature would give developers the necessary flexibility to properly design and differentiate the crucial Done Key, improving overall UI/UX.

Thank you for considering this request!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions