iconAlignment property

@Deprecated('Remove this parameter as it is now ignored. ' 'Use ButtonStyle.iconAlignment instead. ' 'This feature was deprecated after v3.28.0-1.0.pre.') IconAlignment? iconAlignment

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

@Deprecated(
  'Remove this parameter as it is now ignored. '
  'Use ButtonStyle.iconAlignment instead. '
  'This feature was deprecated after v3.28.0-1.0.pre.',
)
final IconAlignment? iconAlignment;