⚡

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

に公開
Flutter
iOS
tech

起きたこと

なぜか 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