Flutter: AppBar (shape: – )

AppBar ウィジェットの shape プロパティで設定できる項目

目次

• RoundedRectangleBorder – 角丸を指定
• BeveledRectangleBorder – 角のカットを指定
• CircleBorder – アプリバーの形状を円形にする
• ContinuousRectangleBorder – 角のなめらかなカーブを持つ長方形の形状を作成
• StadiumBorder – 両端が半円形のスタジアム型（楕円形の一種）の境界線
• OutlineInputBorder – 境界線をアウトラインで表示

RoundedRectangleBorder

角丸を指定。

AppBar(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.vertical(
      bottom: Radius.circular(30)
    )
  )
)

BeveledRectangleBorder

角のカットを指定。

AppBar(
  shape: BeveledRectangleBorder(
    borderRadius: BorderRadius.circular(10)
  )
)

CircleBorder

アプリバーの形状を円形にする。（一般的には使われない？）

ContinuousRectangleBorder

角のなめらかなカーブを持つ長方形の形状を作成。

AppBar(
  shape: ContinuousRectangleBorder(
    borderRadius: BorderRadius.only(
      bottomLeft: Radius.circular(80),
      bottomRight: Radius.circular(80)
    )
  )
)

StadiumBorder

両端が半円形のスタジアム型（楕円形の一種）の境界線。

AppBar(
  title: Text('Stadium Border AppBar'),
  shape: StadiumBorder(
    side: BorderSide(
      color: Colors.white,
      width: 2.0,
    )
  ),
)

OutlineInputBorder

境界線をアウトラインで表示。

AppBar(
  title: Text('Outline Input Border AppBar'),
  shape: OutlineInputBorder(
    borderRadius: BorderRadius.circular(10),
    borderSide: BorderSide(
      color: Colors.white,
      width: 2.0,
    )
  ),
)