styleFrom static method

ButtonStyle styleFrom({ Color? foregroundColor, Color? backgroundColor, Color? selectedForegroundColor, Color? selectedBackgroundColor, Color? disabledForegroundColor, Color? disabledBackgroundColor, Color? shadowColor, Color? surfaceTintColor, Color? iconColor, double? iconSize, Color? disabledIconColor, Color? overlayColor, double? elevation, TextStyle? textStyle, EdgeInsetsGeometry? padding, Size? minimumSize, Size? fixedSize, Size? maximumSize, BorderSide? side, OutlinedBorder? shape, MouseCursor? enabledMouseCursor, MouseCursor? disabledMouseCursor, VisualDensity? visualDensity, MaterialTapTargetSize? tapTargetSize, Duration? animationDuration, bool? enableFeedback, AlignmentGeometry? alignment, InteractiveInkFeatureFactory? splashFactory, })

A static convenience method that constructs a segmented button ButtonStyle given simple values.

The foregroundColor, selectedForegroundColor, and disabledForegroundColor colors are used to create a WidgetStateProperty ButtonStyle.foregroundColor, and a derived ButtonStyle.overlayColor if overlayColor isn't specified.

If overlayColor is specified and its value is Colors.transparent then the pressed/focused/hovered highlights are effectively defeated. Otherwise a WidgetStateProperty with the same opacities as the default is created.

The backgroundColor, selectedBackgroundColor and disabledBackgroundColor colors are used to create a WidgetStateProperty ButtonStyle.backgroundColor.

Similarly, the enabledMouseCursor and disabledMouseCursor parameters are used to construct ButtonStyle.mouseCursor.

The iconColor, disabledIconColor are used to construct ButtonStyle.iconColor and iconSize is used to construct ButtonStyle.iconSize.

All of the other parameters are either used directly or used to create a WidgetStateProperty with a single value for all states.

All parameters default to null. By default this method returns a ButtonStyle that doesn't override anything.

For example, to override the default text and icon colors for a SegmentedButton, as well as its overlay color, with all of the standard opacity adjustments for the pressed, focused, and hovered states, one could write:

import 'package:material_ui/material_ui.dart';

/// Flutter code sample for [SegmentedButton.styleFrom].

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(body: Center(child: SegmentedButtonExample())),
    );
  }
}

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

  @override
  State<SegmentedButtonExample> createState() => _SegmentedButtonExampleState();
}

enum Calendar { day, week, month, year }

class _SegmentedButtonExampleState extends State<SegmentedButtonExample> {
  Calendar calendarView = .week;

  @override
  Widget build(BuildContext context) {
    return SegmentedButton<Calendar>(
      style: SegmentedButton.styleFrom(
        backgroundColor: Colors.grey[200],
        foregroundColor: Colors.red,
        selectedForegroundColor: Colors.white,
        selectedBackgroundColor: Colors.green,
      ),
      segments: const <ButtonSegment<Calendar>>[
        ButtonSegment<Calendar>(
          value: Calendar.day,
          label: Text('Day'),
          icon: Icon(Icons.calendar_view_day),
        ),
        ButtonSegment<Calendar>(
          value: Calendar.week,
          label: Text('Week'),
          icon: Icon(Icons.calendar_view_week),
        ),
        ButtonSegment<Calendar>(
          value: Calendar.month,
          label: Text('Month'),
          icon: Icon(Icons.calendar_view_month),
        ),
        ButtonSegment<Calendar>(
          value: Calendar.year,
          label: Text('Year'),
          icon: Icon(Icons.calendar_today),
        ),
      ],
      selected: <Calendar>{calendarView},
      onSelectionChanged: (Set<Calendar> newSelection) {
        setState(() {
          // By default there is only a single segment that can be
          // selected at one time, so its value is always the first
          // item in the selected set.
          calendarView = newSelection.first;
        });
      },
    );
  }
}

SegmentedButton<int>(
  style: SegmentedButton.styleFrom(
    foregroundColor: Colors.black,
    selectedForegroundColor: Colors.white,
    backgroundColor: Colors.amber,
    selectedBackgroundColor: Colors.red,
  ),
  segments: const <ButtonSegment<int>>[
    ButtonSegment<int>(
      value: 0,
      label: Text('0'),
      icon: Icon(Icons.calendar_view_day),
    ),
    ButtonSegment<int>(
      value: 1,
      label: Text('1'),
      icon: Icon(Icons.calendar_view_week),
    ),
  ],
  selected: const <int>{0},
  onSelectionChanged: (Set<int> selection) {},
),

Implementation

// TODO(framework): Add unit tests to this code snippet.
// https://github.com/flutter/flutter/issues/188530
///
/// For example, to override the default text and icon colors for a
/// [SegmentedButton], as well as its overlay color, with all of the
/// standard opacity adjustments for the pressed, focused, and
/// hovered states, one could write:
///
/// {@example /example/lib/segmented_button/segmented_button.1.dart#body}
///
/// ```dart
/// SegmentedButton<int>(
///   style: SegmentedButton.styleFrom(
///     foregroundColor: Colors.black,
///     selectedForegroundColor: Colors.white,
///     backgroundColor: Colors.amber,
///     selectedBackgroundColor: Colors.red,
///   ),
///   segments: const <ButtonSegment<int>>[
///     ButtonSegment<int>(
///       value: 0,
///       label: Text('0'),
///       icon: Icon(Icons.calendar_view_day),
///     ),
///     ButtonSegment<int>(
///       value: 1,
///       label: Text('1'),
///       icon: Icon(Icons.calendar_view_week),
///     ),
///   ],
///   selected: const <int>{0},
///   onSelectionChanged: (Set<int> selection) {},
/// ),
/// ```
///
/// </callout-box>
static ButtonStyle styleFrom({
  Color? foregroundColor,
  Color? backgroundColor,
  Color? selectedForegroundColor,
  Color? selectedBackgroundColor,
  Color? disabledForegroundColor,
  Color? disabledBackgroundColor,
  Color? shadowColor,
  Color? surfaceTintColor,
  Color? iconColor,
  double? iconSize,
  Color? disabledIconColor,
  Color? overlayColor,
  double? elevation,
  TextStyle? textStyle,
  EdgeInsetsGeometry? padding,
  Size? minimumSize,
  Size? fixedSize,
  Size? maximumSize,
  BorderSide? side,
  OutlinedBorder? shape,
  MouseCursor? enabledMouseCursor,
  MouseCursor? disabledMouseCursor,
  VisualDensity? visualDensity,
  MaterialTapTargetSize? tapTargetSize,
  Duration? animationDuration,
  bool? enableFeedback,
  AlignmentGeometry? alignment,
  InteractiveInkFeatureFactory? splashFactory,
}) {
  final WidgetStateProperty<Color?>? overlayColorProp =
      (foregroundColor == null && selectedForegroundColor == null && overlayColor == null)
      ? null
      : switch (overlayColor) {
          (final Color overlayColor) when overlayColor.value == 0 =>
            const WidgetStatePropertyAll<Color?>(Colors.transparent),
          _ => _SegmentedButtonDefaultsM3.resolveStateColor(
            foregroundColor,
            selectedForegroundColor,
            overlayColor,
          ),
        };
  return TextButton.styleFrom(
    textStyle: textStyle,
    shadowColor: shadowColor,
    surfaceTintColor: surfaceTintColor,
    iconColor: iconColor,
    iconSize: iconSize,
    disabledIconColor: disabledIconColor,
    elevation: elevation,
    padding: padding,
    minimumSize: minimumSize,
    fixedSize: fixedSize,
    maximumSize: maximumSize,
    side: side,
    shape: shape,
    enabledMouseCursor: enabledMouseCursor,
    disabledMouseCursor: disabledMouseCursor,
    visualDensity: visualDensity,
    tapTargetSize: tapTargetSize,
    animationDuration: animationDuration,
    enableFeedback: enableFeedback,
    alignment: alignment,
    splashFactory: splashFactory,
  ).copyWith(
    foregroundColor: _defaultColor(
      foregroundColor,
      disabledForegroundColor,
      selectedForegroundColor,
    ),
    backgroundColor: _defaultColor(
      backgroundColor,
      disabledBackgroundColor,
      selectedBackgroundColor,
    ),
    overlayColor: overlayColorProp,
  );
}