Flutterのマテリアルボタン（ElevatedButton, OutlinedButton, TextButton）でテキストとアイコンを表示する方法を紹介します。
今回は「ElevatedButton」を使用してアイコンを表示していきます。
目次
ボタン左にアイコンを表示する方法
ボタン左にアイコンをつけるには「ElevatedButton.icon」コンストラクタを使用します。
「icon」に表示したいIconクラス、labelにアイコン横に表示したいウィジェットを渡します。
ElevatedButton.icon(
icon: Icon(Icons.settings),
label: Text('Settings'),
onPressed: () {},
),サンプルコード
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool isLiked = false;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Flutter')),
body: Center(
child: ElevatedButton.icon(
icon: Icon(Icons.settings),
label: Text('Settings'),
onPressed: () {},
),
),
),
);
}
}以上です。
合わせて読みたい
あわせて読みたい
【Flutter】IconButtonの使い方｜アイコン型ボタンを実装
Flutterのウィジェット「IconButton」の使い方を紹介します。 「IconButton」ではアイコン型ボタンを実装できます。 【IconButtonの使い方】 「IconButton」の「icon」…
あわせて読みたい
【Flutter】Iconの使い方｜アイコンを表示・装飾する
Iconウィジェットの基本的な使い方について解説します。Iconを使用することでGoogle Fontsで提供されているマテリアルアイコンをFlutterアプリで表示できます。またアイコンを左右反転させて表示したりなどできます。