Skip to content
Material Design Breakpoints for Flutter
Dart C++ Makefile Objective-C Batchfile Swift Other
Branch: master
Clone or download
Latest commit 051410f Oct 8, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode Initial commit May 24, 2019
docs adding docs May 29, 2019
example Initial commit May 24, 2019
lib Initial commit May 24, 2019
screenshots Initial commit May 24, 2019
web_example Update pubspec.yaml May 29, 2019
.gitattributes Initial commit May 24, 2019
.gitignore Initial commit May 24, 2019
.metadata
CHANGELOG.md updating version Oct 7, 2019
LICENSE Initial commit May 24, 2019
README.md Add Flutter Community banner. Jun 27, 2019
pubspec.lock Initial commit May 24, 2019
pubspec.yaml updating version Oct 7, 2019

README.md

Flutter Community: breakpoint

Buy Me A Coffee Donate

breakpoint

View the online demo here!

Overview

Follows Material Design Docs.

breakpoint

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.

return BreakpointBuilder(
    builder: (context, breakpoint) {
    print('Breakpoint: $breakpoint');
    return Container();
  },
);

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 application
void main() {
  // Desktop platforms aren't a valid platform.
  _setTargetPlatformForDesktop();

  return runApp(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;
  } else if (Platform.isLinux || Platform.isWindows) {
    targetPlatform = TargetPlatform.android;
  }
  if (targetPlatform != null) {
    debugDefaultTargetPlatformOverride = targetPlatform;
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (_, constraints) {
      final _breakpoint = Breakpoint.fromConstraints(constraints);
      return Scaffold(
        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) {
              return Container(
                child: Card(
                  child: Text(
                    index.toString(),
                  ),
                ),
              );
            },
          ),
        ),
      );
    });
  }
}
You can’t perform that action at this time.