flutter_flutter/dev/tools/gen_defaults/lib/segmented_button_template.dart
Bruno Leroux c825031ba2
Fix SegmentedButton border doesn't reflect states (#172754)
## Description

This PR fixes `SegmentedButton` border side not depending on the current
state.

It's based on one @TahaTesser 's great PR: see
https://github.com/flutter/flutter/pull/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
](https://github.com/flutter/flutter/issues/159884)

## Tests

Adds 2 tests.
2025-07-29 23:53:22 +00:00

150 lines
5.8 KiB
Dart

// 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.
import 'template.dart';
class SegmentedButtonTemplate extends TokenTemplate {
const SegmentedButtonTemplate(
this.tokenGroup,
super.blockName,
super.fileName,
super.tokens, {
super.colorSchemePrefix = '_colors.',
});
final String tokenGroup;
String _layerOpacity(String layerToken) {
if (tokenAvailable(layerToken)) {
final String layerValue = getToken(layerToken) as String;
if (tokenAvailable(layerValue)) {
final String? opacityValue = opacity(layerValue);
if (opacityValue != null) {
return '.withOpacity($opacityValue)';
}
}
}
return '';
}
String _stateColor(String componentToken, String type, String state) {
final String baseColor = color('$componentToken.$type.$state.state-layer.color', '');
if (baseColor.isEmpty) {
return 'null';
}
final String opacity = _layerOpacity('$componentToken.$state.state-layer.opacity');
return '$baseColor$opacity';
}
@override
String generate() =>
'''
class _${blockName}DefaultsM3 extends SegmentedButtonThemeData {
_${blockName}DefaultsM3(this.context);
final BuildContext context;
late final ThemeData _theme = Theme.of(context);
late final ColorScheme _colors = _theme.colorScheme;
@override ButtonStyle? get style {
return ButtonStyle(
textStyle: WidgetStatePropertyAll<TextStyle?>(${textStyle('$tokenGroup.label-text')}),
backgroundColor: WidgetStateProperty.resolveWith((Set<WidgetState> states) {
if (states.contains(WidgetState.disabled)) {
return ${componentColor('$tokenGroup.disabled')};
}
if (states.contains(WidgetState.selected)) {
return ${componentColor('$tokenGroup.selected.container')};
}
return ${componentColor('$tokenGroup.unselected.container')};
}),
foregroundColor: WidgetStateProperty.resolveWith((Set<WidgetState> states) {
if (states.contains(WidgetState.disabled)) {
return ${componentColor('$tokenGroup.disabled.label-text')};
}
if (states.contains(WidgetState.selected)) {
if (states.contains(WidgetState.pressed)) {
return ${componentColor('$tokenGroup.selected.pressed.label-text')};
}
if (states.contains(WidgetState.hovered)) {
return ${componentColor('$tokenGroup.selected.hover.label-text')};
}
if (states.contains(WidgetState.focused)) {
return ${componentColor('$tokenGroup.selected.focus.label-text')};
}
return ${componentColor('$tokenGroup.selected.label-text')};
} else {
if (states.contains(WidgetState.pressed)) {
return ${componentColor('$tokenGroup.unselected.pressed.label-text')};
}
if (states.contains(WidgetState.hovered)) {
return ${componentColor('$tokenGroup.unselected.hover.label-text')};
}
if (states.contains(WidgetState.focused)) {
return ${componentColor('$tokenGroup.unselected.focus.label-text')};
}
return ${componentColor('$tokenGroup.unselected.label-text')};
}
}),
overlayColor: WidgetStateProperty.resolveWith((Set<WidgetState> states) {
if (states.contains(WidgetState.selected)) {
if (states.contains(WidgetState.pressed)) {
return ${_stateColor(tokenGroup, 'selected', 'pressed')};
}
if (states.contains(WidgetState.hovered)) {
return ${_stateColor(tokenGroup, 'selected', 'hover')};
}
if (states.contains(WidgetState.focused)) {
return ${_stateColor(tokenGroup, 'selected', 'focus')};
}
} else {
if (states.contains(WidgetState.pressed)) {
return ${_stateColor(tokenGroup, 'unselected', 'pressed')};
}
if (states.contains(WidgetState.hovered)) {
return ${_stateColor(tokenGroup, 'unselected', 'hover')};
}
if (states.contains(WidgetState.focused)) {
return ${_stateColor(tokenGroup, 'unselected', 'focus')};
}
}
return null;
}),
surfaceTintColor: const WidgetStatePropertyAll<Color>(Colors.transparent),
elevation: const WidgetStatePropertyAll<double>(0),
iconSize: const WidgetStatePropertyAll<double?>(${getToken('$tokenGroup.with-icon.icon.size')}),
side: WidgetStateProperty.resolveWith((Set<WidgetState> states) {
if (states.contains(WidgetState.disabled)) {
return ${border("$tokenGroup.disabled.outline")};
}
return ${border("$tokenGroup.outline")};
}),
shape: const WidgetStatePropertyAll<OutlinedBorder>(${shape(tokenGroup, '')}),
minimumSize: const WidgetStatePropertyAll<Size?>(Size.fromHeight(${getToken('$tokenGroup.container.height')})),
);
}
@override
Widget? get selectedIcon => const Icon(Icons.check);
static WidgetStateProperty<Color?> resolveStateColor(
Color? unselectedColor,
Color? selectedColor,
Color? overlayColor,
) {
final Color? selected = overlayColor ?? selectedColor;
final Color? unselected = overlayColor ?? unselectedColor;
return WidgetStateProperty<Color?>.fromMap(
<WidgetStatesConstraint, Color?>{
WidgetState.selected & WidgetState.pressed: selected?.withOpacity(0.1),
WidgetState.selected & WidgetState.hovered: selected?.withOpacity(0.08),
WidgetState.selected & WidgetState.focused: selected?.withOpacity(0.1),
WidgetState.pressed: unselected?.withOpacity(0.1),
WidgetState.hovered: unselected?.withOpacity(0.08),
WidgetState.focused: unselected?.withOpacity(0.1),
WidgetState.any: Colors.transparent,
},
);
}
}
''';
}