📐 It's a set of common utility strategies to work with responsive styles with Flutter and CSS in JS

Overview

@displaykit/responsive_styles

You don't need to be worried just because you have to support multiple screens 📺 🖥 💻 📱 .

licence mit Downloads Current Version Flutter Package NPM Package

It's a set of common utility strategies to work with responsive styles with CSS in JS and Flutter

Summary


Dart/Flutter 🐦

How to install?

flutter pub add responsive_styles

Get started

Demo

CleanShot 2022-07-27 at 16 27 30

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

Or this one of the gif with the Web "Holy Grail Layout"

Other demos


JavaScript/React

How to install?

yarn add @displaykit/responsive_styles

Get started

Demo


Docs

What are the default values for the breakpoints?

  • xs: 0 From 0 screen width until 479
  • sm: 480 From 480 screen width until 767
  • md: 768 From 768 screen width until 991
  • lg: 992 From 992 screen width until 1199
  • xl: 1200 From 1200 and beyond

All values from here came from other libraries and responsive Front End frameworks.

Can I customize the breakpoint base values?

Actually yes! Just follow this tutorial

Resources and features

Feature. Dart/Flutter JavaScript/React
Responsive
breakpoints
GridItem 🚧
BreakpointsBaseValues 🚧

Ready, 🚧 WIP, Not in roadmap by now, 🗺️ Inside roadmap

Other project stuff

Contributing

Want to contribute to the project? Check our guide with how and our code guidelines

How to report a bug?

Please just open an issue with a link do a small reproduction of the bug and let's discuss it

License

MIT License © Mario Souto

You might also like...

Apply values per media breakpoints. Breakpoints are similar to the breakpoints used in bootstrap css framework.

Apply values per media breakpoints. Breakpoints are similar to the breakpoints used in bootstrap css framework.

Apply values per media breakpoints. Breakpoints are similar to the breakpoints used in bootstrap css framework.

Mar 26, 2021

Firebase dart common interface and implementation for Browser, VM, node and flutter

firebase.dart Firebase dart common interface and implementation for Browser, VM, node and flutter Firebase Initialization Usage in browser import 'pac

Nov 28, 2021

:bug: Flutter debug helper widget with common and custom actions

:bug: Flutter debug helper widget with common and custom actions

Debug Friend Flutter debug helper widget with common and custom actions This helps you reduce the development and testing time of new features Show so

Dec 7, 2022

A flutter app to practice some common and important widgets

Flutter Beginner 2 A flutter app to practice some common and important widgets Developer Alexander Sosa (https://www.linkedin.com/in/alexander-sosa-as

Jan 3, 2022

package library for extended_image, extended_text and extended_text_field,provide common base class.

 package library for extended_image, extended_text and extended_text_field,provide common base class.

extended_image_library package library for extended_image extended_image A powerful official extension library of image, which support placeholder(loa

Dec 31, 2022

A showcase of the most common Flutter animation APIs.

A showcase of the most common Flutter animation APIs.

Flutter Animations Gallery This project is a showcase of the most common Flutter animation APIs. Preview Also available as a Flutter web demo. Setting

Dec 10, 2022

Flutter guide + SDK. Check Community repository for common information.

freeRASP for Flutter freeRASP for Flutter is a part of security SDK for the app shielding and security monitoring. Learn more about provided features

Dec 26, 2022

Contactus - a flutter package. The most common functionality added in any commercial app is the Developer's contact details

Contactus - a flutter package. The most common functionality added in any commercial app is the Developer's contact details

Contact Us The most common functionality added in any commercial app is the Developer's contact details!! So this package helps the developers to simp

Aug 4, 2022

Hero Effect for common words of two Text (Flutter)

Hero Effect for common words of two Text (Flutter)

Hero Effect for common words of text widget (something like magic move in keynote) Features Usage Usage is easily and likes Hero,but obviously the chi

Oct 12, 2022
Comments
Releases(v2.3.1)
Owner
DisplayKit Tech
DisplayKit Tech
Responsive-Ui-builder - The responsive ui builder package contains widgets that helps you to create your UI responsive

Responsive Ui Builder Getting Started The responsive ui builder package contains

null 0 Feb 1, 2022
A flutter demo app to practice Map data structure and its common operations

Map Operations A flutter demo app to practice Map data structure and its common operations Developer Alexander Sosa (https://www.linkedin.com/in/alexa

Alexander Sosa 0 Jan 3, 2022
Target the specific design of Material for Android and Cupertino for iOS widgets through a common set of Platform aware widgets

Flutter Platform Widgets This project is an attempt to see if it is possible to create widgets that are platform aware. Currently in order to render t

null 1.3k Jan 4, 2023
Target the specific design of Material for Android and Cupertino for iOS widgets through a common set of Platform aware widgets

Flutter Platform Widgets This project is an attempt to see if it is possible to create widgets that are platform aware. Currently in order to render t

null 1.3k Jan 4, 2023
Quickly configure three theme styles

flytheme 快速实现三种主题效果。 本插件是从矿小助App中拆分出来的,优化了很多细节,更加简单易用。 内置持久化存储(使用share_preference实现) 矿小助App:https://kxz.atcumt.com/ pub插件地址:https://pub.dev/packages/f

CUMT-Atom 2 Aug 2, 2022
A Flutter widget for rendering HTML and CSS as Flutter widgets

flutter_html A Flutter widget for rendering HTML and CSS as Flutter widgets. Screenshot 1 Screenshot 2 Screenshot 3 Table of Contents: Installing Curr

Vishal Raj 1 Dec 15, 2021
Advanced & beautiful animations inspired by animate_do and Animate.css, every animation is a widget that contains default but customizable values 💙

animate_it An animation package inspired by animate_do and Animate.css. Since the original animate_do is not being maintained, I have decided to creat

Luke Moody 3 Oct 1, 2022
A grid-based layout system for Flutter, inspired by CSS Grid Layout

Flutter Layout Grid A powerful grid layout system for Flutter, optimized for complex user interface design. Click images to see their code ✨ Featuring

Felt 307 Dec 24, 2022
A grid-based layout system for Flutter, inspired by CSS Grid Layout

Flutter Layout Grid A powerful grid layout system for Flutter, optimized for complex user interface design. Click images to see their code ✨ Featuring

Felt 307 Dec 24, 2022
C2F can convert css style to Flutter code online.

C2F is an interesting little project. I hope to find a way to convert css styles to flutter styles. I believe many web developers will like it. https:

Anonymous Namespace 232 Dec 29, 2022