proxy_layout 2.1.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 69

proxy_layout #

pub package

Package to select layout per orientation or device size like mobile vs tablet layouts or portrait vs landscape

Usage #

You have two widgets at your disposal, DeviceProxy to use different widget for mobile and tablet devices, OrientationProxy to use different device depending of the device orientation.

DeviceProxy #

DeviceProxy(
        mobileBuilder: (context) => Text('Mobile widget'),
        tabletBuilder: (context) => Text('Tablet widget'),
      ),

The threshold to separate Mobile and Tablet devices is 600, you can override it by setting the threshold attribute.

If you don't want to specify mobile and tablet you can use builder attribute that will let you know if you are on tablet or mobile with DeviceProxyType enum.

The is isMobile and isTablet static methods available if you need to know at some point the device type to tweak some attributes.

OrientationProxy #

OrientationProxy(
          landscapeBuilder: (context) => Text('Landscape widget'),
          portraitBuilder: (context) => Text('Portrait widget'),
        ),

If you don't want to specify portrait and landscape you can use builder attribute that will let you know which orientation you are with DeviceOrientationType enum.

The is isPortrait and isLandscape static methods available if you need to know at some point the orientation to just tweak some attributes.

LayoutProxy #

LayoutProxy help you manage device and orientation at once, check this out:

LayoutProxy(
          tabletPortraitBuilder: (context) => Text('Tablet portrait widget'),
          tabletLandscapeBuilder: (context) => Text('Tablet landscape widget'),
          mobilePortraitBuilder: (context) => Text('Mobile portrait widget'),
          mobileLandscapeBuilder: (context) => Text('Mobile landscape widget'),
        ),

The threshold to separate Mobile and Tablet devices is 600, you can override it by setting the threshold attribute.

[2.1.0] - 30/09/2019. #

  • add LayoutProxy widget

[2.0.2] - 29/09/2019. #

  • use shortestSide to more accurate tablet detection

[2.0.1] - 18/09/2019. #

  • fix tablet detection to be based on orientation

[2.0.0] - 06/06/2019. #

  • change interfaces to use builders.
  • add builder that receive enums.
  • add static helpers methods .

[1.0.0] - 19/02/2019. #

  • initial release.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:proxy_layout/proxy_layout.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @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 Scaffold(
      appBar: AppBar(
        title: Text('Proxy Layout Home Page'),
      ),
      body: DeviceProxy(
        mobileBuilder: (_) => OrientationProxy(
          landscapeBuilder: (_) => MyMobileLandscapeContent(),
          portraitBuilder: (_) => MyMobilePortraitContent(),
        ),
        tabletBuilder: (_) => OrientationProxy(
          landscapeBuilder: (_) => MyTabletLandscapeContent(),
          portraitBuilder: (_) => MyTabletPortraitContent(),
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

class MyMobilePortraitContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Mobile portrait content'));
  }
}

class MyMobileLandscapeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Mobile landscape content'));
  }
}

class MyTabletPortraitContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Tablet portrait content'));
  }
}

class MyTabletLandscapeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Tablet landscape content'));
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  proxy_layout: ^2.1.0

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:proxy_layout/proxy_layout.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
37
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 Mar 31, 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

Health suggestions

Format lib/proxy_layout.dart.

Run flutter format to format lib/proxy_layout.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.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
flutter_test