FilledButton.icon constructor

FilledButton.icon({ Key? key, required VoidCallback? onPressed, VoidCallback? onLongPress, ValueChanged<bool>? onHover, ValueChanged<bool>? onFocusChange, ButtonStyle? style, FocusNode? focusNode, bool autofocus = false, Clip? clipBehavior = Clip.none, MaterialStatesController? statesController, Widget? icon, required Widget label, IconAlignment? iconAlignment, })

Create a filled button from icon and label.

The icon and label are arranged in a row with padding at the start and end and a gap between them.

If icon is null, this constructor will create a FilledButton that doesn't display an icon.

Determines the alignment of the icon within the widgets such as:

• ElevatedButton.icon,
• FilledButton.icon,
• FilledButton.tonalIcon.
• OutlinedButton.icon,
• TextButton.icon,

The effect of iconAlignment depends on TextDirection. If textDirection is TextDirection.ltr then IconAlignment.start and IconAlignment.end align the icon on the left or right respectively. If textDirection is TextDirection.rtl the the alignments are reversed.

Defaults to IconAlignment.start.

This sample demonstrates how to use iconAlignment to align the button icon to the start or the end of the button.

{@macro material_ui.dartpad_guide}

import 'package:material_ui/material_ui.dart';

/// Flutter code sample for the [IconAlignment] property on various Material
/// button widgets.

void main() {
  runApp(const IconAlignmentApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: Scaffold(body: IconAlignmentExample()));
  }
}

class IconAlignmentExample extends StatefulWidget {
  const IconAlignmentExample({super.key});

  @override
  State<IconAlignmentExample> createState() => _IconAlignmentExampleState();
}

class _IconAlignmentExampleState extends State<IconAlignmentExample> {
  TextDirection _textDirection = .ltr;
  IconAlignment _iconAlignment = .start;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Directionality(
        key: const Key('Directionality'),
        textDirection: _textDirection,
        child: Center(
          child: Column(
            mainAxisSize: .min,
            mainAxisAlignment: .center,
            children: <Widget>[
              const Spacer(),
              OverflowBar(
                spacing: 10,
                overflowSpacing: 20,
                alignment: .center,
                overflowAlignment: .center,
                children: <Widget>[
                  ElevatedButton.icon(
                    onPressed: () {},
                    icon: const Icon(Icons.sunny),
                    label: const Text('ElevatedButton'),
                    iconAlignment: _iconAlignment,
                  ),
                  FilledButton.icon(
                    onPressed: () {},
                    icon: const Icon(Icons.beach_access),
                    label: const Text('FilledButton'),
                    iconAlignment: _iconAlignment,
                  ),
                  FilledButton.tonalIcon(
                    onPressed: () {},
                    icon: const Icon(Icons.cloud),
                    label: const Text('FilledButton Tonal'),
                    iconAlignment: _iconAlignment,
                  ),
                  OutlinedButton.icon(
                    onPressed: () {},
                    icon: const Icon(Icons.light),
                    label: const Text('OutlinedButton'),
                    iconAlignment: _iconAlignment,
                  ),
                  TextButton.icon(
                    onPressed: () {},
                    icon: const Icon(Icons.flight_takeoff),
                    label: const Text('TextButton'),
                    iconAlignment: _iconAlignment,
                  ),
                ],
              ),
              const Spacer(),
              OverflowBar(
                alignment: .spaceEvenly,
                overflowAlignment: .center,
                spacing: 10,
                overflowSpacing: 10,
                children: <Widget>[
                  Column(
                    children: <Widget>[
                      const Text('Icon alignment'),
                      const SizedBox(height: 10),
                      SegmentedButton<IconAlignment>(
                        onSelectionChanged: (Set<IconAlignment> value) {
                          setState(() {
                            _iconAlignment = value.first;
                          });
                        },
                        selected: <IconAlignment>{_iconAlignment},
                        segments: IconAlignment.values.map((
                          IconAlignment iconAlignment,
                        ) {
                          return ButtonSegment<IconAlignment>(
                            value: iconAlignment,
                            label: Text(iconAlignment.name),
                          );
                        }).toList(),
                      ),
                    ],
                  ),
                  Column(
                    children: <Widget>[
                      const Text('Text direction'),
                      const SizedBox(height: 10),
                      SegmentedButton<TextDirection>(
                        onSelectionChanged: (Set<TextDirection> value) {
                          setState(() {
                            _textDirection = value.first;
                          });
                        },
                        selected: <TextDirection>{_textDirection},
                        segments: const <ButtonSegment<TextDirection>>[
                          ButtonSegment<TextDirection>(
                            value: TextDirection.ltr,
                            label: Text('LTR'),
                          ),
                          ButtonSegment<TextDirection>(
                            value: TextDirection.rtl,
                            label: Text('RTL'),
                          ),
                        ],
                      ),
                    ],
                  ),
                ],
              ),
              const Spacer(),
            ],
          ),
        ),
      ),
    );
  }
}

Implementation

FilledButton.icon({
  super.key,
  required super.onPressed,
  super.onLongPress,
  super.onHover,
  super.onFocusChange,
  super.style,
  super.focusNode,
  super.autofocus = false,
  super.clipBehavior = Clip.none,
  super.statesController,
  Widget? icon,
  required Widget label,
  IconAlignment? iconAlignment,
}) : _variant = _FilledButtonVariant.filled,
     _addPadding = icon != null,
     super(
       child: icon != null
           ? _FilledButtonWithIconChild(
               label: label,
               icon: icon,
               buttonStyle: style,
               iconAlignment: iconAlignment,
             )
           : label,
     );