Loading...
Loading...
Use Shadcn UI breakpoints and responsive layout with ShadBreakpoints, ShadResponsiveBuilder, and context.breakpoint. Use when building responsive Flutter shadcn_ui layouts, adapting UI to screen size, or checking current breakpoint (tn, sm, md, lg, xl, xxl).
npx skill4agent add serverpod/skills-registry shadcn_ui-responsiveShadThemeData.breakpointsShadResponsiveBuildercontext.breakpointShadThemeData(
breakpoints: ShadBreakpoints(
tn: 0, // tiny
sm: 640, // small
md: 768, // medium
lg: 1024, // large
xl: 1280, // extra large
xxl: 1536, // extra extra large
),
);ShadResponsiveBuilder(
builder: (context, breakpoint) {
final sm = breakpoint >= ShadTheme.of(context).breakpoints.sm;
// ...
},
),final sm = context.breakpoint >= ShadTheme.of(context).breakpoints.sm;>===ShadResponsiveBuilder(
builder: (context, breakpoint) {
return switch (breakpoint) {
ShadBreakpointTN() => const Text('Tiny'),
ShadBreakpointSM() => const Text('Small'),
ShadBreakpointMD() => const Text('Medium'),
ShadBreakpointLG() => const Text('Large'),
ShadBreakpointXL() => const Text('Extra Large'),
ShadBreakpointXXL() => const Text('Extra Extra Large'),
};
},
),