FLUTTER ECOSYSTEM

marchdev-tk/responsive_layout_builder

Flutter-Paket zum Erstellen von responsiven Layouts basierend auf Bildschirmgrößen und Ausrichtung. Kann für Armbanduhr, kleine/mitte große Mobilgeräte, kleine/große Tablets oder Desktops verwendet werden.

Projektcover von responsive_layout_builder
Stars
8
Forks
2
Letzter Push (UTC)
04.03.2021
Projektstatus
Aktiv
MarchDev Toolkit GitHub avatar
GITHUB Organization

MarchDev Toolkit ↗

Code with ease via MarchDev Toolkit

SprachenDartRubyKotlinShellSwiftObjective-C

Technische Themen

Von diesem Repository veröffentlichte Pakete

Verwendete Abhängigkeiten

Abhängigkeiten 3 Einträge
  • flutter{"sdk":"flutter"}
  • pedantic^1.11.0
  • flutter_testEntwicklung{"sdk":"flutter"}

Original-README

Englischer Projektschnappschuss. Aktuelle Inhalte auf GitHub.

Projekt-README ein-/ausklappen

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.

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