Flickering when adding a fully transparent spinner to a grid view #120455
Description
Forked from #100522 (comment)
The flickering looks a little different from the rest of that bug, and reproduces on both Android and iOS (although it is not entirely consistently reproduced on either). It seems to be raster cache related - @jason-simmons says disabling the raster cache made it go away on his Pixel 3. I reproduced it on an iPhone 11 and am still building an engine to see if it reproduces without the raster cache there. /cc @flar who might know what's up with that.
Sample app:
import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp(home: TestScreen()));
}
class TestScreen extends StatefulWidget {
const TestScreen({Key? key}) : super(key: key);
@override
_TestScreenState createState() => _TestScreenState();
}
class _TestScreenState extends State<TestScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.black,
child: Stack(
children: [
Padding(
padding: const EdgeInsets.only(top: 200),
child: Stack(
children: [_grid()],
),
),
const Opacity(
opacity: 0,
child: CircularProgressIndicator(strokeWidth: 5, color: Colors.blue),
),
],
),
),
);
}
Widget _grid() {
return Align(
alignment: Alignment.topCenter,
child: Container(
color: Colors.grey[200],
child: GridView.count(
crossAxisCount: 3,
padding: const EdgeInsets.all(8),
childAspectRatio: 1.2,
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
children: _gridChildren(),
),
),
);
}
List<Widget> _gridChildren() {
List<Widget> list = [];
for (int i = 1; i <= 12; i++) {
list.add(
Opacity(
opacity: 0.3,
child: Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: const Color(0xff002255).withOpacity(0.20),
blurRadius: 12,
spreadRadius: -1,
offset: const Offset(0, 3),
)
],
),
child: Center(
child: Text(i.toString()),
),
),
),
);
}
return list;
}
}
Video: