flutter_responsive_breakpoints

Description:

flutter responsive breakpoints

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.