【Flutter/Dart】Buttonの種類と実装方法！ElevatedButtonやIconButtonの違い

ElevatedButton(
  onPressed: () {
    print('ElevatedButton pressed');
  },
  child: Text('Elevated Button'),
)

ElevatedButton(
  onPressed: () {},
  child: Row(
    children: [
      Icon(Icons.add),
      SizedBox(width: 8),
      Text('Add'),
    ],
  ),
)

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.orange, // 背景色
    foregroundColor: Colors.white,  // 文字色
    elevation: 5,                   // 影の濃さ
    padding: EdgeInsets.symmetric(  // 内側の余白
      horizontal: 20,
      vertical: 12,
    ), 
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12), // 角の丸み
    ),
  ),
  child: Text('Styled Button'),
)

ElevatedButton(
  onPressed: () {},
  onLongPress: () {
    print('Button long pressed');
  },
  child: Text('Long Press Me'),
)

FocusNode focusNode = FocusNode();

ElevatedButton(
  onPressed: () {},
  focusNode: focusNode,
  child: Text('Focusable Button'),
)

TextButton(
  onPressed: () {
    print('TextButton pressed');
  },
  child: Text('Text Button'),
)

OutlinedButton(
  onPressed: () {
    print('OutlinedButton pressed');
  },
  child: Text('Outlined Button'),
)

IconButton(
  onPressed: () {
    print('IconButton pressed');
  },
  icon: Icon(Icons.settings),
)

IconButton(
  onPressed: () {
    print('IconButton pressed');
  },
  iconSize: 48,
  icon: Icon(Icons.settings),
)

FloatingActionButton(
  onPressed: () {
    print('FloatingActionButton pressed');
  },
  child: Icon(Icons.add),
)

GestureDetector(
  onTap: () {
    print('GestureDetector tapped');
  },
  child: Container(
    padding: EdgeInsets.all(16),
    color: Colors.blue,
    child: Text('Custom GestureDetector Button', style: TextStyle(color: Colors.white)),
  ),
)

InkWell(
  onTap: () {
    print('InkWell tapped');
  },
  child: Container(
    padding: EdgeInsets.all(16),
    color: Colors.green,
    child: Text('Custom InkWell Button', style: TextStyle(color: Colors.white)),
  ),
)