From ebd794a137ce1189f244fda229ef4abb7b1b4be4 Mon Sep 17 00:00:00 2001 From: Ferhat Date: Wed, 2 Dec 2020 08:30:42 -0800 Subject: [PATCH] [web] Add wrapbox scroll benchmark (#70966) --- .../macrobenchmarks/assets/Icon-192.png | Bin 0 -> 5292 bytes .../lib/src/web/bench_wrapbox_scroll.dart | 174 ++++++++++++++++++ .../macrobenchmarks/lib/web_benchmarks.dart | 2 + dev/benchmarks/macrobenchmarks/pubspec.yaml | 1 + 4 files changed, 177 insertions(+) create mode 100644 dev/benchmarks/macrobenchmarks/assets/Icon-192.png create mode 100644 dev/benchmarks/macrobenchmarks/lib/src/web/bench_wrapbox_scroll.dart diff --git a/dev/benchmarks/macrobenchmarks/assets/Icon-192.png b/dev/benchmarks/macrobenchmarks/assets/Icon-192.png new file mode 100644 index 0000000000000000000000000000000000000000..b749bfef07473333cf1dd31e9eed89862a5d52aa GIT binary patch literal 5292 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 L>gTe~DWM4f2kRIC literal 0 HcmV?d00001 diff --git a/dev/benchmarks/macrobenchmarks/lib/src/web/bench_wrapbox_scroll.dart b/dev/benchmarks/macrobenchmarks/lib/src/web/bench_wrapbox_scroll.dart new file mode 100644 index 0000000000..297c281971 --- /dev/null +++ b/dev/benchmarks/macrobenchmarks/lib/src/web/bench_wrapbox_scroll.dart @@ -0,0 +1,174 @@ +// Copyright 2014 The Flutter Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +import 'dart:async'; +import 'dart:ui'; + +import 'package:flutter/material.dart'; + +import 'recorder.dart'; + +/// Creates a [Wrap] inside a ListView. +/// +/// Tests large number of DOM nodes since image breaks up large canvas. +class BenchWrapBoxScroll extends WidgetRecorder { + BenchWrapBoxScroll() : super(name: benchmarkName); + + static const String benchmarkName = 'bench_wrapbox_scroll'; + + @override + Widget createWidget() { + return MaterialApp( + theme: ThemeData( + primarySwatch: Colors.blue, + ), + title: 'WrapBox Scroll Benchmark', + home: const Scaffold(body: MyHomePage()), + ); + } +} + +class MyHomePage extends StatefulWidget { + const MyHomePage({Key key, this.title}) : super(key: key); + + final String title; + + @override + _MyHomePageState createState() => _MyHomePageState(); +} + +class _MyHomePageState extends State { + ScrollController scrollController; + int block = 0; + static const Duration stepDuration = Duration(milliseconds: 500); + static const double stepDistance = 400; + + @override + void initState() { + super.initState(); + + scrollController = ScrollController(); + + // Without the timer the animation doesn't begin. + Timer.run(() async { + while (block < 25) { + await scrollController.animateTo((block % 5) * stepDistance, + duration: stepDuration, curve: Curves.easeInOut); + block++; + } + }); + } + + @override + void dispose() { + super.dispose(); + scrollController.dispose(); + } + + @override + Widget build(BuildContext context) { + return ListView( + controller: scrollController, + children: [ + Wrap( + children: [ + for (int i = 0; i < 30; i++) + FractionallySizedBox( + widthFactor: 0.2, + child: ProductPreview(i)), //need case1 + for (int i = 0; i < 30; i++) ProductPreview(i), //need case2 + ], + ), + ]); + } +} + +class ProductPreview extends StatelessWidget { + const ProductPreview(this.previewIndex); + + final int previewIndex; + + @override + Widget build(BuildContext context) { + return GestureDetector( + behavior: HitTestBehavior.translucent, + onTap: () => print('tap'), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Container( + margin: const EdgeInsets.all(23), + padding: const EdgeInsets.all(18), + decoration: const BoxDecoration( + color: Color(0xfff9f9f9), + shape: BoxShape.circle, + ), + child: Image.network( + 'assets/assets/Icon-192.png', + width: 100, + height: 100, + ), + ), + const Text( + 'title', + ), + const SizedBox( + height: 14, + ), + Wrap( + alignment: WrapAlignment.center, + children: [ + ProductOption( + optionText: '$previewIndex: option1', + ), + ProductOption( + optionText: '$previewIndex: option2', + ), + ProductOption( + optionText: '$previewIndex: option3', + ), + ProductOption( + optionText: '$previewIndex: option4', + ), + ProductOption( + optionText: '$previewIndex: option5', + ), + ], + ), + ], + ), + ); + } +} + +class ProductOption extends StatelessWidget { + const ProductOption({ + Key key, + @required this.optionText, + }) : super(key: key); + + final String optionText; + + @override + Widget build(BuildContext context) { + return Container( + constraints: const BoxConstraints(minWidth: 56), + margin: const EdgeInsets.all(2), + padding: const EdgeInsets.symmetric(horizontal: 11, vertical: 5), + decoration: BoxDecoration( + border: Border.all( + width: 1, + color: const Color(0xffebebeb), + ), + borderRadius: const BorderRadius.all(Radius.circular(15)), + ), + child: Text( + optionText, + maxLines: 1, + textAlign: TextAlign.center, + overflow: TextOverflow.ellipsis, + ), + ); + } +} diff --git a/dev/benchmarks/macrobenchmarks/lib/web_benchmarks.dart b/dev/benchmarks/macrobenchmarks/lib/web_benchmarks.dart index 92a6d8a3b8..c4b80959d2 100644 --- a/dev/benchmarks/macrobenchmarks/lib/web_benchmarks.dart +++ b/dev/benchmarks/macrobenchmarks/lib/web_benchmarks.dart @@ -25,6 +25,7 @@ import 'src/web/bench_paths.dart'; import 'src/web/bench_picture_recording.dart'; import 'src/web/bench_simple_lazy_text_scroll.dart'; import 'src/web/bench_text_out_of_picture_bounds.dart'; +import 'src/web/bench_wrapbox_scroll.dart'; import 'src/web/recorder.dart'; typedef RecorderFactory = Recorder Function(); @@ -53,6 +54,7 @@ final Map benchmarks = { BenchMouseRegionGridScroll.benchmarkName: () => BenchMouseRegionGridScroll(), BenchMouseRegionGridHover.benchmarkName: () => BenchMouseRegionGridHover(), BenchMouseRegionMixedGridHover.benchmarkName: () => BenchMouseRegionMixedGridHover(), + BenchWrapBoxScroll.benchmarkName: () => BenchWrapBoxScroll(), if (isCanvasKit) BenchBuildColorsGrid.canvasKitBenchmarkName: () => BenchBuildColorsGrid.canvasKit(), diff --git a/dev/benchmarks/macrobenchmarks/pubspec.yaml b/dev/benchmarks/macrobenchmarks/pubspec.yaml index 154f7fb6d2..7ba5964291 100644 --- a/dev/benchmarks/macrobenchmarks/pubspec.yaml +++ b/dev/benchmarks/macrobenchmarks/pubspec.yaml @@ -87,6 +87,7 @@ flutter: - packages/flutter_gallery_assets/food/butternut_squash_soup.png - packages/flutter_gallery_assets/food/cherry_pie.png - assets/999x1000.png + - assets/Icon-192.png # The following assets are required for running Flutter Gallery benchmarks. - packages/flutter_gallery_assets/assets/icons/settings/settings_light.flr