Pakete, Repositories und App-Kategorien suchen

ducafecatFlutter-Ökosystem
Paketdetailsv1.0.5

flutter_sizer

Flutter Sizer hilft bei der Implementierung einer responsiven Layouts durch Bereitstellung von Hilfswidgets und Erweiterungen.

AndroidiOSWebmacOSWindowsLinux
pub.dev API-Dokumentation Quellcode
30-Tage-Downloads
942
Likes
24
Pub-Punkte
150

Paket installieren

flutter pub add flutter_sizer

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Flutter Sizer ist ein responsives UI-Paket, das anpassbare Layouts über verschiedene Bildschirmgrößen und Ausrichtungen hinweg ermöglicht. Es bietet Hilfs-Widgets und Erweiterungen, um Schriftarten, Größen und Abstände basierend auf den Bildschirmabmessungen einfach zu skalieren. Durch die Nutzung der Bildschirmbreite und -höhe sorgt es dafür, dass das Design auf verschiedenen Geräten konsistent bleibt, ohne manuelle Berechnungen. Ideal für Entwickler, die flüssige, skalierbare Schnittstellen mit minimalem Boilerplate-Code erstellen möchten.

Anwendungsfälle

  • Responsive Layouts für mehrere Bildschirmgrößen erstellen
  • Skalierung von Benutzeroberflächenelementen proportional über Geräte
  • Einfachere responsive Gestaltung in mobilen und Web-Anwendungen
  • Konsistente Abstände und Typografie beibehalten
  • Plattformübergreifende Anwendungen mit einheitlichem Erscheinungsbild erstellen
  • Reduzierung manueller Größenberechnungen im UI-Code

Hauptmerkmale

  • Automatische Skalierung von Widgets basierend auf Bildschirmgröße
  • Hilfs-Erweiterungen für einfache Einheitenkonvertierung
  • Unterstützung für Hoch- und Querformat
  • Minimaler Aufbau mit nur wenigen Codezeilen
  • Plattformübergreifende Kompatibilität
  • Integrierte Unterstützung für Android, iOS, Web, macOS, Windows und Linux

Geeignet für

  • Entwickler, die responsive Flutter-Anwendungen erstellen
  • Teams, die konsistente Benutzeroberflächen über Geräte hinweg priorisieren
  • Projekte, die eine schnelle Implementierung von responsiven Layouts erfordern
  • Apps, die mehreren Plattformen mit unterschiedlichen Bildschirmgrößen zielen
  • Designer arbeiten eng mit Entwicklern an pixelgenauen Layouts
  • Anfänger lernen responsive Flutter-Muster

Hinweise

  • Kann Anpassungen erfordern, wenn benutzerdefinierte Layout-Beschränkungen verwendet werden
  • Nicht ideal für sehr komplexe oder nicht einheitliche Layouts
  • Möglicher Leistungseinbruch bei übermäßiger Widget-Verschachtelung
  • Erfordert sorgfältige Tests auf unterschiedlichen Bildschirmgrößen
  • Am besten mit einem konsistenten Design-System verwenden
  • Eingeschränkte Anpassungsmöglichkeiten für erweiterte Skalierungslogik

Original-README

Originaler README-Schnappschuss aus dem verknüpften Quell-Repository. Aktuelle Inhalte finden Sie im Repository.

Flutter Sizer

Flutter Sizer helps implement a responsive layout by providing helper widgets and extensions

Responsive Image

Responsive Image

Content

Installation

Add flutter_sizer to pubspec.yaml

dependencies:
  flutter_sizer: ^1.0.4

Parameters

  • Adaptive.h() - Returns a calculated height based on the device
  • Adaptive.w() - Returns a calculated width based on the device
  • Adaptive.sp() - Returns a calculated sp based on the device (deprecated)
  • Adaptive.dp() - Returns a calculated dp based on the device
  • .h - Returns a calculated height based on the device
  • .w - Returns a calculated width based on the device
  • .sp - Returns a calculated sp based on the device (deprecated)
  • .dp - Returns a calculated dp based on the device
  • Device.boxConstraints - Returns the Device's BoxConstraints
  • Device.orientation - Returns the Screen Orientation (portrait or landscape)
  • Device.screenType - Returns the Screen Type (mobile or tablet)
  • Device.devicePixelRatio - Returns the devicePixel Ratio or (1.0)

Usage

Import the Package

import 'package:flutter_sizer/flutter_sizer.dart';

Wrap MaterialApp with FlutterSizer widget

 FlutterSizer(
      builder: (context, orientation, screenType) {
        return MaterialApp();
      }
 )

Widget Size

Container(
  width: Adaptive.w(20),    // This will take 20% of the screen's width
  height: 30.5.h     // This will take 30.5% of the screen's height
)

Font size

Text(
  'Flutter Sizer', 
  style: TextStyle(fontSize: 15.dp),
)

Orientation

If you want to support both portrait and landscape orientations

Device.orientation == Orientation.portrait
  ? Container(   // Widget for Portrait
      width: 100.w,
      height: 20.5.h,
   )
  : Container(   // Widget for Landscape
      width: 100.w,
      height: 12.5.h,
   )

DeviceType

If you want the same layout to look different in tablet and mobile, use the Device.screenType method:

Device.screenType == ScreenType.tablet
  ? Container(   // Widget for Tablet
      width: 100.w,
      height: 20.5.h,
   )
  : Container(   // Widget for Mobile
      width: 100.w,
      height: 12.5.h,
   )

Take Note

You need to import flutter_sizer package in order to access number.h, number.w, and number.dp

Auto import in VSCode and Android Studio doesn't work for dart extension methods. Typing 10.h would not bring up auto import suggestion for this package

One workaround is to type Device so that the auto import suggestion would show up:

import 'package:flutter_sizer/flutter_sizer.dart';

Community Support

If you have any suggestions or issues, feel free to open an issue

If you would like to contribute, feel free to create a PR

Kategorien

Reaktive Benutzeroberfläche

Quell-Repository

Projekte, die dieses Paket verwenden

Noch keine Daten verfügbar.