Container

2022.10.16

[Flutter] ContainerのclipBehaviorの使い方

clipbehaviorの使い所を紹介します。

どういう時に使うのか？

子ウィジェットに対して画像を丸くしたい場合があると思います。
flutterはContainerでdecorationでwidgetの形を丸く設定してもデフォルトの状態では子ウィジェットの画像は丸くなりません。
そこで登場するのがclipBehaviorです。
clipBehaviorは切り抜きを明示的にする役割を持っています。
以下に使い方を示します。

イメージ

ソースコード

Container(
  alignment: Alignment.center,
  decoration: const BoxDecoration(
    shape: BoxShape.circle,
  ),
  clipBehavior: Clip.antiAlias,
  child: Image.network(
    'https://picsum.photos/id/237/300/300',
  ),
),

Clipクラス

hardEdge	鮮明度は荒いが描画が高速
antiAlias	鮮明度はhardEdgeより良いが描画がhardEdgeより遅い
antiAliasWithSaveLayer	鮮明度antiAliasより良いが描画がantiAliasより遅い

参考サイト
Clipping in Flutter

使用例

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
            alignment: Alignment.center,
            decoration: const BoxDecoration(
              shape: BoxShape.circle,
            ),
            clipBehavior: Clip.antiAlias,
            child: Image.network(
              'https://picsum.photos/id/237/300/300',
            ),
          ),
        ],
      ),
    ),
  );
}

12 3