responsive_layout_builder 0.4.1

  • Readme
  • Changelog
  • Example
  • Installing
  • 69

responsive_layout_builder #

Flutter package for building responsive layout based on screen sizes. 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.

ResponsiveLayoutBuilder(
    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.

TODO #

  • Figure out how to determine TV
  • Add tests

Changelog #

[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 README.md

[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

example/README.md

responsive_layout_builder_example #

Demonstrates how to use the responsive_layout_builder plugin.

Usage #

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

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  static const Map<LayoutSize, String> layoutSizeEnumToString = {
    LayoutSize.watch: 'Wristwatch',
    LayoutSize.mobile: 'Mobile',
    LayoutSize.tablet: 'Tablet',
    LayoutSize.desktop: 'Desktop',
    LayoutSize.tv: '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',
  };

  @override
  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 (size.mobile != null)
                      Text(
                          'Mobile Size: ${mobileLayoutSizeEnumToString[size.mobile]}'),
                    if (size.tablet != null)
                      Text(
                          'Tablet Size: ${tabletLayoutSizeEnumToString[size.tablet]}'),
                  ],
                ),
              ),
        ),
      ),
    );
  }
}

Getting Started #

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Use this package as a library

1. Depend on it

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


dependencies:
  responsive_layout_builder: ^0.4.1

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';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
38
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
69
Learn more about scoring.

We analyzed this package on Nov 20, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.6.0
  • pana: 0.12.21
  • Flutter: 1.9.1+hotfix.6

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Dependencies

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