| // 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; |
| }), |
| ), |
| ), |
| ], |
| ), |
| ); |
| } |
| } |