【Flutter】なぜかCircleBorderのアンチエイリアスが効かないとき【iOS】

2024/09/13に公開

起きたこと

なぜか CircleBorder を当てたボタンにアンチエイリアスが効いていない状態になってしまっていました。シミュレータ上では全く問題なく描画されており、iOSの実機でのみ再現していました。

すごく...ジャギジャギです...

TextButton(
    clipBehavior: Clip.antiAlias,
    style: TextButton.styleFrom(
        shape: const CircleBorder(),

解決方法

原因は Opacity でした。

Opacity(
    child: TextButton(
        clipBehavior: Clip.antiAliasWithSaveLayer,
        style: TextButton.styleFrom(
              shape: const CircleBorder(),

Opacityをとり除くことで、元通り綺麗な円が描画されました。

参考

https://github.com/flutter/flutter/issues/110738

Discussion