pixel_perfect 1.1.1 icon indicating copy to clipboard operation
pixel_perfect: ^1.1.1 copied to clipboard

Development tool that helps you make your flutter application "pixel perfect"

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

153
likes
120
pub points
89%
popularity

Publisher

verified publisher iconkherel.com

Development tool that helps you make your flutter application "pixel perfect"

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on pixel_perfect