flutter SkCanvas::Flush execution is too slow - flutter

Question

import 'dart:ui';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: TabBarPage(),
);
}
}
class TabBarPage extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return TabBarPageState();
}
}
class TabBarPageState extends State<TabBarPage> with SingleTickerProviderStateMixin {
TabController _tabController; //需要定义一个Controller
List tabs = ["page 1", "page 2", "page 3", "page 4", "page 5", "page 6"];
#override
void initState() {
super.initState();
print("TabBarPageState initState");
_tabController = TabController(length: tabs.length, vsync: this);
}
#override
void dispose() {
super.dispose();
print("TabBarPageState dispose");
}
#override
Widget build(BuildContext context) {
print("TabBarPageState build");
return Scaffold(
body: TabBarView(
controller: _tabController,
children: getChildWidgets(),
),
bottomNavigationBar: TabBar(
controller: _tabController,
tabs: tabs.map((item) {
return Container(color: Colors.black,child: Text(item, style: TextStyle(color: Colors.white),),);
}).toList(),
),
);
}
List<Widget> getChildWidgets() {
return List<Widget>()..addAll([PageWidget("page 1", Colors.red), PageWidget("page 2", Colors.yellow), PageWidget("page 3", Colors.blue),
PageWidget("page 4", Colors.green), PageWidget("page 5", Colors.deepPurpleAccent), PageWidget("page 6", Colors.tealAccent), ]);
}
}
class PageWidget extends StatefulWidget {
final String title;
final Color bgColor;
PageWidget(this.title, this.bgColor);
#override
_PageWidgetState createState() => _PageWidgetState();
}
class _PageWidgetState extends State<PageWidget> with AutomaticKeepAliveClientMixin{
#override
void initState() {
super.initState();
print("_PageWidgetState initState ${widget.title}");
}
#override
void dispose() {
super.dispose();
print("_PageWidgetState dispose ${widget.title}");
}
#override
Widget build(BuildContext context) {
print("_PageWidgetState build ${widget.title}");
super.build(context);
return Center(
child: Container(
width: double.infinity,
height: double.infinity,
color: widget.bgColor,
child: "page 2" != widget.title ? Text(widget.title) : RawMaterialButton(child: Text(widget.title), onPressed: (){ Navigator.of(context).push(MaterialPageRoute(builder: (context)=>SecondPageWidget("测试", Colors.deepOrangeAccent)));},),
),
);
}
#override
bool get wantKeepAlive => true;
}
class SecondPageWidget extends StatefulWidget {
final String title;
final Color bgColor;
SecondPageWidget(this.title, this.bgColor);
#override
_SecondPageWidgetState createState() => _SecondPageWidgetState();
}
class _SecondPageWidgetState extends State<SecondPageWidget> {
#override
Widget build(BuildContext context) {
print("SecondPageWidget ${widget.title} build");
return Center(
child: Container(
width: double.infinity,
height: double.infinity,
color: widget.bgColor,
child: Text(widget.title),
),
);
}
}
A very simple test, click on the tab on the bottomNavigationBar to switch the page in TabBarView, but it cannot reach 60FPS from the devTools, and the time-consuming is mainly reflected in the SkCanvas::Flush operation on the Raster thread 。
Can you please tell me how to optimize the speed ？
Jump from page 1 to page 2, whether it has a lot to do with RawMaterialButton, then how to optimize ？
Target Platform: android
Target OS version/browser: android 9
Devices: Redmi Note 5
D:\Users\yl4111>flutter doctor
Running "flutter pub get" in flutter_tools... 17.1s
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.2.3, on Microsoft Windows [Version 10.0.18362.30], locale zh-CN)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[√] Chrome - develop for the web
[√] Android Studio (version 4.1.0)
[√] Connected device (2 available)