【Flutter】Materialの使い方｜マテリアルウィジェットを装飾する

2023年2月24日

Flutterのウィジェット「Material」の使い方を紹介します。

「Material」ではマテリアルウィジェットの色や形など指定できます。

Materialの使い方

「Material」は色や形など指定したいウィジェットをラップして使用します。

今回は下記コードのように「ListTile」を「Material」を使って装飾していきます。

Material(
  child: ListTile(
    leading: FlutterLogo(),
    title: Text('Hello World'),
    trailing: Icon(Icons.more_vert),
  ),
),

影をつける

影をつけて立体的にするには「elevation」を使用します。

Material(
  elevation: 5,
  child: ListTile(
    leading: FlutterLogo(),
    title: Text('Hello World'),
    trailing: Icon(Icons.more_vert),
  ),
),

影の色を変更する

影の色は「shadowColor」で指定できます。

Material(
  elevation: 5,
  shadowColor: Colors.deepOrange,
  child: ListTile(
    leading: FlutterLogo(),
    title: Text('Hello World'),
    trailing: Icon(Icons.more_vert),
  ),
),

色を変更する

ウィジェットの色を変更するには「color」を使用します。

Material(
  color: Colors.yellow,
  child: ListTile(
    leading: FlutterLogo(),
    title: Text('Hello World'),
    trailing: Icon(Icons.more_vert),
  ),
),

角丸にする

角丸にするには「borderRadius」に「BorderRadius.circular」を渡します。

Material(
  elevation: 5,
  borderRadius: BorderRadius.circular(30),
  child: ListTile(
    leading: FlutterLogo(),
    title: Text('Hello World'),
    trailing: Icon(Icons.more_vert),
  ),
),

以上です。

合わせて読みたい

参考サイト

https://api.flutter.dev/flutter/material/Material-class.html