https://github.com/alexhcjp/responsive_breakpoints
https://github.com/alexhcjp/responsive_breakpoints
Last synced: 12 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/alexhcjp/responsive_breakpoints
- Owner: AlexHCJP
- License: bsd-3-clause
- Created: 2025-07-18T09:13:21.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-18T09:43:12.000Z (about 1 year ago)
- Last Synced: 2025-07-18T12:07:27.388Z (about 1 year ago)
- Language: Dart
- Size: 211 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Responsive Breakpoints
A Flutter package providing a flexible system for defining and resolving responsive layout breakpoints. Inspired by popular CSS frameworks (Tailwind, Bootstrap, Ant Design) and Material 3 guidelines, it allows you to adapt your UI to different screen widths with ease.
---
## Features
* **Theme-based resolution** via `ResponsiveBreakpointTheme` extension
* **Customizable**: define your own breakpoints by implementing `BreakpointSpec`
* **Predefined enums** for common systems:
* **TailwindBreakpoint** (`sm`, `md`, `lg`, `xl`, `xxl`)
* **MaterialUIBreakpoint** (`small`, `medium`, `large`)
* **BootstrapBreakpoint** (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`)
* **AntBreakpoint** (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`)
* **Comparison operators** (`<`, `>`, `<=`, `>=`) on `BreakpointSpec`
---
## Installation
Add the dependency in your `pubspec.yaml`:
```yaml
dependencies:
responsive_breakpoints: latest_version
```
Then run:
```bash
flutter pub get
```
---
## Usage
### Wrap your app theme with `ResponsiveBreakpointTheme`, providing a list of breakpoints:
```dart
import 'package:flutter/material.dart';
import 'package:responsive_breakpoints/responsive_breakpoints.dart';
void main() {
runApp(
MaterialApp(
theme: ThemeData(
extensions: [
ResponsiveBreakpointTheme(
breakpoints: TailwindBreakpoint.values,
),
],
),
home: const MyHomePage(),
),
);
}
```
### Current breakpoint anywhere in your widget tree:
```dart
TextSpan(switch (ResponsiveBreakpointTheme.of(context)) {
BootstrapBreakpoint.xs => '<576px',
BootstrapBreakpoint.sm => '≥576px',
BootstrapBreakpoint.md => '≥768px',
BootstrapBreakpoint.lg => '≥992px',
BootstrapBreakpoint.xl => '≥1200px',
BootstrapBreakpoint.xxl => '≥1400px',
},
),
```
---
## Predefined Breakpoints
### TailwindBreakpoint
| Name | Min Width |
| :--: | :-------: |
| sm | 640px |
| md | 768px |
| lg | 1024px |
| xl | 1280px |
| xxl | 1536px |
### MaterialUIBreakpoint
| Name | Range |
| :----: | :-------- |
| small | <600px |
| medium | 600–839px |
| large | ≥840px |
### BootstrapBreakpoint
| Name | Min Width |
| :--: | :-------: |
| xs | 0px |
| sm | 576px |
| md | 768px |
| lg | 992px |
| xl | 1200px |
| xxl | 1400px |
### AntBreakpoint
| Name | Min Width |
| :--: | :-------: |
| xs | 0px |
| sm | 576px |
| md | 768px |
| lg | 992px |
| xl | 1200px |
| xxl | 1600px |
---
## Custom Breakpoints
To define your own system, implement `BreakpointSpec`:
```dart
enum MyBreakpoints implements BreakpointSpec {
mobile(breakpoint: 0),
tablet(breakpoint: 600),
desktop(breakpoint: 1024);
@override
final double breakpoint;
const MyBreakpoints({required this.breakpoint});
}
```
Then add it to your theme:
```dart
ThemeData(
extensions: [
ResponsiveBreakpointTheme(
breakpoints: MyBreakpoints.values,
),
],
);
```
Resolve and compare just like the built-in enums.
---
## API Reference
* **`ResponsiveBreakpointTheme`**
* `resolveBreakpoint(context)` — returns the current `T` based on screen width
* `static of(context)` — helper to resolve from theme extensions
* **`BreakpointComparison`** extension on `BreakpointSpec`
* Operators: `>`, `<`, `>=`, `<=`
* **`BreakpointSpec`** interface:
* `final double breakpoint`
* **Enums**: `TailwindBreakpoint`, `MaterialUIBreakpoint`, `BootstrapBreakpoint`, `AntBreakpoint`.
---
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.