Flutter Trip Itinerary Day Card with Booking Codes

A daily travel itinerary card listing timed stops with category icons, confirmation codes, and booking status badges. Great for trip planners and travel concierge apps.

Anılcan Çakır by Anılcan Çakır 11 views 0 stars 6 days ago Rev 1
Flutter Trip Itinerary Day Card with Booking Codes preview
main.dart
WDiv(
  className: 'mx-auto max-w-sm flex flex-col gap-5 rounded-3xl p-6 bg-white border border-gray-200 shadow-xl dark:bg-gray-900 dark:border-gray-800',
  children: [
    WDiv(
      className: 'flex flex-row items-center justify-between w-full',
      children: [
        WDiv(
          className: 'flex flex-col',
          children: [
            WText(
              'Tuesday, May 12',
              className: 'text-base font-bold text-gray-900 dark:text-white',
            ),
            WText(
              'Day 3 · Lisbon',
              className: 'text-xs text-gray-500 dark:text-gray-400',
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center gap-1 rounded-full px-3 py-1 bg-teal-100 dark:bg-teal-500/20',
          children: [
            WIcon(
              Icons.calendar_today,
              className: 'text-teal-600 text-sm dark:text-teal-300',
            ),
            WText(
              '3 stops',
              className: 'text-xs font-bold text-teal-700 dark:text-teal-300',
            ),
          ],
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-col gap-3 w-full',
      children: [
        WDiv(
          className: 'flex flex-row items-center justify-between w-full rounded-2xl px-4 py-3 bg-gray-50 dark:bg-gray-800',
          children: [
            WDiv(
              className: 'flex flex-row items-center gap-3',
              children: [
                WDiv(
                  className: 'flex items-center justify-center w-10 h-10 rounded-xl bg-sky-100 dark:bg-sky-500/20',
                  child: WIcon(
                    Icons.schedule,
                    className: 'text-sky-600 text-lg dark:text-sky-300',
                  ),
                ),
                WDiv(
                  className: 'flex flex-col',
                  children: [
                    WText(
                      'Train to Sintra',
                      className: 'text-sm font-semibold text-gray-900 dark:text-white',
                    ),
                    WText(
                      '09:15 · Rossio Station',
                      className: 'text-xs text-gray-500 dark:text-gray-400',
                    ),
                  ],
                ),
              ],
            ),
            WText(
              'SE-2241',
              className: 'text-xs font-bold tracking-wide text-sky-600 dark:text-sky-300',
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center justify-between w-full rounded-2xl px-4 py-3 bg-gray-50 dark:bg-gray-800',
          children: [
            WDiv(
              className: 'flex flex-row items-center gap-3',
              children: [
                WDiv(
                  className: 'flex items-center justify-center w-10 h-10 rounded-xl bg-violet-100 dark:bg-violet-500/20',
                  child: WIcon(
                    Icons.location_on,
                    className: 'text-violet-600 text-lg dark:text-violet-300',
                  ),
                ),
                WDiv(
                  className: 'flex flex-col',
                  children: [
                    WText(
                      'Pena Palace tour',
                      className: 'text-sm font-semibold text-gray-900 dark:text-white',
                    ),
                    WText(
                      '11:00 · skip-the-line',
                      className: 'text-xs text-gray-500 dark:text-gray-400',
                    ),
                  ],
                ),
              ],
            ),
            WDiv(
              className: 'flex flex-row items-center gap-1 rounded-full px-2 py-1 bg-emerald-100 dark:bg-emerald-500/20',
              children: [
                WIcon(
                  Icons.check,
                  className: 'text-emerald-600 text-xs dark:text-emerald-300',
                ),
                WText(
                  'Booked',
                  className: 'text-[10px] font-bold text-emerald-700 dark:text-emerald-300',
                ),
              ],
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center justify-between w-full rounded-2xl px-4 py-3 bg-gray-50 dark:bg-gray-800',
          children: [
            WDiv(
              className: 'flex flex-row items-center gap-3',
              children: [
                WDiv(
                  className: 'flex items-center justify-center w-10 h-10 rounded-xl bg-amber-100 dark:bg-amber-500/20',
                  child: WIcon(
                    Icons.star,
                    className: 'text-amber-500 text-lg dark:text-amber-300',
                  ),
                ),
                WDiv(
                  className: 'flex flex-col',
                  children: [
                    WText(
                      'Dinner at Belcanto',
                      className: 'text-sm font-semibold text-gray-900 dark:text-white',
                    ),
                    WText(
                      '20:00 · 2 Michelin stars',
                      className: 'text-xs text-gray-500 dark:text-gray-400',
                    ),
                  ],
                ),
              ],
            ),
            WText(
              'Table 7',
              className: 'text-xs font-bold text-amber-600 dark:text-amber-300',
            ),
          ],
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center justify-center gap-2 w-full rounded-2xl px-4 py-3 bg-teal-600 dark:bg-teal-500',
      children: [
        WText(
          'View full itinerary',
          className: 'text-sm font-bold text-white dark:text-white',
        ),
        WIcon(
          Icons.arrow_forward,
          className: 'text-white text-base dark:text-white',
        ),
      ],
    ),
  ],
)
Stats
Views
11
Stars
0
Revisions
1
Size
5,850 chars
Created
Jun 18, 2026