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),
),
),以上です。
合わせて読みたい
あわせて読みたい
【Flutter】ElevatedButtonの使い方｜立体的なボタンを表示・装飾する
ElevatedButtonウィジェットの基本的な使い方について解説します。ElevatedButtonを使用することで影のある立体的なボタンを実装できます。またElevatedButton.styleFromウィジェットを使えばボタンの背景色や形、影の高さなど様々な装飾ができます。
あわせて読みたい
【Flutter】OutlinedButtonの使い方｜立体ボタンを実装
Flutterのウィジェット「OutlinedButton」の使い方を紹介します。 「OutlinedButton」ではマテリアルデザインによる立体的なボタンを実装できます。 【OutlinedButtonの…
あわせて読みたい
【Flutter】IconButtonの使い方｜アイコン型ボタンを実装
Flutterのウィジェット「IconButton」の使い方を紹介します。 「IconButton」ではアイコン型ボタンを実装できます。 【IconButtonの使い方】 「IconButton」の「icon」…