點燈坊

失くすものさえない今が強くなるチャンスよ

IconButton 實現只有 Icon 的 Button

Sam Xiao's Avatar 2024-10-24

IconButton 可實現只有 Icon 的 Button。

Version

Flutter 3.24

Flutter

overview01

  • Android 與 iOS 都成功使用 IconButton 實現只有 icon 的 button

IconButton

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    var appBar = AppBar(title: const Text('IconButton'));

    var iconButton = IconButton(
      icon: const Icon(Icons.thumb_up),
      color: Colors.blue,
      iconSize: 50.0,
      onPressed: () {
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text('Liked!')),
        );
      },
    );

    var body = Center(
      child: iconButton,
    );

    return Scaffold(
      appBar: appBar,
      body: body,
    );
  }
}

Line 10

var iconButton = IconButton(
  icon: const Icon(Icons.thumb_up),
  color: Colors.blue,
  iconSize: 50.0,
  onPressed: () {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('Liked!')),
    );
  },
);
  • icon：設定所顯示 icon
  • color：設定 icon 顏色
  • iconSize：設定 icon 大小
  • onPressed()：當 iconButton 會被觸發

Conclusion

  • IconButton 的 icon 也可透過 Image.asset() 指定自己的 png

# Flutter