Compare your design and current flutter layout

pixel_perfect

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.

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(
    ..
  )
)