// Copyright 2014 The Flutter Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. // Flutter code sample for IconButton import 'package:flutter/material.dart'; void main() { runApp(const IconButtonApp()); } class IconButtonApp extends StatelessWidget { const IconButtonApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData(colorSchemeSeed: const Color(0xff6750a4), useMaterial3: true), title: 'Icon Button Types', home: const Scaffold( body: ButtonTypesExample(), ), ); } } class ButtonTypesExample extends StatelessWidget { const ButtonTypesExample({super.key}); @override Widget build(BuildContext context) { return Padding( padding: const EdgeInsets.all(4.0), child: Row( children: const <Widget>[ Spacer(), ButtonTypesGroup(enabled: true), ButtonTypesGroup(enabled: false), Spacer(), ], ), ); } } class ButtonTypesGroup extends StatelessWidget { const ButtonTypesGroup({ super.key, required this.enabled }); final bool enabled; @override Widget build(BuildContext context) { final VoidCallback? onPressed = enabled ? () {} : null; final ColorScheme colors = Theme.of(context).colorScheme; return Padding( padding: const EdgeInsets.all(4.0), child: Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[ IconButton(icon: const Icon(Icons.filter_drama), onPressed: onPressed), // Use a standard IconButton with specific style to implement the // 'Filled' type. IconButton( icon: const Icon(Icons.filter_drama), onPressed: onPressed, style: IconButton.styleFrom( foregroundColor: colors.onPrimary, backgroundColor: colors.primary, disabledBackgroundColor: colors.onSurface.withOpacity(0.12), hoverColor: colors.onPrimary.withOpacity(0.08), focusColor: colors.onPrimary.withOpacity(0.12), highlightColor: colors.onPrimary.withOpacity(0.12), ) ), // Use a standard IconButton with specific style to implement the // 'Filled Tonal' type. IconButton( icon: const Icon(Icons.filter_drama), onPressed: onPressed, style: IconButton.styleFrom( foregroundColor: colors.onSecondaryContainer, backgroundColor: colors.secondaryContainer, disabledBackgroundColor: colors.onSurface.withOpacity(0.12), hoverColor: colors.onSecondaryContainer.withOpacity(0.08), focusColor: colors.onSecondaryContainer.withOpacity(0.12), highlightColor: colors.onSecondaryContainer.withOpacity(0.12), ), ), // Use a standard IconButton with specific style to implement the // 'Outlined' type. IconButton( icon: const Icon(Icons.filter_drama), onPressed: onPressed, style: IconButton.styleFrom( focusColor: colors.onSurfaceVariant.withOpacity(0.12), highlightColor: colors.onSurface.withOpacity(0.12), side: onPressed == null ? BorderSide(color: Theme.of(context).colorScheme.onSurface.withOpacity(0.12)) : BorderSide(color: colors.outline), ).copyWith( foregroundColor: MaterialStateProperty.resolveWith((Set<MaterialState> states) { if (states.contains(MaterialState.pressed)) { return colors.onSurface; } return null; }), ), ), ], ), ); } }