responsive_layout_builder 0.4.4

  • Readme
  • Changelog
  • Example
  • Installing
  • 84

responsive_layout_builder #

Flutter package for building responsive layout based on screen sizes and orientation. It could be wristwatch, small/medium/large mobile, small/large tablet or desktop.

Getting Started #

Widget approach #

ResponsiveLayoutBuilder could be used as usual widget builder such as LayoutBuilder or OrientationBuilder, etc.

    builder: (context, screenSize) {
        // Use size argument to build size dependent widgets

size property within screenSize stores LayoutSize which could be watch, mobile, tablet, desktop or tv.

mobile property within screenSize stores MobileLayoutSize which could be small, medium or large.

tablet property within screenSize stores TabletLayoutSize which could be small or large.

Functional approach #

For using functional approach to retrieve current size use following:

// for getting mobile layout size 
getMobileLayoutSize(width: MediaQuery.of(context).size.width);

// for getting tablet layout size 
getTabletLayoutSize(width: MediaQuery.of(context).size.width);

// for getting screen size based on width
getScreenSize(width: MediaQuery.of(context).size.width);

// for getting screen size based on context 
getContextualScreenSize(context: context);

If you need to specify ScreenSizeSettings for all above functions sizes argument is needed to be passed, like this:

sizes: ScreenSizeSettings(...)

For getScreenSize and getContextualScreenSize could be specified also orientation and defaultSize.


  • Figure out how to determine TV
  • Add tests

Changelog #

[0.4.4] #

  • Update homepage link

[0.4.3] #

  • Migrated to GitHub
  • Minor refactorings

[0.4.2] #

  • Updated license file
  • Added license file headings

[0.4.1] #

  • Updated pedantic dependency
  • Minor changes due to linter

[0.4.0] #

  • Redesigned orientation usage for getScreenSize and getContextualScreenSize
  • Added null checks for getMobileLayoutSize, getTabletLayoutSize, getScreenSize and getContextualScreenSize
  • Fixed

[0.3.2] #

  • Added descriptions for getMobileLayoutSize, getTabletLayoutSize, getScreenSize and getContextualScreenSize
  • Minor fixes

[0.3.1] #

  • Added global getMobileLayoutSize, getTabletLayoutSize and two variations of getScreenSize based on width and getContextualScreenSize based on BuildContext
  • Moved orientation from parameter of builder to ScreenSize as parameter

[0.3.0] #

  • Redesigned LayoutSize, ScreenSizeSettings, ResponsiveLayoutBuilder
  • Added MobileLayoutSize, TabletLayoutSize and ScreenSize

[0.2.1] #

  • Added analysis_option.yaml

[0.2.0] #

  • Added flag for usage of Device Screen Size or All Available Screen Space
  • Added sample of usage of ResponsiveLayoutBuilder widget

[0.1.0] #

  • Created LayoutSize, ScreenSizeSettings, ResponsiveLayoutBuilder
  • Created Example


// Copyright (c) 2020, the MarchDev Toolkit project authors. Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

import 'package:flutter/material.dart';

import 'package:responsive_layout_builder/responsive_layout_builder.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  final navigatorKey = GlobalKey<NavigatorState>();
  final scaffoldKey = GlobalKey<ScaffoldState>();

  _MyAppState createState() => _MyAppState();

class _MyAppState extends State<MyApp> {
  static const Map<LayoutSize, String> layoutSizeEnumToString = { 'Wristwatch', 'Mobile',
    LayoutSize.tablet: 'Tablet',
    LayoutSize.desktop: 'Desktop', 'TV',
  static const Map<MobileLayoutSize, String> mobileLayoutSizeEnumToString = {
    MobileLayoutSize.small: 'Small',
    MobileLayoutSize.medium: 'Medium',
    MobileLayoutSize.large: 'Large',
  static const Map<TabletLayoutSize, String> tabletLayoutSizeEnumToString = {
    TabletLayoutSize.small: 'Small',
    TabletLayoutSize.large: 'Large',

  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: widget.navigatorKey,
      home: Scaffold(
        key: widget.scaffoldKey,
        appBar: AppBar(
          title: const Text('Responsive Layout Builder Example App'),
        body: ResponsiveLayoutBuilder(
          builder: (context, size) => Center(
                child: Column(
                  children: <Widget>[
                    Text('Layout Size: ${layoutSizeEnumToString[size.size]}'),
                    if ( != null)
                          'Mobile Size: ${mobileLayoutSizeEnumToString[]}'),
                    if (size.tablet != null)
                          'Tablet Size: ${tabletLayoutSizeEnumToString[size.tablet]}'),

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  responsive_layout_builder: ^0.4.4

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:responsive_layout_builder/responsive_layout_builder.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Mar 30, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.2.2 <3.0.0
flutter 0.0.0
pedantic ^1.8.0 1.9.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies