The color of the widget is different with the counter application

Overview

GoldenTestのお試しをしてみた

https://pub.dev/packages/golden_toolkit

このライブラリを使って、検証する

ちなみにマスターのスクリーンショットをGoldenというらしい。

カウンターアプリでWidgetのカラーが違う場合をテストしてみた

OK想定 NG想定

手順

1. dev_dependenciesにgolden_toolkitを追加

2. testフォルダにgolden_test.dartを作成

3. golden_test.dartを編集

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:golden_toolkit/golden_toolkit.dart';
import 'package:flutter_golden_test_demo/main.dart';

void main() {
  testGoldens('app', (WidgetTester tester) async {
    //デバイスの画面サイズ
    final size = Size(415, 896);
    
    //第一引数はどのWidgetをビルドするのか指定、どのサイズにビルドするかがsurfaceSize
    await tester.pumpWidgetBuilder(MyApp(), surfaceSize: size);
    
    //正規のスクリーンショットと同じかテストする
    await screenMatchesGolden(tester, 'myApp');
  });
}

4. Golden作成(マスターのスクリーンショット)

以下コマンドでtestフォルダにgoldensファイルが作成され、myApp.pngができているはずです。

flutter test --update-goldens
Golden(myApp.png)

5. 実際にテストしてみる(OK編)

OK想定

以下コマンドでテストします。

flutter test

結果は

All tests passed! 

のはず。

6. 実際にテストしてみる(NG編)

Goldenは変えずに、main.dartのプライマリーカラーを変えてみます。

NG想定

以下コマンドでテストします。

flutter test

結果は

Some tests failed. 

のはず。

テストに失敗すると、testフォルダにfailuresファイルが作成され、その配下に何が違っていたかのスクショができあがっている. 見ての通り差分をちゃんと判定してくれている、

myApp_masterImage.png myApp_testImage.png myApp_maskedDiff.png myApp_isolatedDiff.png
You might also like...

A simple Flutter widget to add in the widget tree when you want to show nothing, with minimal impact on performance.

nil A simple widget to add in the widget tree when you want to show nothing, with minimal impact on performance. Why? Sometimes, according to a condit

Dec 22, 2022

A flutter carousel widget, support infinite scroll, and custom child widget.

A flutter carousel widget, support infinite scroll, and custom child widget.

carousel_slider A carousel slider widget. Features Infinite scroll Custom child widgets Auto play Supported platforms Flutter Android Flutter iOS Flut

Nov 25, 2021

A Flutter Widget to make interactive timeline widget.

A Flutter Widget to make interactive timeline widget.

Bubble Timeline Package A Flutter Widget to make interactive timeline widget. This widget can be used to make Event Timelines, or Timelines for certai

Sep 22, 2022

Widget, that can make any static located widget hidable

Widget, that can make any static located widget hidable

Installing See the official installing guidline from hidable/install Usage & Overview To start using Hidable widget, we have to create a ScrollControl

Dec 16, 2022

📸 Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget.

📸 Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget.

📸 Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget. Photo View is largely used to show interacive images and other stuff such as SVG.

Jan 7, 2023

A widget that allow user resize the widget with drag

Flutter-Resizable-Widget A widget that allow user resize the widget with drag Note: this widget uses Getx Example bandicam.2021-11-11.12-34-41-056.mp4

Dec 13, 2022

A widget lib that the widget in this lib can react to flutter ScrollController's offset

A widget lib that the widget in this lib can react to flutter ScrollController's  offset

Language: English | 中文简体 linked_scroll_widgets A lib full of widgets that can react to the scrollController's offset change,to custom your UI effect.

Oct 16, 2022

Full customable rolling switch widget for flutter apps based on Pedro Massango's 'crazy-switch' widget

Full customable rolling switch widget for flutter apps based on Pedro Massango's 'crazy-switch' widget

lite_rolling_switch Full customable rolling switch widget for flutter apps based on Pedro Massango's 'crazy-switch' widget https://github.com/pedromas

Dec 1, 2022

A Flutter widget that will give a Glitch Animation Effect to it's child widget.

A Flutter widget that will give a Glitch Animation Effect to it's child widget.

GlitchEffect A Flutter widget that will give a Glitch Animation Effect to it's child widget. Installation Add the latest version of package to your pu

Nov 25, 2022
Owner
MatsumaruTsusyoshi
MatsumaruTsusyoshi
Flutter Number Counter

Number Counter Animatio Use this source code in your project Rate me ⭐ Thank you

Amirziya 3 Feb 21, 2022
GetX demo Counter with full understanding of State Management, Route Management and SnackBar

GetX demo Counter with full understanding of State Management, Route Management and SnackBar

TAD 1 Apr 4, 2022
An advanced switch widget, that can be fully customized with size, text, color, radius of corners.

flutter_advanced_switch An advanced switch widget, that can be fully customized with size, text, color, radius of corners. Switch Light Switch Dark Ge

Alex Melnyk 13 Dec 15, 2022
Flutter Color Picker Wheel - an easy to use widget which can be heavily customized

Flutter Color Picker Wheel Flutter Color Picker Wheel is an easy to use widget which can be heavily customized. You can use the WheelColorPicker direc

Kexin Lu 35 Oct 4, 2022
A widget that imposes different constraints on its child than it gets from its parent

A widget that imposes different constraints on its child than it gets from its parent, possibly allowing the child to overflow the parent. Similar to `OverflowBox` except that the unconstrained width or height is sized to the intrinsic size of the child, instead of being assumed to be infinite, which allows IntrinsicSizeOverflowBox to be used in a `Scrollable` widget.

Ron Booth 3 Dec 7, 2022
A repository to create and compare different methodologies of reusing local widget state logics.

A repository to create and compare different methodologies of reusing local widget state logics.

Tim Whiting 18 Dec 31, 2022
The flutter_otp_text_field package for flutter is a TextField widget that allows you to display different style pin.

flutter_otp_text_field flutter_otp_text_field The flutter_otp_text_field package for flutter is a TextField widget that allows you to display differen

David-Legend 30 Nov 8, 2022
An advanced flutter package to build responsive application accross all platform with ease and has an handful of different types of extension

Flutter Next Now build flutter apps with ease and responsive. An advanced flutter package to build responsive application accross all platform with ea

Shashi Kumar 10 Dec 29, 2022
A beautiful circle color picker for flutter.

A beautiful circle color picker for flutter.

Takeshi Tsukamoto 46 Dec 29, 2022
Love the material AppBar? Do you want to add more color to the appbar? Here's a gradientAppBar.

Gradient App Bar Love the material AppBar? Do you want to add more color to the appbar? Here's a gradientAppBar. It works just like the normal AppBar.

Joost Lekkerkerker 131 Nov 11, 2022