flutter_responsive_breakpoints 0.0.3

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

copied to clipboard

Documentation

Breakpoints

Breakpoint	Minimum width
sm	640px
md	768px
lg	1024px
xl	1280px
xxl	1536px

How to use it

Import the package

import 'package:flutter_responsive_breakpoints/flutter_responsive_breakpoints.dart';

copied to clipboard

Wrap MaterialApp with Responsive widget

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

copied to clipboard

Use it anywhere (after importing the package)

responsive function

responsive<Color>(def: Colors.red, sm: Colors.blue, xl: Colors.green)

copied to clipboard

• 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)

copied to clipboard

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