[Flutter] ContainerのclipBehaviorの使い方

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

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',
            ),
          ),
        ],
      ),
    ),
  );
}
  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

コメントを残す

*

CAPTCHA