flutter_responsive_breakpoints 0.0.3
flutter_responsive_breakpoints: ^0.0.3 copied to clipboard

This package provides breakpoints to help achieve responsive designs.

flutter_responsive_breakpoints #

Made by Florian LEFEBVRE. Find the package on Pub.dev.

This package provides breakpoints to help achieve responsive designs.

Installation #

Run the following command:

$ flutter pub add flutter_responsive_breakpoints

Documentation #

Breakpoints #

BreakpointMinimum width
sm640px
md768px
lg1024px
xl1280px
xxl1536px

How to use it #

Import the package

import 'package:flutter_responsive_breakpoints/flutter_responsive_breakpoints.dart';

Wrap MaterialApp with Responsive widget

Responsive(builder: (context) => MaterialApp())

Use it anywhere (after importing the package)

responsive function
responsive<Color>(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<T>() instead like so:

r<Color>(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 #

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 for us to have a discussion on it.

3
likes
130
pub points
37%
popularity

Publisher

florian-lefebvre.dev

This package provides breakpoints to help achieve responsive designs.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on flutter_responsive_breakpoints