breakpoint

View the online demo here!

Warning

This project has moved here: https://github.com/rodydavis/packages.dart

Overview

Follows Material Design Docs.

Usage

When you are wanting to calculate the breakpoint of a widget that may not take up the full screen. This needs BoxConstraints but can be provided by the layout builder.

final _breakpoint =Breakpoint.fromConstraints(constraints);

When a widget always takes up thye full screen.

final _breakpoint =Breakpoint.fromMediaQuery(context);

Use BreakpointBuilder if you want the layout builder wrapped for you.

returnBreakpointBuilder(
builder: (context, breakpoint) {
print('Breakpoint: $breakpoint');
returnContainer();
},
);

Example

import'dart:io';
import'package:flutter/foundation.dart';
import'package:flutter/material.dart';
import'package:breakpoint/breakpoint.dart';
/// main is entry point of Flutter applicationvoidmain() {
// Desktop platforms aren't a valid platform._setTargetPlatformForDesktop();
returnrunApp(MyApp());
}
/// If the current platform is desktop, override the default platform to/// a supported platform (iOS for macOS, Android for Linux and Windows)./// Otherwise, do nothing.void_setTargetPlatformForDesktop() {
TargetPlatform targetPlatform;
if (Platform.isMacOS) {
targetPlatform =TargetPlatform.iOS;
} elseif (Platform.isLinux ||Platform.isWindows) {
targetPlatform =TargetPlatform.android;
}
if (targetPlatform !=null) {
debugDefaultTargetPlatformOverride = targetPlatform;
}
}
classMyAppextendsStatelessWidget {
@overrideWidgetbuild(BuildContext context) {
returnMaterialApp(
title:'Flutter Demo',
theme:ThemeData(
primarySwatch:Colors.blue,
),
home:MyHomePage(),
);
}
}
classMyHomePageextendsStatelessWidget {
@overrideWidgetbuild(BuildContext context) {
returnLayoutBuilder(builder: (_, constraints) {
final _breakpoint =Breakpoint.fromConstraints(constraints);
returnScaffold(
appBar:AppBar(
title:Text('Breakpoint Example: ${_breakpoint.toString()}'),
),
body:Container(
padding:EdgeInsets.all(_breakpoint.gutters),
child:GridView.builder(
gridDelegate:SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: _breakpoint.columns,
crossAxisSpacing: _breakpoint.gutters,
mainAxisSpacing: _breakpoint.gutters,
),
itemCount:200,
itemBuilder: (_, index) {
returnContainer(
child:Card(
child:Text(
index.toString(),
),
),
);
},
),
),
);
});
}
}