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: 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_stylesxs: 0From 0 screen width until 479sm: 480From 480 screen width until 767md: 768From 768 screen width until 991lg: 992From 992 screen width until 1199xl: 1200From 1200 and beyond
All values from here came from other libraries and responsive Front End frameworks.
Today, no. But it's in the have a way to do this but the names xs...xl will remain part of the library to make it easier to use the abstractions.
| Feature. | Dart/Flutter | JavaScript/React |
|---|---|---|
| Responsive | ✅ | ❌ |
| breakpoints | ✅ | ✅ |
| GridItem | ✅ | 🚧 |
| BreakpointsProvider | 🚧 | 🚧 |
| parseStylesheet | 🚧 | ✅ |
| StyleSheet | 🚧 | ✅ |
| BaseComponent | 🚧 | 🚧 |
✅ 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