[Web] [CanvasKit] CupertinoTabBar with blur filter causes repeated JavaScript Warnings

main.dart

// MIT License
// Copyright 2020 Mike Rydstrom
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included
// in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
// IN THE SOFTWARE.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(IssueDemo());
}

class IssueDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(
      SystemUiOverlayStyle(
        systemNavigationBarColor: Colors.grey[100],
        statusBarColor: Colors.transparent,
        statusBarIconBrightness: Brightness.light,
        systemNavigationBarIconBrightness: Brightness.dark,
      ),
    );
    return MaterialApp(
      title: 'Issue demo',
      theme: ThemeData(
        primarySwatch: Colors.indigo,
        scaffoldBackgroundColor: Colors.grey[100],
        floatingActionButtonTheme: FloatingActionButtonThemeData(
          backgroundColor: Colors.red[800],
        ),
        buttonTheme: ButtonThemeData(
          colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.indigo),
          textTheme: ButtonTextTheme.primary,
        ),
      ),
      debugShowCheckedModeBanner: false,
      home: IssuePage(),
    );
  }
}

class IssuePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _IssuePageState();
  }
}

class _IssuePageState extends State<IssuePage> {
  bool behindBody;
  bool showAppBar;
  bool transparentBar;
  int selectedIndex;

  @override
  void initState() {
    behindBody = true;
    showAppBar = true;
    transparentBar = true;
    selectedIndex = 0;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      extendBody: behindBody,
      appBar: showAppBar
          ? AppBar(
              title: const Text('CupertinoTabBar Blur Issue'),
              centerTitle: true,
              elevation: 0,
              backgroundColor: Colors.transparent,
              flexibleSpace: Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.topLeft,
                    end: Alignment.topRight,
                    colors: <Color>[
                      Colors.indigo,
                      Colors.indigo.withOpacity(0.85),
                    ],
                  ),
                ),
                child: null,
              ),
            )
          : null,
      bottomNavigationBar: CupertinoTabBar(
        backgroundColor: Theme.of(context)
            .canvasColor
            .withOpacity(transparentBar ? 0.50 : 1.0),
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            title: Text('Business'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            title: Text('School'),
          ),
        ],
        currentIndex: selectedIndex,
        onTap: (int value) {
          setState(() {
            selectedIndex = value;
          });
        },
      ),
      body: ListView(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(16),
            child: Text(
              'Blur filter Web warning demo',
              style: Theme.of(context).textTheme.headline5,
            ),
          ),
          const ListTile(
            title: Text('BackdropFilter + ImageFilter.blur CanvasKit issue'),
            subtitle: Text(
                'The blur filter issue effect used on eg CupertinoTabBar '
                'causes a repeated Javascrip warning on Web Debug builds with CanvasKit. '
                '\n\n'
                'The warning:\n'
                'Cannot find native JavaScript type (SkCanvasSaveLayerWithFilterOverload) '
                'for type check  types.dart:238\n'
                'can occure over 100k times and makes debugging difficult.'),
          ),
          const Divider(),
          SwitchListTile(
            title: const Text('Use opacity on bottom bar'),
            subtitle:
                const Text('Keep on for 0.5 opacity on bottoom bar, turn OFF '
                    'for opacity 1.0'),
            value: transparentBar,
            onChanged: (bool value) {
              setState(() {
                transparentBar = value;
              });
            },
          ),
          const Divider(),
          SwitchListTile(
            title: const Text('Extend body behind bottom bar'),
            subtitle:
                const Text('Keep on to scroll items behind the bottom bar'),
            value: behindBody,
            onChanged: (bool value) {
              setState(() {
                behindBody = value;
              });
            },
          ),
          const Divider(),
          for (int i = 1; i <= 50; i++)
            Card(
                margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                color: Colors.primaries[i % Colors.primaries.length][600],
                child: Padding(
                  padding: const EdgeInsets.all(16),
                  child: Text(
                      'CARD $i\n'
                      'A few cards so we can scroll behind app bar and bottom '
                      'navigation bar and see when body content extends behind '
                      'the app bar and bottom bar that has some opacity.',
                      style: Theme.of(context).primaryTextTheme.subtitle1),
                )),
        ],
      ),
    );
  }
}

Reported as Flutter issue flutter/flutter#65628