https://github.com/kherel/pixel_perfect

Compare your design and current flutter layout.
https://github.com/kherel/pixel_perfect

awesome-flutter flutter flutter-tool pixel-perfect

Last synced: 3 months ago
JSON representation

Compare your design and current flutter layout.

• Host: GitHub
• URL: https://github.com/kherel/pixel_perfect
• Owner: kherel
• License: mit
• Created: 2021-04-08T17:57:26.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-05-22T11:53:11.000Z (about 3 years ago)
• Last Synced: 2025-10-23T02:34:08.393Z (7 months ago)
• Topics: awesome-flutter, flutter, flutter-tool, pixel-perfect
• Language: Dart
• Homepage:
• Size: 4.77 MB
• Stars: 46
• Watchers: 1
• Forks: 10
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-flutter - Pixel Perfect - Compare your design and current flutter layout. ` 📝 2 months ago ` (Utilities [🔝](#readme))

README

          
# pixel_perfect

[![Pub](https://img.shields.io/pub/v/pixel_perfect.svg)](https://pub.dartlang.org/packages/pixel_perfect)

[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)

[![style: effective dart](https://img.shields.io/badge/style-effective_dart-40c4ff.svg)](https://pub.dev/packages/effective_dart)

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/kherel/pixel_perfect)

[![Awesome Flutter](https://img.shields.io/badge/Awesome-Flutter-blue.svg?longCache=true&style=flat-square)](https://github.com/Solido/awesome-flutter)

![logo](logo.png)

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](demo1.gif)

![demo2](demo2.gif)

## Getting started

Add pixel_perfect in your `pubspec.yaml` dependencies.

```yaml

dependencies:

 pixel_perfect: any

```

### How To Use

**Simple use**

Add assets folder with images to your `pubspec.yaml`

```yaml

  uses-material-design: true

  assets:

    - assets/

```

Import the following package in your dart file

```dart

import 'package:pixel_perfect/pixel_perfect.dart';

```

```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**

```dart

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](https://www.youtube.com/channel/UChMjpXwPFzK6x82qz-R_TEQ)

[How to Make Pixel Perfect Flutter Apps](https://www.youtube.com/watch?v=L4G_ylrmKQ8)  

[How to Make Responsive Flutter Apps, Pixel Perfect](https://www.youtube.com/watch?v=Chat5vYVGg0)