Repository: flutter
Issue: RenderFlex overflow when using SegmentedButton in AnimatedCrossFade
Labels: framework,a: animation,has reproducible steps,P3,team-design,triaged-design,found in release: 3.16,found in release: 3.18

### Steps to reproduce

I have a  `SegmentedButton` in an `AnimatedCrossFade`, so that making a selection changes the `crossFadeState`.


Possibly related: #126905 

Demo: https://dartpad.dev/?id=6a7307c9420f338bf0ef77f9ede1750c


### Expected results

No error.

### Actual results

<details open>
<summary>Output</summary>

```
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 2.9 pixels on the right.

Widget creation tracking is currently disabled. Enabling it enables improved error messages. It can
be enabled by passing `--track-widget-creation` to `flutter run` or `flutter test`.

The overflowing RenderFlex has an orientation of Axis.horizontal.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be
seen. If the content is legitimately bigger than the available space, consider clipping it with a
ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
like a ListView.
The specific RenderFlex in question is: RenderFlex#58709 relayoutBoundary=up1 OVERFLOWING:
  creator: Row ← _TextButtonWithIconChild ← Align ← Padding ← IconTheme ← Builder ← Listener ←
    RawGestureDetector ← GestureDetector ← Semantics ← DefaultSelectionStyle ← Builder ← ⋯
  parentData: offset=Offset(0.0, 6.0) (can use size)
  constraints: BoxConstraints(0.0<=w<=23.1, 0.0<=h<=32.0)
  size: Size(23.1, 20.0)
  direction: horizontal
  mainAxisAlignment: start
  mainAxisSize: min
  crossAxisAlignment: center
  textDirection: ltr
  verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════
```

</details>

### Code sample


<details open>

<summary>Code Sample</summary>

```dart
//ignore_for_file: prefer_const_constructors, prefer_const_literals_to_create_immutables

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

const _title = 'SegmentedButton overflows (flutter/flutter#140426)';

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) =>
      MaterialApp(title: _title, theme: ThemeData.dark(), home: DemoPage());
}

enum Options { a, b }

class DemoPage extends StatefulWidget {
  const DemoPage({super.key});

  @override
  State<DemoPage> createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  var _state = CrossFadeState.showFirst;
  var _selected = {Options.a};

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(title: Text(_title)),
        body: AnimatedCrossFade(
            crossFadeState: _state,
            duration: Duration(milliseconds: 1000),
            // Shadow clips weirdly; separate issue.
            // Workaround: wrap with `ClipPath`
            firstChild: ClipPath(
                clipper: ShapeBorderClipper(shape: StadiumBorder()),
                child: ElevatedButton(
                    onPressed: _onPressed, child: Text('Click Me'))),
            secondChild: SegmentedButton(
                selected: _selected,
                onSelectionChanged: _onSelectionChanged,
                segments: [
                  ...Options.values.map((v) => ButtonSegment(
                        value: v,
                        label: Text(v.name),
//                       icon: Icon(Icons.abc),
                      )),
                ])));

  void _onPressed() => setState(() {
        _state = CrossFadeState.showSecond;
      });

  void _onSelectionChanged(Set<Options> selected) => setState(() {
        _selected = selected;
        // Throws: "A RenderFlex overflowed by 2.9 pixels on the right."
        _state = CrossFadeState.showFirst;
      });
}
```

</details>


### Screenshots or Video

_No response_

### Logs

_No response_

### Flutter Doctor output

<details open><summary>Doctor output</summary>

```console
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.16.4, on LMDE 6 (faye) 6.5.0-0.deb12.4-amd64, locale en_US.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Chrome - develop for the web
[✓] Linux toolchain - develop for Linux desktop
[✓] Android Studio (version 2023.1)
[!] Android Studio (version unknown)
    ✗ Unable to determine Android Studio version.
[✓] IntelliJ IDEA Ultimate Edition (version 2023.3)
[✓] Connected device (3 available)
[✓] Network resources

! Doctor found issues in 1 category.
```

</details>