π It's a set of common utility strategies to work with responsive styles with Flutter and CSS in JS
You don't need to be worried just because you have to support multiple screens πΊ π₯ π» π±.
It's a set of common utility strategies to work with responsive styles with CSS in JS and Flutter
flutter pub add responsive_styles
body: Container(
color: context.responsive.value({
Breakpoints.xs: Colors.red.shade200,
Breakpoints.sm: Colors.yellow.shade200,
Breakpoints.md: Colors.green.shade200,
Breakpoints.lg: Colors.blue.shade200,
Breakpoints.xl: Colors.purple.shade200,
}),
)
Learn more looking at the code example with a small implementation
yarn add @displaykit/responsive_styles
xs: 0
From 0 screen width until 479sm: 480
From 480 screen width until 767md: 768
From 768 screen width until 991lg: 992
From 992 screen width until 1199xl: 1200
From 1200 and beyondAll values from here came from other libraries and responsive Front End frameworks.
Actually yes! Just follow this tutorial
Feature. | Dart/Flutter | JavaScript/React |
---|---|---|
Responsive | β | β |
breakpoints | β | β |
GridItem | β | π§ |
BreakpointsBaseValues | β | π§ |
β Ready, π§ WIP, β Not in roadmap by now, πΊοΈ Inside roadmap
Want to contribute to the project? Check our guide with how and our code guidelines
Please just open an issue with a link do a small reproduction of the bug and let's discuss it