Flutter Recipe Card with Cook Time and Difficulty

A recipe card with a warm gradient cover, rating and saved badges, dish title and description, and meta chips for cook time, servings, and difficulty above a Cook now call to action. Built with Wind utility classes and full dark-mode pairs.

Anılcan Çakır by Anılcan Çakır 19 views 0 stars 1 week ago Rev 1
Flutter Recipe Card with Cook Time and Difficulty preview
main.dart
WDiv(
  className: 'flex flex-col w-full max-w-sm rounded-3xl overflow-hidden bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 shadow-xl',
  children: [
    WDiv(
      className: 'flex flex-col w-full h-36 p-4 bg-gradient-to-br from-orange-300 to-rose-500 dark:from-orange-500 dark:to-rose-700',
      children: [
        WDiv(
          className: 'flex flex-row items-center justify-between w-full',
          children: [
            WDiv(
              className: 'flex flex-row items-center px-3 py-1 rounded-full bg-white dark:bg-gray-900',
              children: [
                WIcon(
                  Icons.star,
                  className: 'text-sm text-amber-500 dark:text-amber-400'
                ),
                WText(
                  '4.8',
                  className: 'ml-1 text-xs font-bold text-gray-900 dark:text-white'
                ),
              ],
            ),
            WDiv(
              className: 'flex flex-row items-center px-3 py-1 rounded-full bg-white dark:bg-gray-900',
              children: [
                WIcon(
                  Icons.favorite,
                  className: 'text-sm text-rose-500 dark:text-rose-400'
                ),
                WText(
                  'Saved',
                  className: 'ml-1 text-xs font-bold text-gray-900 dark:text-white'
                ),
              ],
            ),
          ],
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-col w-full p-5',
      children: [
        WText(
          'Creamy Tuscan Pasta',
          className: 'text-lg font-bold text-gray-900 dark:text-white'
        ),
        WText(
          'Sun-dried tomatoes, spinach, and parmesan in a velvety garlic cream sauce.',
          className: 'mt-1 text-sm text-gray-500 dark:text-gray-400'
        ),
        WDiv(
          className: 'flex flex-row items-center justify-between w-full mt-4',
          children: [
            WDiv(
              className: 'flex flex-row items-center px-3 py-1 rounded-full bg-gray-100 dark:bg-gray-800',
              children: [
                WIcon(
                  Icons.schedule,
                  className: 'text-sm text-gray-500 dark:text-gray-400'
                ),
                WText(
                  '25 min',
                  className: 'ml-1 text-xs font-medium text-gray-700 dark:text-gray-300'
                ),
              ],
            ),
            WDiv(
              className: 'flex flex-row items-center px-3 py-1 rounded-full bg-gray-100 dark:bg-gray-800',
              children: [
                WIcon(
                  Icons.person,
                  className: 'text-sm text-gray-500 dark:text-gray-400'
                ),
                WText(
                  '4 servings',
                  className: 'ml-1 text-xs font-medium text-gray-700 dark:text-gray-300'
                ),
              ],
            ),
            WDiv(
              className: 'flex flex-row items-center px-3 py-1 rounded-full bg-gray-100 dark:bg-gray-800',
              children: [
                WIcon(
                  Icons.bolt,
                  className: 'text-sm text-gray-500 dark:text-gray-400'
                ),
                WText(
                  'Easy',
                  className: 'ml-1 text-xs font-medium text-gray-700 dark:text-gray-300'
                ),
              ],
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center justify-between w-full mt-5',
          children: [
            WText(
              '12 ingredients',
              className: 'text-sm text-gray-500 dark:text-gray-400'
            ),
            WDiv(
              className: 'flex flex-row items-center px-4 py-2 rounded-full bg-rose-500 dark:bg-rose-600',
              children: [
                WText(
                  'Cook now',
                  className: 'text-sm font-semibold text-white dark:text-white'
                ),
                WIcon(
                  Icons.arrow_forward,
                  className: 'ml-1 text-sm text-white dark:text-white'
                ),
              ],
            ),
          ],
        ),
      ],
    ),
  ],
)
Stats
Views
19
Stars
0
Revisions
1
Size
4,217 chars
Created
Jun 17, 2026