Paketdetailsv1.0.3

flutter_spacer

spacer ist ein Dart-Paket für Flutter, mit dem Widgets einfach basierend auf Prozentwerten der Bildschirmbreite oder -höhe abgesteckt werden können.

AndroidiOSWebmacOSWindowsLinux

pub.dev API-Dokumentation Quellcode

30-Tage-Downloads: 35
Likes: 20
Pub-Punkte: 150

Paket installieren

flutter pub add flutter_spacer

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

flutter_spacer ist ein Flutter-Paket, das die Platzierung von Widgets mithilfe von Prozentwerten der Bildschirmbreite oder -höhe vereinfacht. Es bietet eine saubere und intuitive Möglichkeit, responsive Abstände zwischen UI-Elementen hinzuzufügen, ohne Werte manuell berechnen zu müssen. Ideal für konsistente Layouts auf verschiedenen Bildschirmgrößen und Orientierungen, verbessert es die Layoutflexibilität und reduziert Boilerplate-Code. Das Paket unterstützt alle wichtigen Plattformen und gewährleistet Konsistenz über Plattformen hinweg. Besonders nützlich bei Formularen, Rastern und responsiven Designs, bei denen prozentuale Abstände entscheidend sind.

Anwendungsfälle

Reaktive UI-Layouts
Formularabstand
Rasterausrichtung
Plattformübergreifendes Design
Dynamische Abstandseinstellung
Widgets zentrieren

Hauptmerkmale

Prozentualer Abstand
Unterstützt Breite und Höhe
Plattformübergreifende Kompatibilität
Minimales Boilerplate
Einfache Integration
reaktives Design

Geeignet für

Entwickler, die responsive Apps erstellen
UI-Designer, die präzise Abstände suchen
Projekte, die eine konsistente Layoutskalierung erfordern
Teams, die wartbaren Code priorisieren
Apps für mehrere Gerätegrößen

Hinweise

Verständnis von prozentbasierter Layoutgestaltung erforderlich
Möglicherweise sind zusätzliche Einschränkungen bei komplexen Layouts erforderlich
Nicht ideal für Anforderungen an festen Pixelabstand
Nur auf die Abstandsfunktion beschränkt
Am besten in Kombination mit anderen Layout-Widgets verwendet

Original-README

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

flutter_spacer is a Dart package that simplifies the creation of responsive layouts by providing utilities for easily spacing between widgets in terms of percentage of screen width or height.

Features

Extension Methods: Use extension methods on num to create SizedBox widgets with a percentage of the screen width or height.
Responsive Utilities: The package includes utilities to get the device's height and width, making it easy to create responsive layouts.

Getting started

To use this package, add flutter_spacer to your pubspec.yaml file

  dependencies:
  flutter_spacer: ^1.0.2 # use the latest version

 dart pub add flutter_spacer

Usage

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FlutterSpacer(
      builder: (context) {
        return MaterialApp(
          title: 'My App',
          home: MyHomePage(),
        );
      },
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
          
              height: 20,
              width: 50,
              color: Colors.blue,
              child: Center(
                child: Text(
                  'first Container',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
            
            20.hs // give you space of 20%
            Container(
          
              height: 20,
              width: 50,
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Second Container',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),

          ],
        ),
      ),
    );
  }
}

Additional Information

Thank you for using the flutter_spacer package! Here's some additional information to help you make the most out of this package:

Issues and Contributions

If you encounter any issues with the package or have suggestions for improvements, feel free to open an issue on the GitHub repository. Contributions are welcome, and we appreciate any help to make this package better.