feat: Implement `StatCard`

[apomalyn]

As a developer, I want an easy way to display all kinds of stats in a card

Requirements

Implement a generic StatCard which offers two layout (small and large), it should displays:

• an icon
• a stats (accepts a string)
• an optional subtitle

On the StatCard, add named constructor for:

• small layout
• large layout
• streak (icon: red Icons.whatshot_rounded
• timer (icon: Icons.timer_rounded)
• words (icon: Icons.translate_rounded)

What needs to be done

Under src/core/widgets, implement a stateless widget StatCard:

• constructor takes:
  • Icon icon: icon to display on the left side
  • String title: the main element to display, likely a statistique like a percentage or a number
  • String? subtitle: the text to display under the title, it should be smaller and grey (see Figma file)
  • bool isSmall: indicate which to use
  • Color? backgroundColor: override the default background color
  • TextStyle? titleTextStyle: override the default text style for the title
  • TextStyle? subtitleTextStyle: override the default text style for the subtitle
• named constructors:
  • .small should take everything from the main constructor except isSmall that will be set to true
  • .large should take everything from the main constructor except isSmall that will be set to false
  • .streak should take everything from the main constructor except icon, title, subtitle, it should add an int days. Those should be:
  • icon: Icons.whatshot_rounded
  • title: '$days days' for the large, and $days for small ⚠️ don't forget to localize the string
  • subtitle: 'of continued learning' ⚠️ don't forget to localize the string
  • .timer should take everything from the main constructor except icon, title, subtitle and isSmall, it should add an Duration elapsedTime. Those should be:
  • icon: Icons.timer_rounded
  • title: '$duration' ⚠️ don't forget to localize the string
  • isSmall: true
  • .words should take everything from the main constructor except icon, title, subtitle, it should add an int words and bool? newWords = false. Those should be:
  • icon: Icons.translate_rounded
  • title: '$words words' for large, and $words or +$words if newWords is provided for small ⚠️ don't forget to localize the string
  • subtitle: 'learned' ⚠️ don't forget to localize the string
• displays:
  • the icon on the left
  • the title using titleTextStyle or Body Medium
  • underneath the title, the subtitle using subtitleTextStyle or Body Small in grey
  • wrap everything in a Card

Design

Wireframe of StatCard small layout


Wireframes of StatCard large layout


Dependencies

Child of #210

Dev notes

• Figma link

[Adaendra]

@apomalyn quelle est la taille que tu veux définir en version petit et grand ? Est-ce la moitié de l'écran? un pourcentage? ...