Repository: flutter
Issue: Text style inherited from ancestor TextSpan applies unwanted colors to child of WidgetSpan
Labels: a: text input,framework,f: material design,d: api docs,has reproducible steps,P3,team-design,triaged-design,found in release: 3.13,found in release: 3.16

### Is there an existing issue for this?

- [X] I have searched the [existing issues](https://github.com/flutter/flutter/issues)
- [X] I have read the [guide to filing a bug](https://flutter.dev/docs/resources/bug-reports)

### Steps to reproduce

1. Copy the sample code below.
2. Paste it to an editor and run it.
3. See how the text style has been applied to the child of WidgetSpan.


### Expected results

b and d in the sample app result in the same visually.

### Actual results

Translucent colors is displayed darker in WidgetSpan.

I'm not sure if this is a bug, but I found it very unintuitive. I couldn't find documentation related to this. It is also inconsistent that the workaround that works for `background`/`backgroundColor` does not work for `decorationColor`.


### Code sample

<details><summary>Code sample</summary>

```dart
import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  final _style = TextStyle(
    fontSize: 50.0,
    fontWeight: FontWeight.w900,
    fontStyle: FontStyle.italic,
    color: Colors.blue.withOpacity(0.5),
    backgroundColor: Colors.purple.withOpacity(0.2),
    decoration: TextDecoration.underline,
    decorationThickness: 2.0,
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text('a'),
              Text.rich(
                TextSpan(
                  text: 'Text1',
                  style: _style,
                  children: const [
                    WidgetSpan(child: Text('Text2')),
                  ],
                ),
              ),
              const SizedBox(height: 16.0),
              const Text('b'),
              Text.rich(
                TextSpan(
                  text: 'Text1',
                  style: _style,
                  children: [
                    WidgetSpan(
                      child: Text('Text2', style: _style),
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 16.0),
              const Text('c'),
              Text.rich(
                TextSpan(
                  text: 'Text1',
                  style: _style,
                  children: [
                    WidgetSpan(
                      style: const TextStyle(
                        backgroundColor: Colors.transparent,
                        decorationColor: Colors.transparent,
                      ),
                      child: Text('Text2', style: _style),
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 16.0),
              const Text('d'),
              Text.rich(
                TextSpan(
                  text: 'Text1',
                  style: _style,
                  children: [
                    WidgetSpan(
                      style: const TextStyle(
                        backgroundColor: Colors.transparent,
                        decorationColor: Color(0x01000000),
                      ),
                      child: Text('Text2', style: _style),
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 16.0),
              const Text('e'),
              DefaultTextStyle(
                style: _style,
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    const Text('Text1'),
                    DefaultTextStyle(
                      style: _style,
                      child: const Text('Text2'),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
```

</details>


### Screenshots or Video

<details>
<summary>Screenshot</summary>

<img src="https://github.com/flutter/flutter/assets/20254485/1345f626-ccb3-4e31-97db-277b993860a4" height="500">

</details>

- **a**
    - Only some values of the text style are inherited to the WidgetSpan. Font size, text colour, etc are not inherited.
    - This may be expected behavior.
- **b**
    - The background and decoration colors become darker if the same style as an ancestor span's is specified in the Text widget in a WidgetSpan. It appears that the translucent colors have been combined.
    - It does not seem to be true of the translucent foreground color.
-  **c**
    - The unexpected background color is avoided if `Colors.transparent` is specified in the WidgetSpan.
    - The same workaround is not effective for the decoration (underline) color.
- **d**
    - Using almost transparent color (with alpha or RGB values only slightly above zero) works for the decoration color too.
- **e**
    - No issue with nested DefaultTextStyles. There's a tiny gap inbetween though.


### Logs

_No response_

### Flutter Doctor output

<details><summary>Doctor output</summary>

N/A

I used DartPad (Flutter 3.13.7, Dart 3.1.3) to check the behaviour.

</details>