Getting Started

Overview

VisualExact is a design-product comparison service that helps designers and developers visually compare their projects. It provides suggestions for differences between them, helping users clearly address mismatches and achieve exact visual matching.

Installation

Developers and designers will have different installation guides. This documentation will focus solely on the developer side.

Before you can use the service, please follow these steps:

Step 1: Install the following two essential packages using the command below:

flutter pub add visualexact_flutter_plugin

Step 2: Create a global key file to manage all scrollable item keys and scroll controllers in one place.

A sample key file could be located at ./lib/global_key.dart, but you can store it elsewhere if preferred. This documentation will assume that your global key file is located at the path mentioned above.

A typical global key file should look like this:


import 'package:flutter/material.dart';
import 'package:screenshot/screenshot.dart';

final GlobalKey listViewKey1 = GlobalKey(debugLabel: 'listViewKey1');
final GlobalKey listViewKey2 = GlobalKey(debugLabel: 'listViewKey2');
final GlobalKey scrollViewKey1 = GlobalKey(debugLabel: 'scrollViewKey1');
final GlobalKey scrollViewKey2 = GlobalKey(debugLabel: 'scrollViewKey2');
final GlobalKey singleChildScrollViewKey1 = GlobalKey(debugLabel: 'singleChildScrollViewKey1');
final GlobalKey singleChildScrollViewKey2 = GlobalKey(debugLabel: 'singleChildScrollViewKey2');
final GlobalKey customScrollViewKey1 = GlobalKey(debugLabel: 'customScrollViewKey1');
final GlobalKey customScrollViewKey2 = GlobalKey(debugLabel: 'customScrollViewKey2');
final GlobalKey nestedScrollViewKey1 = GlobalKey(debugLabel: 'nestedScrollViewKey1');
final GlobalKey nestedScrollViewKey2 = GlobalKey(debugLabel: 'nestedScrollViewKey2');

final ScrollController listViewController1 = ScrollController();
final ScrollController listViewController2 = ScrollController();
final ScrollController scrollViewController1 = ScrollController();
final ScrollController scrollViewController2 = ScrollController();
final ScrollController singleChildScrollViewController1 = ScrollController();
final ScrollController singleChildScrollViewController2 = ScrollController();
final ScrollController customScrollViewController1 = ScrollController();
final ScrollController customScrollViewController2 = ScrollController();
final ScrollController nestedcrollViewController1 = ScrollController();
final ScrollController nestedcrollViewController2 = ScrollController();

final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

final ScreenshotController screenshotController = ScreenshotController();