Flutter Festival Lineup Card with Set Times and Stages

A music festival lineup card built with Wind for Flutter: a gradient stage-art header with the festival name and date, a set-times list with the headliner starred and per-act time pills, colored stage tag chips, and a venue row above a get-passes button. A multi-act program guide using Tailwind-style className utilities with dark-mode pairs.
by Anılcan Çakır 4 views 0 stars 1 day ago Rev 1
Open in Playground Fork
Flutter Festival Lineup Card with Set Times and Stages preview
main.dart
WDiv(
  className: 'max-w-sm w-full rounded-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 shadow-xl overflow-hidden',
  children: [
    WDiv(
      className: 'flex flex-col justify-center w-full h-32 px-6 bg-gradient-to-br from-fuchsia-600 to-indigo-600',
      children: [
        WText(
          'Neon Fields Fest',
          className: 'text-2xl font-extrabold text-white'
        ),
        WText(
          'Main Stage  |  Saturday, Aug 15',
          className: 'text-xs font-medium text-fuchsia-100 dark:text-fuchsia-100 mt-1'
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-col w-full px-6 py-5',
      children: [
        WText(
          'SET TIMES',
          className: 'text-xs font-semibold tracking-widest text-gray-400 dark:text-gray-500'
        ),
        WDiv(
          className: 'flex flex-col gap-3 w-full mt-3',
          children: [
            WDiv(
              className: 'flex flex-row items-center justify-between w-full',
              children: [
                WDiv(
                  className: 'flex flex-row items-center',
                  children: [
                    WIcon(
                      Icons.star,
                      className: 'text-amber-400 dark:text-amber-300 text-base'
                    ),
                    WText(
                      'Aurora Skies',
                      className: 'text-sm font-bold text-gray-900 dark:text-white ml-2'
                    ),
                  ],
                ),
                WDiv(
                  className: 'px-2.5 py-1 rounded-full bg-fuchsia-100 dark:bg-fuchsia-900',
                  child: WText(
                    '22:45',
                    className: 'text-xs font-semibold text-fuchsia-700 dark:text-fuchsia-200'
                  ),
                ),
              ],
            ),
            WDiv(
              className: 'flex flex-row items-center justify-between w-full',
              children: [
                WText(
                  'Pulse Theory',
                  className: 'text-sm font-medium text-gray-700 dark:text-gray-200'
                ),
                WDiv(
                  className: 'px-2.5 py-1 rounded-full bg-gray-100 dark:bg-gray-800',
                  child: WText(
                    '21:15',
                    className: 'text-xs font-semibold text-gray-600 dark:text-gray-300'
                  ),
                ),
              ],
            ),
            WDiv(
              className: 'flex flex-row items-center justify-between w-full',
              children: [
                WText(
                  'Midnight Loop',
                  className: 'text-sm font-medium text-gray-700 dark:text-gray-200'
                ),
                WDiv(
                  className: 'px-2.5 py-1 rounded-full bg-gray-100 dark:bg-gray-800',
                  child: WText(
                    '19:45',
                    className: 'text-xs font-semibold text-gray-600 dark:text-gray-300'
                  ),
                ),
              ],
            ),
            WDiv(
              className: 'flex flex-row items-center justify-between w-full',
              children: [
                WText(
                  'Violet Static',
                  className: 'text-sm font-medium text-gray-700 dark:text-gray-200'
                ),
                WDiv(
                  className: 'px-2.5 py-1 rounded-full bg-gray-100 dark:bg-gray-800',
                  child: WText(
                    '18:30',
                    className: 'text-xs font-semibold text-gray-600 dark:text-gray-300'
                  ),
                ),
              ],
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center gap-2 w-full mt-5',
          children: [
            WDiv(
              className: 'px-3 py-1 rounded-full bg-fuchsia-100 dark:bg-fuchsia-900',
              child: WText(
                'Main Stage',
                className: 'text-xs font-medium text-fuchsia-700 dark:text-fuchsia-200'
              ),
            ),
            WDiv(
              className: 'px-3 py-1 rounded-full bg-indigo-100 dark:bg-indigo-900',
              child: WText(
                'East Field',
                className: 'text-xs font-medium text-indigo-700 dark:text-indigo-200'
              ),
            ),
            WDiv(
              className: 'px-3 py-1 rounded-full bg-violet-100 dark:bg-violet-900',
              child: WText(
                'The Tent',
                className: 'text-xs font-medium text-violet-700 dark:text-violet-200'
              ),
            ),
          ],
        ),
        WDiv(
          className: 'w-full border-t border-gray-100 dark:border-gray-800 mt-5'
        ),
        WDiv(
          className: 'flex flex-row items-center w-full mt-4',
          children: [
            WIcon(
              Icons.location_on,
              className: 'text-gray-400 dark:text-gray-500 text-sm'
            ),
            WText(
              'Riverside Park, Austin TX',
              className: 'text-xs text-gray-500 dark:text-gray-400 ml-1.5'
            ),
          ],
        ),
        WButton(
          className: 'w-full mt-4 rounded-2xl bg-gradient-to-br from-fuchsia-600 to-indigo-600 py-3',
          child: WText(
            'Get Weekend Passes',
            className: 'text-white text-center font-semibold text-sm'
          ),
        ),
      ],
    ),
  ],
)
Stats
Views: 4
Stars: 0
Revisions: 1
Size: 5,492 chars
Created: Jul 24, 2026