https://github.com/marchdev-tk/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.
https://github.com/marchdev-tk/responsive_layout_builder

dart dart2 dartlang desktop flutter flutter-package flutter-plugin layout orientation responsive responsive-layout tablet wristwatch

Last synced: 29 days ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/marchdev-tk/responsive_layout_builder
• Owner: marchdev-tk
• License: bsd-3-clause
• Created: 2020-02-13T09:05:23.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-03-04T12:56:54.000Z (over 3 years ago)
• Last Synced: 2024-10-01T16:39:58.203Z (about 1 month ago)
• Topics: dart, dart2, dartlang, desktop, flutter, flutter-package, flutter-plugin, layout, orientation, responsive, responsive-layout, tablet, wristwatch
• Language: Dart
• Homepage:
• Size: 72.3 KB
• Stars: 7
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# 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.

```dart

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:

```dart

// 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:

```dart

sizes: ScreenSizeSettings(...)

```

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

## TODO

* Figure out how to determine TV

* Add tests