Flutter elevationプロパティとは

ほとんどのWidgetに用意されているelevationプロパティですが、これはz軸方向への階層を表しています。

floatingActionButton: FloatingActionButton(
    elevation: 2,
    onPressed: _incrementCounter,
    tooltip: 'Increment',
    child: Icon(Icons.add),
    ),

「マテリアルデザインではz軸方向が存在し、パーツとパーツの物理的な重なり合いでデザインされる」
といった話はよく聞くと思いますが、elevationはそのz軸を示します。

例

わかりやすくするため、2つ並んだRaisedButtonがあるとします。elevationは指定していないので初期値です。

RaisedButton(
    child: Text("Button1"),
    onPressed: () {},
),
RaisedButton(
    child: Text("Button2"),
    onPressed: () {},
),

f:id:hisurga:20200726134154p:plain:w400

elevationを10にするとこうなります。

RaisedButton(
    elevation: 10,
    child: Text("Button1"),
    onPressed: () {},
),
RaisedButton(
    child: Text("Button2"),
    onPressed: () {},
),

f:id:hisurga:20200726134529p:plain:w400