olmps/memo

[Component] Custom Buttons

Closed this issue · 0 comments

Summary

The buttons used in memo app doesn't follow the Material's guidelines. This forces us to create custom buttons Widgets that reproduce this custom behavior.

Business Rules

These buttons should respect the visual behavior specified in the Figma project, which includes 3 possible states:

  • normal - The normal state of the button, without any kind of interaction.
  • pressed - When the button is pressed.
  • disabled - When the button doesn't have a onTap action.

The buttons must also allow a trailing Widget, which should be customizable and must follow the same color as the button text.

It's important to notice that these buttons will probably not use those that Flutter team has built when developing Flutter SDK, which means that we lose features that are inherited when using the default buttons, like accessibility as an example. The developer should study the Flutter default buttons implementation and preserve at most these features.

Screenshots

ElevatedButton

CleanShot 2021-10-29 at 09 19 11

Secondary ElevatedButton

CleanShot 2021-10-29 at 09 19 33

TextButton

CleanShot 2021-10-29 at 09 19 55