Fix `SegmentedButton` border doesn't respect hovered, focused, selected states by TahaTesser · Pull Request #161942 · flutter/flutter

TahaTesser · 2025-01-21T13:26:25Z

Fixes SegmentedButton does not set its MaterialState for side

Code Sample

expand to view the code sample

import 'package:flutter/material.dart';

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

enum Calendar { day, week, month, year }

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

  @override
  State<SegmentedButtonApp> createState() => _SegmentedButtonAppState();
}

class _SegmentedButtonAppState extends State<SegmentedButtonApp> {
  Calendar calendarView = Calendar.day;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        segmentedButtonTheme: SegmentedButtonThemeData(
          style: ButtonStyle(
            side: WidgetStateProperty.resolveWith(
              (Set<WidgetState> states) {
                if (states.contains(WidgetState.disabled)) {
                  return const BorderSide(color: Colors.grey, width: 2);
                }
                if (states.contains(WidgetState.hovered)) {
                  return const BorderSide(color: Colors.green, width: 2);
                }
                if (states.contains(WidgetState.focused)) {
                  return const BorderSide(color: Colors.pinkAccent, width: 2);
                }
                // if (states.contains(WidgetState.selected)) {
                //   return const BorderSide(color: Colors.brown, width: 2);
                // }

                return const BorderSide(color: Colors.amber, width: 2);
              },
            ),
          ),
        ),
      ),
      home: Scaffold(
        body: Center(
          child: Column(
            spacing: 20,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              SegmentedButton<Calendar>(
                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},
              ),
              SegmentedButton<Calendar>(
                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(() {
                    calendarView = newSelection.first;
                  });
                },
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

Before

Screen.Recording.2025-01-21.at.15.23.24.mov

After

Screen.Recording.2025-01-21.at.15.22.33.mov

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I signed the CLA.
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making, or this PR is test-exempt.
I followed the breaking change policy and added Data Driven Fixes where supported.
All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

QuncCccccc

Based on the specs, it seems if a segment is disabled, we should be able to show the disabled state on border of the specific segment (not the whole SegmentedButton). So It's not clear what expected behavior would be when a specific segment is hovered, focused and pressed. Let me double check with the material team.

QuncCccccc · 2025-02-05T06:39:56Z

Filed a bug and asked for clarification: b/394478041

QuncCccccc

I haven't heard about the update from the material team, but I do see there's a token to indicate the outline of the whole segmented button, so I think this feature makes sense:)

Sorry for the late response. Trying my best to speed up! I'll make sure we make some progress this week!

QuncCccccc

LGTM! Thanks so much for your patience.

TahaTesser · 2025-03-12T11:01:05Z

@victorsanni Could you please approve? :)

victorsanni

LGTM

auto-submit · 2025-03-12T17:12:11Z

autosubmit label was removed for flutter/flutter/161942, because - The status or check suite Google testing has failed. Please fix the issues identified (or deflake) before re-applying this label.

victorsanni · 2025-03-12T17:43:32Z

I was looking at the google testing failures, they are all image diffs. Seems like the disabled segmented button is now black instead of gray. I wasn't following the earlier conversation, but is that intended?

QuncCccccc · 2025-03-12T17:49:35Z

I'll look at the internal use case to see how they use the segmented buttons. I think we handle the disabled state correctly here🤔

dkwingsmt · 2025-04-02T18:26:28Z

@QuncCccccc How's the investigation going? (from triage)

QuncCccccc · 2025-04-09T04:06:43Z

+  bool _focused = false;
+  bool get _selected => widget.selected.isNotEmpty;
+
+  Set<WidgetState> get _states => <WidgetState>{


When we disable one of the segments by setting ButtonSegment.enabled to false, _states cannot really add WidgetState.disabled to the set, so the disabledBorder in line 628 is actually not the real disabled border and then incorrect side is applied to the disabled segment. This causes the google testing failures.

QuncCccccc · 2025-04-09T04:15:48Z

+    final BorderSide effectiveSide =
+        resolve<BorderSide?>((ButtonStyle? style) => style?.side) ?? BorderSide.none;
+    final OutlinedBorder enabledBorder = effectiveBorder.copyWith(side: effectiveSide);
+    final OutlinedBorder disabledBorder = effectiveBorder.copyWith(side: effectiveSide);


Following my explanation above, this disabledBorder will never get the disabled value if a segment is disabled by setting ButtonSegment.enabled (like the screenshot below). So we might still need to use the original implementation to handle the disabled state.

dkwingsmt · 2025-05-21T18:02:51Z

Gentle ping @TahaTesser

@TahaTesser

## Description This PR fixes `SegmentedButton` border side not depending on the current state. It's based on one @TahaTesser 's great PR: see #161942. 🙏 I updated some logic related to disabled border which led to Taha’s PR failing internal Google tests. I also added a test to verify the disabled border. <details><summary>Code sample for screenshots</summary> ```dart import 'package:flutter/material.dart'; void main() { runApp(const SegmentedButtonApp()); } enum Calendar { day, week, month, year } class SegmentedButtonApp extends StatefulWidget { const SegmentedButtonApp({super.key}); @OverRide State<SegmentedButtonApp> createState() => _SegmentedButtonAppState(); } class _SegmentedButtonAppState extends State<SegmentedButtonApp> { Calendar? calendarView; @OverRide Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( segmentedButtonTheme: SegmentedButtonThemeData( style: ButtonStyle( side: WidgetStateProperty.fromMap(<WidgetStatesConstraint, BorderSide?>{ WidgetState.disabled: const BorderSide(color: Colors.grey, width: 2), WidgetState.selected & WidgetState.hovered: const BorderSide( color: Colors.blue, width: 2, ), WidgetState.selected & WidgetState.focused: const BorderSide( color: Colors.pinkAccent, width: 2, ), WidgetState.hovered: const BorderSide(color: Colors.green, width: 2), WidgetState.focused: const BorderSide(color: Colors.purple, width: 2), WidgetState.any: const BorderSide(color: Colors.amber, width: 2), }), ), ), ), home: Scaffold( body: Center( child: SegmentedButton<Calendar>( segments: const <ButtonSegment<Calendar>>[ ButtonSegment<Calendar>( value: Calendar.day, label: Text('Day'), icon: Icon(Icons.calendar_view_day), enabled: false, ), 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}, emptySelectionAllowed: true, onSelectionChanged: (Set<Calendar> newSelection) { setState(() { calendarView = newSelection.isEmpty ? null : newSelection.first; }); }, ), ), floatingActionButton: FloatingActionButton(onPressed: () {}, child: const Icon(Icons.add)), ), ); } } ``` </details> # Before https://github.com/user-attachments/assets/1581f431-f87a-4af3-8ef6-f1f0d170e54a # After https://github.com/user-attachments/assets/156a8a64-3d9f-4323-9a1d-60624f5ac5d4 ## Related Issue Fixes [SegmentedButton does not set its MaterialState for side ](#159884) ## Tests Adds 2 tests.

@TahaTesser

## Description This PR fixes `SegmentedButton` border side not depending on the current state. It's based on one @TahaTesser 's great PR: see flutter#161942. 🙏 I updated some logic related to disabled border which led to Taha’s PR failing internal Google tests. I also added a test to verify the disabled border. <details><summary>Code sample for screenshots</summary> ```dart import 'package:flutter/material.dart'; void main() { runApp(const SegmentedButtonApp()); } enum Calendar { day, week, month, year } class SegmentedButtonApp extends StatefulWidget { const SegmentedButtonApp({super.key}); @OverRide State<SegmentedButtonApp> createState() => _SegmentedButtonAppState(); } class _SegmentedButtonAppState extends State<SegmentedButtonApp> { Calendar? calendarView; @OverRide Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( segmentedButtonTheme: SegmentedButtonThemeData( style: ButtonStyle( side: WidgetStateProperty.fromMap(<WidgetStatesConstraint, BorderSide?>{ WidgetState.disabled: const BorderSide(color: Colors.grey, width: 2), WidgetState.selected & WidgetState.hovered: const BorderSide( color: Colors.blue, width: 2, ), WidgetState.selected & WidgetState.focused: const BorderSide( color: Colors.pinkAccent, width: 2, ), WidgetState.hovered: const BorderSide(color: Colors.green, width: 2), WidgetState.focused: const BorderSide(color: Colors.purple, width: 2), WidgetState.any: const BorderSide(color: Colors.amber, width: 2), }), ), ), ), home: Scaffold( body: Center( child: SegmentedButton<Calendar>( segments: const <ButtonSegment<Calendar>>[ ButtonSegment<Calendar>( value: Calendar.day, label: Text('Day'), icon: Icon(Icons.calendar_view_day), enabled: false, ), 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}, emptySelectionAllowed: true, onSelectionChanged: (Set<Calendar> newSelection) { setState(() { calendarView = newSelection.isEmpty ? null : newSelection.first; }); }, ), ), floatingActionButton: FloatingActionButton(onPressed: () {}, child: const Icon(Icons.add)), ), ); } } ``` </details> # Before https://github.com/user-attachments/assets/1581f431-f87a-4af3-8ef6-f1f0d170e54a # After https://github.com/user-attachments/assets/156a8a64-3d9f-4323-9a1d-60624f5ac5d4 ## Related Issue Fixes [SegmentedButton does not set its MaterialState for side ](flutter#159884) ## Tests Adds 2 tests.

@TahaTesser

## Description This PR fixes `SegmentedButton` border side not depending on the current state. It's based on one @TahaTesser 's great PR: see flutter#161942. 🙏 I updated some logic related to disabled border which led to Taha’s PR failing internal Google tests. I also added a test to verify the disabled border. <details><summary>Code sample for screenshots</summary> ```dart import 'package:flutter/material.dart'; void main() { runApp(const SegmentedButtonApp()); } enum Calendar { day, week, month, year } class SegmentedButtonApp extends StatefulWidget { const SegmentedButtonApp({super.key}); @OverRide State<SegmentedButtonApp> createState() => _SegmentedButtonAppState(); } class _SegmentedButtonAppState extends State<SegmentedButtonApp> { Calendar? calendarView; @OverRide Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( segmentedButtonTheme: SegmentedButtonThemeData( style: ButtonStyle( side: WidgetStateProperty.fromMap(<WidgetStatesConstraint, BorderSide?>{ WidgetState.disabled: const BorderSide(color: Colors.grey, width: 2), WidgetState.selected & WidgetState.hovered: const BorderSide( color: Colors.blue, width: 2, ), WidgetState.selected & WidgetState.focused: const BorderSide( color: Colors.pinkAccent, width: 2, ), WidgetState.hovered: const BorderSide(color: Colors.green, width: 2), WidgetState.focused: const BorderSide(color: Colors.purple, width: 2), WidgetState.any: const BorderSide(color: Colors.amber, width: 2), }), ), ), ), home: Scaffold( body: Center( child: SegmentedButton<Calendar>( segments: const <ButtonSegment<Calendar>>[ ButtonSegment<Calendar>( value: Calendar.day, label: Text('Day'), icon: Icon(Icons.calendar_view_day), enabled: false, ), 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}, emptySelectionAllowed: true, onSelectionChanged: (Set<Calendar> newSelection) { setState(() { calendarView = newSelection.isEmpty ? null : newSelection.first; }); }, ), ), floatingActionButton: FloatingActionButton(onPressed: () {}, child: const Icon(Icons.add)), ), ); } } ``` </details> # Before https://github.com/user-attachments/assets/1581f431-f87a-4af3-8ef6-f1f0d170e54a # After https://github.com/user-attachments/assets/156a8a64-3d9f-4323-9a1d-60624f5ac5d4 ## Related Issue Fixes [SegmentedButton does not set its MaterialState for side ](flutter#159884) ## Tests Adds 2 tests.

@TahaTesser

## Description This PR fixes `SegmentedButton` border side not depending on the current state. It's based on one @TahaTesser 's great PR: see flutter#161942. 🙏 I updated some logic related to disabled border which led to Taha’s PR failing internal Google tests. I also added a test to verify the disabled border. <details><summary>Code sample for screenshots</summary> ```dart import 'package:flutter/material.dart'; void main() { runApp(const SegmentedButtonApp()); } enum Calendar { day, week, month, year } class SegmentedButtonApp extends StatefulWidget { const SegmentedButtonApp({super.key}); @OverRide State<SegmentedButtonApp> createState() => _SegmentedButtonAppState(); } class _SegmentedButtonAppState extends State<SegmentedButtonApp> { Calendar? calendarView; @OverRide Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( segmentedButtonTheme: SegmentedButtonThemeData( style: ButtonStyle( side: WidgetStateProperty.fromMap(<WidgetStatesConstraint, BorderSide?>{ WidgetState.disabled: const BorderSide(color: Colors.grey, width: 2), WidgetState.selected & WidgetState.hovered: const BorderSide( color: Colors.blue, width: 2, ), WidgetState.selected & WidgetState.focused: const BorderSide( color: Colors.pinkAccent, width: 2, ), WidgetState.hovered: const BorderSide(color: Colors.green, width: 2), WidgetState.focused: const BorderSide(color: Colors.purple, width: 2), WidgetState.any: const BorderSide(color: Colors.amber, width: 2), }), ), ), ), home: Scaffold( body: Center( child: SegmentedButton<Calendar>( segments: const <ButtonSegment<Calendar>>[ ButtonSegment<Calendar>( value: Calendar.day, label: Text('Day'), icon: Icon(Icons.calendar_view_day), enabled: false, ), 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}, emptySelectionAllowed: true, onSelectionChanged: (Set<Calendar> newSelection) { setState(() { calendarView = newSelection.isEmpty ? null : newSelection.first; }); }, ), ), floatingActionButton: FloatingActionButton(onPressed: () {}, child: const Icon(Icons.add)), ), ); } } ``` </details> # Before https://github.com/user-attachments/assets/1581f431-f87a-4af3-8ef6-f1f0d170e54a # After https://github.com/user-attachments/assets/156a8a64-3d9f-4323-9a1d-60624f5ac5d4 ## Related Issue Fixes [SegmentedButton does not set its MaterialState for side ](flutter#159884) ## Tests Adds 2 tests.

@TahaTesser

## Description This PR fixes `SegmentedButton` border side not depending on the current state. It's based on one @TahaTesser 's great PR: see flutter#161942. 🙏 I updated some logic related to disabled border which led to Taha’s PR failing internal Google tests. I also added a test to verify the disabled border. <details><summary>Code sample for screenshots</summary> ```dart import 'package:flutter/material.dart'; void main() { runApp(const SegmentedButtonApp()); } enum Calendar { day, week, month, year } class SegmentedButtonApp extends StatefulWidget { const SegmentedButtonApp({super.key}); @OverRide State<SegmentedButtonApp> createState() => _SegmentedButtonAppState(); } class _SegmentedButtonAppState extends State<SegmentedButtonApp> { Calendar? calendarView; @OverRide Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( segmentedButtonTheme: SegmentedButtonThemeData( style: ButtonStyle( side: WidgetStateProperty.fromMap(<WidgetStatesConstraint, BorderSide?>{ WidgetState.disabled: const BorderSide(color: Colors.grey, width: 2), WidgetState.selected & WidgetState.hovered: const BorderSide( color: Colors.blue, width: 2, ), WidgetState.selected & WidgetState.focused: const BorderSide( color: Colors.pinkAccent, width: 2, ), WidgetState.hovered: const BorderSide(color: Colors.green, width: 2), WidgetState.focused: const BorderSide(color: Colors.purple, width: 2), WidgetState.any: const BorderSide(color: Colors.amber, width: 2), }), ), ), ), home: Scaffold( body: Center( child: SegmentedButton<Calendar>( segments: const <ButtonSegment<Calendar>>[ ButtonSegment<Calendar>( value: Calendar.day, label: Text('Day'), icon: Icon(Icons.calendar_view_day), enabled: false, ), 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}, emptySelectionAllowed: true, onSelectionChanged: (Set<Calendar> newSelection) { setState(() { calendarView = newSelection.isEmpty ? null : newSelection.first; }); }, ), ), floatingActionButton: FloatingActionButton(onPressed: () {}, child: const Icon(Icons.add)), ), ); } } ``` </details> # Before https://github.com/user-attachments/assets/1581f431-f87a-4af3-8ef6-f1f0d170e54a # After https://github.com/user-attachments/assets/156a8a64-3d9f-4323-9a1d-60624f5ac5d4 ## Related Issue Fixes [SegmentedButton does not set its MaterialState for side ](flutter#159884) ## Tests Adds 2 tests.

@TahaTesser

## Description This PR fixes `SegmentedButton` border side not depending on the current state. It's based on one @TahaTesser 's great PR: see flutter/flutter#161942. 🙏 I updated some logic related to disabled border which led to Taha’s PR failing internal Google tests. I also added a test to verify the disabled border. <details><summary>Code sample for screenshots</summary> ```dart import 'package:flutter/material.dart'; void main() { runApp(const SegmentedButtonApp()); } enum Calendar { day, week, month, year } class SegmentedButtonApp extends StatefulWidget { const SegmentedButtonApp({super.key}); @OverRide State<SegmentedButtonApp> createState() => _SegmentedButtonAppState(); } class _SegmentedButtonAppState extends State<SegmentedButtonApp> { Calendar? calendarView; @OverRide Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( segmentedButtonTheme: SegmentedButtonThemeData( style: ButtonStyle( side: WidgetStateProperty.fromMap(<WidgetStatesConstraint, BorderSide?>{ WidgetState.disabled: const BorderSide(color: Colors.grey, width: 2), WidgetState.selected & WidgetState.hovered: const BorderSide( color: Colors.blue, width: 2, ), WidgetState.selected & WidgetState.focused: const BorderSide( color: Colors.pinkAccent, width: 2, ), WidgetState.hovered: const BorderSide(color: Colors.green, width: 2), WidgetState.focused: const BorderSide(color: Colors.purple, width: 2), WidgetState.any: const BorderSide(color: Colors.amber, width: 2), }), ), ), ), home: Scaffold( body: Center( child: SegmentedButton<Calendar>( segments: const <ButtonSegment<Calendar>>[ ButtonSegment<Calendar>( value: Calendar.day, label: Text('Day'), icon: Icon(Icons.calendar_view_day), enabled: false, ), 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}, emptySelectionAllowed: true, onSelectionChanged: (Set<Calendar> newSelection) { setState(() { calendarView = newSelection.isEmpty ? null : newSelection.first; }); }, ), ), floatingActionButton: FloatingActionButton(onPressed: () {}, child: const Icon(Icons.add)), ), ); } } ``` </details> # Before https://github.com/user-attachments/assets/1581f431-f87a-4af3-8ef6-f1f0d170e54a # After https://github.com/user-attachments/assets/156a8a64-3d9f-4323-9a1d-60624f5ac5d4 ## Related Issue Fixes [SegmentedButton does not set its MaterialState for side ](flutter/flutter#159884) ## Tests Adds 2 tests.

@TahaTesser

## Description This PR fixes `SegmentedButton` border side not depending on the current state. It's based on one @TahaTesser 's great PR: see flutter/flutter#161942. 🙏 I updated some logic related to disabled border which led to Taha’s PR failing internal Google tests. I also added a test to verify the disabled border. <details><summary>Code sample for screenshots</summary> ```dart import 'package:flutter/material.dart'; void main() { runApp(const SegmentedButtonApp()); } enum Calendar { day, week, month, year } class SegmentedButtonApp extends StatefulWidget { const SegmentedButtonApp({super.key}); @OverRide State<SegmentedButtonApp> createState() => _SegmentedButtonAppState(); } class _SegmentedButtonAppState extends State<SegmentedButtonApp> { Calendar? calendarView; @OverRide Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( segmentedButtonTheme: SegmentedButtonThemeData( style: ButtonStyle( side: WidgetStateProperty.fromMap(<WidgetStatesConstraint, BorderSide?>{ WidgetState.disabled: const BorderSide(color: Colors.grey, width: 2), WidgetState.selected & WidgetState.hovered: const BorderSide( color: Colors.blue, width: 2, ), WidgetState.selected & WidgetState.focused: const BorderSide( color: Colors.pinkAccent, width: 2, ), WidgetState.hovered: const BorderSide(color: Colors.green, width: 2), WidgetState.focused: const BorderSide(color: Colors.purple, width: 2), WidgetState.any: const BorderSide(color: Colors.amber, width: 2), }), ), ), ), home: Scaffold( body: Center( child: SegmentedButton<Calendar>( segments: const <ButtonSegment<Calendar>>[ ButtonSegment<Calendar>( value: Calendar.day, label: Text('Day'), icon: Icon(Icons.calendar_view_day), enabled: false, ), 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}, emptySelectionAllowed: true, onSelectionChanged: (Set<Calendar> newSelection) { setState(() { calendarView = newSelection.isEmpty ? null : newSelection.first; }); }, ), ), floatingActionButton: FloatingActionButton(onPressed: () {}, child: const Icon(Icons.add)), ), ); } } ``` </details> # Before https://github.com/user-attachments/assets/1581f431-f87a-4af3-8ef6-f1f0d170e54a # After https://github.com/user-attachments/assets/156a8a64-3d9f-4323-9a1d-60624f5ac5d4 ## Related Issue Fixes [SegmentedButton does not set its MaterialState for side ](flutter/flutter#159884) ## Tests Adds 2 tests.

github-actions Bot added framework flutter/packages/flutter repository. See also f: labels. p: material_ui material_ui package in flutter/packages labels Jan 21, 2025

TahaTesser marked this pull request as ready for review January 21, 2025 16:01

TahaTesser changed the title ~~Fix SegmentedButton border doesn't respect hovered, focused state~~ Fix SegmentedButton border doesn't respect hovered, focused, selected states Jan 22, 2025

Piinks requested a review from QuncCccccc January 29, 2025 19:19

victorsanni self-requested a review January 29, 2025 19:19

victorsanni reviewed Jan 31, 2025

View reviewed changes

Comment thread packages/flutter/test/material/segmented_button_test.dart Outdated

TahaTesser requested a review from victorsanni January 31, 2025 12:14

QuncCccccc reviewed Feb 5, 2025

View reviewed changes

Comment thread packages/flutter/lib/src/material/segmented_button.dart Outdated

Comment thread packages/flutter/lib/src/material/segmented_button.dart

TahaTesser requested review from QuncCccccc February 7, 2025 11:54

QuncCccccc reviewed Feb 25, 2025

View reviewed changes

Comment thread packages/flutter/lib/src/material/segmented_button.dart Outdated

Comment thread packages/flutter/test/material/segmented_button_test.dart Outdated

TahaTesser requested a review from matanlurey as a code owner February 26, 2025 14:41

TahaTesser removed the request for review from matanlurey February 26, 2025 14:42

QuncCccccc approved these changes Mar 12, 2025

View reviewed changes

Comment thread packages/flutter/lib/src/material/segmented_button.dart Outdated

Comment thread packages/flutter/lib/src/material/segmented_button.dart

TahaTesser requested review from victorsanni and removed request for victorsanni March 12, 2025 11:00

victorsanni approved these changes Mar 12, 2025

View reviewed changes

victorsanni added the autosubmit Merge PR when tree becomes green via auto submit App label Mar 12, 2025

auto-submit Bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Mar 12, 2025

QuncCccccc self-requested a review March 14, 2025 22:31

QuncCccccc reviewed Apr 9, 2025

View reviewed changes

Fix SegmentedButton border doesn't respect hovered, focused state

9b554f6

TahaTesser added 4 commits June 4, 2025 23:18

Address feedback

ec4f2f4

Fix arrangment

5f3d4f4

Address feedback

4a8b1f0

Address feedback

4653dd7

QuncCccccc self-requested a review June 4, 2025 20:30

TahaTesser closed this Jun 6, 2025

QuncCccccc mentioned this pull request Jun 6, 2025

SegmentedButton does not set its MaterialState for side #159884

Closed

bleroux mentioned this pull request Jul 25, 2025

Fix SegmentedButton border doesn't reflect states #172754

Merged

Conversation

TahaTesser commented Jan 21, 2025

Code Sample

Before

After

Pre-launch Checklist

Uh oh!

Uh oh!

QuncCccccc left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

QuncCccccc commented Feb 5, 2025

Uh oh!

QuncCccccc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

QuncCccccc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

TahaTesser commented Mar 12, 2025

Uh oh!

victorsanni left a comment

Choose a reason for hiding this comment

Uh oh!

auto-submit Bot commented Mar 12, 2025

Uh oh!

victorsanni commented Mar 12, 2025

Uh oh!

QuncCccccc commented Mar 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dkwingsmt commented Apr 2, 2025

Uh oh!

QuncCccccc Apr 9, 2025

Choose a reason for hiding this comment

Uh oh!

QuncCccccc Apr 9, 2025

Choose a reason for hiding this comment

Uh oh!

dkwingsmt commented May 21, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

QuncCccccc left a comment •

edited

Loading

QuncCccccc commented Mar 12, 2025 •

edited

Loading