Skip to content
Türkçe
All snippets

Swap layouts at md

Two blocks, one hidden on phones and one on tablets, with hidden md:flex.

  • WDiv
preview
responsive_md_visibility.dart 
// Hidden on mobile, Flex on MD (768px) and up
WDiv(
  className: '''
    hidden md:flex w-64 h-24 bg-blue-500
    text-white items-center justify-center rounded
  ''',
  children: [Text("Desktop / Tablet (MD+)")],
),

// Flex on mobile, Hidden on MD and up
WDiv(
  className: '''
    flex md:hidden w-64 h-24 bg-red-500
    text-white items-center justify-center rounded
  ''',
  children: [Text("Mobile (Small)")],
)
17 lines Open in the playground From the docs: Responsive design

More like this

  • Featured

    Settings card

    A card with a border, a shadow and a dark: pair on every colour.

    • WCard
    • WText

  • Responsive heading

    A heading that grows at sm: over a muted subtitle, with a dark: colour.

    • WDiv
    • WText