Kategorien, Pakete und Repositories suchen

ducafecatFlutter-Ökosystem
Cover von pixel_perfect
Paketdetailsv1.1.3

pixel_perfect

Entwicklungstool, das Ihnen hilft, Ihre Flutter-Anwendung „pixelgenau“ zu gestalten

AndroidiOSWebmacOSWindowsLinux
pub.dev API-Dokumentation Quellcode
30-Tage-Downloads
5260
Likes
225
Pub-Punkte
150

Paket installieren

flutter pub add pixel_perfect

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Pixel Perfect ist ein Entwicklungstool, das Flutter-Entwicklern dabei hilft, pixelgenaue Designs zu erreichen, indem es visuelle Überlagerungen und Ausrichtungshilfen bereitstellt. Es ermöglicht eine präzise Layout-Inspektion bei verschiedenen Bildschirmgrößen und Auflösungen und erleichtert so die Sicherstellung der Konsistenz in der Benutzeroberfläche. Das Tool lässt sich nahtlos in den Entwicklungsworkflow integrieren, mit minimaler Einrichtung und bietet Echtzeit-Feedback während der Designumsetzung. Ideal für Teams, die sich auf hochwertige UIs konzentrieren, unterstützt es alle wichtigen Plattformen wie Android, iOS, Web, macOS, Windows und Linux.

Anwendungsfälle

  • Konsistente Benutzeroberfläche auf mehreren Gerätebildschirmen sicherstellen
  • Überprüfung von genauer Abstand und Ausrichtung in Layouts
  • Debugging von Designabweichungen während der Entwicklung
  • Zusammenarbeit mit Designern, um Mockups präzise abzubilden
  • Durchführung letzter Qualitätsprüfungen vor der App-Freigabe

Hauptmerkmale

  • Visuelle Ausrichtungshilfen und Rasterüberlagerungen
  • Echtzeit-Layout-Inspektion
  • Plattformübergreifende Unterstützung
  • Minimale Konfiguration erforderlich
  • Integration mit Flutter's Entwicklertools

Geeignet für

  • UI/UX-Designer, die mit Flutter arbeiten
  • Frontend-Entwickler, die sich auf Designgenauigkeit konzentrieren
  • Teams, die strenge Design-Konsistenz erfordern
  • Mobile- und Webanwendungsentwicklungsprojekte
  • designgeleitete Entwicklungsworkflows

Hinweise

  • Nicht für Produktionsbuilds vorgesehen
  • Kann die Leistung während der Entwicklung leicht beeinträchtigen
  • Benötigt manuelle Aktivierung im Debug-Modus
  • Am besten in Kombination mit den Richtlinien des Designsystems verwendet
  • Beschränkt auf visuelle Debugging, nicht für automatisiertes Testen

Original-README

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

pixel_perfect

Pub License: MIT style: effective dart PRs Welcome Awesome Flutter

logo

Put a semi-transparent image with the design over the top of the developed layout. It helps you to compare original design and current page.

demo1

demo2

Getting started

Add pixel_perfect in your pubspec.yaml dependencies.

dependencies:
 pixel_perfect: any
How To Use

Simple use

Add assets folder with images to your pubspec.yaml

  uses-material-design: true
  assets:
    - assets/

Import the following package in your dart file

import 'package:pixel_perfect/pixel_perfect.dart';


return PixelPerfect(
  assetPath: 'assets/design.png', // path to your asset image
  scale: 1, // scale value (optional)
  initBottom: 20, //  default bottom distance (optional)
  offset: Offset.zero, // default image offset (optional)
  initOpacity: 0.4, // init opacity value (optional)
  child: Scaffold(
    ..
  )
)

Extended use


return PixelPerfect.extended(
  image: Image.asset( // any image file
    'assets/element.png',
    scale: 2,
  ), 
  initBottom: 20, //  default bottom distance (optional)
  offset: Offset.zero, // default image offset (optional)
  initOpacity: 0.4, // init opacity value (optional)
  child: Scaffold(
    ..
  )
)

Video tutorials by Learn App Code

How to Make Pixel Perfect Flutter Apps
How to Make Responsive Flutter Apps, Pixel Perfect

Kategorien

Testen

Quell-Repository

Projekte, die dieses Paket verwenden