Another breakpoint framework. Aims to simplify as much as possible building adaptive layouts.
Features
- Really simple implementation
- Works with and without configuration
- Customizable
- Bootstrap breakpoints or Material Design breakpoints ready
Breakpoints
Default breakpoints (Bootstrap)
| Size | Name | Minimum Width |
|---|---|---|
| X-Small | xs/none | 0 |
| Small | sm | ≥576 |
| Medium | md | ≥768 |
| Large | lg | ≥992 |
| Extra large | xl | ≥1200 |
| Extra extra large | xxl | ≥1400 |
Material Design breakpoints
| Size | Name | Minimum Width |
|---|---|---|
| X-Small | xs/none | 0 |
| Small | sm | ≥600 |
| Medium | md | ≥905 |
| Large | lg | ≥1240 |
| Extra large | xl | ≥1440 |
| Extra extra large | xxl | - |
Getting started
- Import the library
import 'package:screen_breakpoints/screen_breakpoints.dart';
- If you want to personalize all the breakpoints, wrap up any widget above MaterialApp (or any other App that you use). For example:
/* ... */
// This is just like the default configuration
const myBreakpoints = BreakpointConfiguration(
xs: const Breakpoint(breakpoint: 0, width: double.infinity, margin: null, padding: 16, columns: 4),
sm: const Breakpoint(breakpoint: 576, width: 540, margin: null, padding: 16, columns: 8),
md: const Breakpoint(breakpoint: 768, width: 720, margin: null, padding: 16, columns: 12),
lg: const Breakpoint(breakpoint: 992, width: 960, margin: null, padding: 16, columns: 12),
xl: const Breakpoint(breakpoint: 1200, width: 1140, margin: null, padding: 24, columns: 12),
xxl: const Breakpoint(breakpoint: 1400, width: 1320, margin: null, padding: 24, columns: 12),
);
Widget build(BuildContext context) {
return BreakpointConfigurator(
configuration: myBreakpoints,
child: MaterialApp(
/* ... */
),
);
}
/* ... */
Every breakpoint is a Breakpoint type, each one has to be higher, if any set to NULL, they will default to the lower one. The default Breakpoints are based on Bootstrap To use Material change the configuration parameter to kMaterialBreakpoints:
/* ... */
Widget build(BuildContext context) {
return BreakpointConfigurator(
configuration: kMaterialBreakpoints,
child: MaterialApp(
/* ... */
),
);
}
/* ... */
- Otherwise, you can just use it, it will use the default settings.
Usage
This package contains 2 basic Widgets that you can use:
BreakpointContainer
Use it if you want to place object inside a container that will be resized based on the breakpoint. Generally good to use inside Scaffold's body. It can automatically swap children that match the layout for the current breakpoint.
/* ... */
Scaffold(
appBar: AppBar(
title: const BreakpointContainer(
fluid: true,
alignment: Alignment.center,
xlChild: Text('Sample Items - Desktop'),
mdChild: Text('Sample Items - Tablet'),
child: Text('Sample Items - Mobile'),
),
),
body: BreakpointContainer(
decoration: BoxDecoration(color: theme.cardColor),
xlChild: _DesktopView(),
mdChild: _TabletView(),
child: _MobileView(),
),
);
/* ... */
Parameters list:
BreakpointContainer(
height: // Height of the container
decoration: // Decoration of the centered Container
backgroundDecoration: // Decoration of the Container behind
foregroundDecoration: // Foreground decoration on top of the centered Container
alignment: // Alignment of the centered Container
clipBehavior: // Clipping of the centered Container
fluid: // Setting fluid to true will ignore breakpoint's width and margin
xxlChild: // Child to be shown at XXL Breakpoint, if null will use one below
xlChild: // Child to be shown at XL Breakpoint, if null will use one below
lgChild: // Child to be shown at LG Breakpoint, if null will use one below
mdChild: // Child to be shown at MD Breakpoint, if null will use one below
smChild: // Child to be shown at SM Breakpoint, if null will use one below
child: // Child to be shown at XS and up Breakpoint, this one is required.
);
BreakpointBuilder
This is the builder based on the BreakpointContainer. If you need to build a complex layout for each breakpoint you can use this one. It uses the BreakpointContainer under the hood but gives back a builder that on each rebuild will provide: BuildContext, Breakpoint you are currently in and BreakpointConfiguration.
Example:
/* ... */
Scaffold(
/* ... */
body: BreakpointBuilder(
decoration: BoxDecoration(color: theme.cardColor),
builder: (context, breakpoint, configuration) {
if(breakpoint >= configuration.xl) return _DesktopView();
if(breakpoint >= configuration.md) return _TabletView();
return _MobileView();
}
),
/* ... */
);
/* ... */
The outcome if the above example will be the exact same as the previous BreakpointContainer, the difference here is that you have a builder with a context in it so you can control more the result.
Parameters list:
BreakpointContainer(
builder: // Builder that will build the widget
height: // Height of the container
decoration: // Decoration of the centered Container
backgroundDecoration: // Decoration of the Container behind
foregroundDecoration: // Foreground decoration on top of the centered Container
alignment: // Alignment of the centered Container
clipBehavior: // Clipping of the centered Container
fluid: // Setting fluid to true will ignore breakpoint's width and margin
);
Find current Breakpoint
There is a simple way to find the current Breakpoint either from Context or MediaQuery. Just type inside the build function:
Widget build(BuildContext context) {
// From Build Context
final breakpoint = Breakpoint.fromContext(context);
// Alternative way
final breakpoint = context.breakpoint;
// From Media Query
final mediaQuery = MediaQuery.of(context);
final breakpoint = Breakpoint.fromMediaQuery(mediaQuery);
}
329 Dec 12, 2022
18 Dec 20, 2022
3 Dec 27, 2022
32 Dec 31, 2022
0 Dec 24, 2021
244 Dec 17, 2022
3 Oct 17, 2022
3 Aug 17, 2022
28 Sep 15, 2022
33 Dec 18, 2022