Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/florian-lefebvre/flutter_responsive_breakpoints
This package provides breakpoints to help achieve responsive designs.
https://github.com/florian-lefebvre/flutter_responsive_breakpoints
Last synced: 3 months ago
JSON representation
This package provides breakpoints to help achieve responsive designs.
- Host: GitHub
- URL: https://github.com/florian-lefebvre/flutter_responsive_breakpoints
- Owner: florian-lefebvre
- License: mit
- Created: 2021-07-11T16:16:01.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-07-15T16:16:32.000Z (over 3 years ago)
- Last Synced: 2024-10-14T23:28:46.559Z (3 months ago)
- Language: C++
- Homepage:
- Size: 99.6 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# flutter_responsive_breakpoints
Made by [Florian LEFEBVRE](https://github.com/florian-lefebvre). Find the package on [Pub.dev](https://pub.dev/packages/flutter_responsive_breakpoints).
This package provides breakpoints to help achieve responsive designs.
## Installation
Run the following command:
```bash
$ flutter pub add flutter_responsive_breakpoints
```
## Documentation
### Breakpoints
| Breakpoint | Minimum width |
| ---------- | ------------- |
| sm | 640px |
| md | 768px |
| lg | 1024px |
| xl | 1280px |
| xxl | 1536px |
### How to use it
#### Import the package
```dart
import 'package:flutter_responsive_breakpoints/flutter_responsive_breakpoints.dart';
```
#### Wrap MaterialApp with Responsive widget
```dart
Responsive(builder: (context) => MaterialApp())
```
#### Use it anywhere (after importing the package)
##### `responsive` function
```dart
responsive(def: Colors.red, sm: Colors.blue, xl: Colors.green)
```
- `def` is required
- all breakpoints are optional
It can be any type: `int`, `Widget`, etc...
If you're using the function a lot, you can use `r()` instead like so:
```dart
r(def: Colors.red, sm: Colors.blue, xl: Colors.green)
```
##### Width and height extensions
Like CSS, you can use `X.vw` to get a width percentage (example: 20.vw) and `X.vh` to get a height percentage (example: 20.vh).
## Acknowledgements
- [Tailwind CSS breakpoints](https://tailwindcss.com/docs/responsive-design)
- [Sizer](https://pub.dev/packages/sizer)
## Issue and feedback
If you have any suggestion for including a feature or if something doesn't work, feel free to open a Github [issue](https://github.com/florian-lefebvre/flutter_responsive_breakpoints/issues) for us to have a discussion on it.