Buscar categorias, pacotes e repositórios

ducafecatGuia do ecossistema Flutter
Capa de pixel_perfect
Detalhes do pacotev1.1.3

pixel_perfect

Ferramenta de desenvolvimento que ajuda você a tornar seu aplicativo Flutter 'pixel perfeito'

AndroidiOSWebmacOSWindowsLinux
pub.dev Documentação da API Código-fonte
Downloads em 30 dias
5,3 mil
Curtidas
225
Pontos Pub
150

Instalar pacote

flutter pub add pixel_perfect

Visão geral do pacote

Orientação gerada a partir de informações públicas. Apenas para referência.

Pixel Perfect é uma ferramenta de desenvolvimento projetada para ajudar os desenvolvedores Flutter a alcançar designs pixel-perfeitos por meio de sobreposições visuais e guias de alinhamento. Permite inspeção precisa do layout em diferentes tamanhos de tela e resoluções, facilitando a garantia da consistência na aparência da interface. A ferramenta se integra perfeitamente ao fluxo de trabalho de desenvolvimento com configuração mínima, oferecendo feedback em tempo real durante a implementação do design. Ideal para equipes focadas em interfaces de alta fidelidade, suporta todas as principais plataformas, incluindo Android, iOS, Web, macOS, Windows e Linux.

Casos de uso

  • Garantir uma interface do usuário consistente em várias telas de dispositivos
  • Validando espaçamento e alinhamento exatos em layouts
  • Depuração de discrepâncias de design durante o desenvolvimento
  • Colaborando com designers para corresponder exatamente aos protótipos
  • Realizando verificações finais de qualidade antes do lançamento do aplicativo

Principais recursos

  • Guias de alinhamento visual e sobreposições de grade
  • Inspeção de layout em tempo real
  • Suporte multiplataforma
  • Configuração mínima necessária
  • Integração com as ferramentas de desenvolvimento do Flutter

Indicado para

  • Designers de UI/UX trabalhando com Flutter
  • Desenvolvedores front-end focados na precisão do design
  • Equipes que exigem consistência de design rigorosa
  • Projetos de desenvolvimento de aplicativos móveis e web
  • fluxos de trabalho de desenvolvimento orientados por design

Considerações

  • Não destinado a builds de produção
  • Pode afet levemente o desempenho durante o desenvolvimento
  • Requer ativação manual no modo de depuração
  • Melhor usado em conjunto com as diretrizes do sistema de design
  • Limitado à depuração visual, não testes automatizados

README original

Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.

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

Categorias

Teste

Repositório-fonte

Projetos que usam este pacote