像素完美

将带有设计的半透明图像叠加在已开发的布局之上。它有助于您比较原始设计和当前页面。

demo1

demo2

入门

在您的 pubspec.yaml 依赖项中添加 pixel_perfect。

dependencies:
 pixel_perfect: any

使用方法

简单用法

将带有图像的 assets 文件夹添加到您的 pubspec.yaml

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

在您的 dart 文件中导入以下包

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

扩展用法


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

GitHub

https://github.com/kherel/pixel_perfect