世界最大級のオンライン学習サービス「Udemy(ユーデミー)」とは?

【Flutter】IconButtonの使い方|アイコン型ボタンを実装

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

「IconButton」ではアイコン型ボタンを実装できます。

目次

IconButtonの使い方

「IconButton」の「icon」で表示するアイコン、「onPressed」でボタンが押されたときの処理を指定します。

アイコンのサイズは「iconSize」で指定できます。

IconButton(
  icon: Icon(Icons.favorite),
  iconSize: 70,
  onPressed: () {},
),

アイコンの色を変更

アイコンの色は「color」で指定できます。

IconButton(
  icon: Icon(Icons.favorite),
  iconSize: 70,
  color: Colors.pink,
  onPressed: () {},
),

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter')),
        body: Center(
          child: IconButton(
            icon: Icon(Icons.favorite),
            iconSize: 70,
            color: Colors.pink,
            onPressed: () {},
          ),
        ),
      ),
    );
  }

以上です。

合わせて読みたい

参考サイト

目次