GestureDetector 實現 IconButton | 點燈坊

IconButton 自帶 Margin，如想以一排 IconButton 實現 ToolBar 時，會發現 IconButton 自帶的 Margin 很不方便，此時可使用 GestureDetector 實現 IconButton。

Version

Flutter 3.24

Flutter

• Android 與 iOS 都成功使用 GestureDetector 實現 IconButton

GestureDetector

import 'package:flutter/material.dart';

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

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

    var iconButton = GestureDetector(
      child: const Icon(
        Icons.thumb_up,
        size: 50,
        color: Colors.blue,
      ),
      onTap: () => ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(
          content: Text('Liked!'),
        ),
      ),
    );

    var body = Center(
      child: iconButton,
    );

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

Line 10

var iconButton = GestureDetector(
  child: const Icon(
    Icons.thumb_up,
    size: 50,
    color: Colors.blue,
  ),
  onTap: () => ScaffoldMessenger.of(context).showSnackBar(
    const SnackBar(
      content: Text('Liked!'),
    ),
  ),
);

• GestureDetector：包裹整個 Icon，當 Icon 被點擊時會觸發 onTap()

  • Icon：使用 icon

    • size：設定 icon 大小
    • color：設定 icon 顏色

  • onTap()：點擊 icon 所觸發 event

Conclusion

• 使用 GestureDetector + Icon 所模擬的行為與 IconButton 完全一樣，尤其沒有 margin 更方便 layout