11753 Commits

Author SHA1 Message Date
Bruno Leroux
402ed6c503
Fix DropdownMenu focus traversal (#153931)
## Description

This PR fixes `DropdownMenu` focus traversal.

Before this PR, if a `DropdownMenu` contains several items, the 'tab' key had to be pressed many times before the focus move to the inner text field.

This fix is based on https://github.com/flutter/flutter/issues/131120#issuecomment-1654233358.

## Related Issue

Fixes https://github.com/flutter/flutter/issues/131120.

## Tests

Adds 1 test.
2024-08-23 07:57:08 +00:00
Greg Spencer
aa934ac119
Fix broken macro reference (#153881)
## Description

This fixes a bogus macro reference.  It's in the doc comment for a private function, so it's unlikely to ever see the docs website, but still, it shouldn't reference a non-existent template.

## Tests
 - Doc only change.
2024-08-22 22:54:20 +00:00
PurplePolyhedron
8e50a17d94
Stop DropdownMenu internal scrolling from moving parent Scrollable (#153360)
fixes https://github.com/flutter/flutter/issues/151854
fixes #139113

The regression test uses nested `ListView` because I could not reproduce the issue without using nested `Scrollable`.

The issue is masked when there is only one `Scrollable` outside `DropdownMenu`. While `Scrollable.ensureVisible` can find all the `Scrollable`, the actual scrolling is performed by `ScrollPosition.ensureVisible` , which uses the `RenderObject` tree to find nearest Viewport but it could not find one due to `OverlayPortal` putting the target `RenderObject` at different point. So no scrolling will occur.

However when there are nested `Scrollable`, `Scrollable.ensureVisible` can scroll the outside `Scrollable` normally since no `RenderObject` tree gap exist between the two `Scrollable`
2024-08-22 21:14:22 +00:00
RamonFarizel
ef098c2aa4
Document scale parameter for Image and RawImage (#153728)
This PR documents the scale parameter for Image and RawImage.
It adds the quote from the [Image.memory](https://main-api.flutter.dev/flutter/widgets/Image/Image.memory.html) for other constructors like: `Image.asset`, `Image.new`, `Image.network`, `Image.file` and `RawImage`

> The scale argument specifies the linear scale factor for drawing this image at its intended size and applies to both the width and the height. For example, if this is 2.0, it means that there are four image pixels for every one logical pixel, and the image's actual width and height (as given by the [dart:ui.Image.width](https://main-api.flutter.dev/flutter/dart-ui/Image/width.html) and [dart:ui.Image.height](https://main-api.flutter.dev/flutter/dart-ui/Image/height.html) properties) are double the height and width that should be used when painting the image (e.g. in the arguments given to [Canvas.drawImage](https://main-api.flutter.dev/flutter/dart-ui/Canvas/drawImage.html)).

#148623
2024-08-22 16:42:18 +00:00
Koji Wakamiya
7a44392f3f
Remove destinations length hard limit in NavigationRail widget (#152972)
> Remove destinations length hard limit in NavigationRail.

Because of https://github.com/flutter/flutter/pull/104914#issuecomment-1318871496, a new PR was opened with some new tests ([comment](https://github.com/flutter/flutter/pull/104914#discussion_r927044117)) added.

Fixes https://github.com/flutter/flutter/issues/58367

Related 

* https://github.com/flutter/flutter/issues/58367
* https://github.com/flutter/flutter/pull/104914
* https://github.com/flutter/flutter/issues/104913
2024-08-22 07:25:34 +00:00
Denis Bowen
a57eb8fefc
fixed issue to where screen reader reads all buttons when opening datepicker (#152705)
removed container=true property from Semantics wrapper of datepicker dialog. This prevents the screen reader from reading every button in the datepicker dialog whenever a user opens it, reducing SR noise.

Before: https://screencast.googleplex.com/cast/Njc0Mzc1MDA5MTk5NzE4NHw2NTU5ODI4YS0xNA
After: https://screencast.googleplex.com/cast/NTYxMDUwOTIxMzYzMDQ2NHxjOWQ2M2YzNy1hYQ

fixes b/345297872

NOTE: Please let me know if a test is needed for this, since it is only deleting code.
2024-08-22 03:30:22 +00:00
Renzo Olivares
f6054ae521
Fix: Deleting text in EditableText with CJK keyboard while in CupertinoPageRoute throws exception (#153822)
Fixes #153003

Pressing backspace on CJK keyboards to delete text may trigger a key event which in turns triggers the `DeleteTextIntent`. This is different than English keyboards where the updated `TextEditingValue` from the `TextInputPlugin` will come through `updateEditingValue` which allows us to hit the codepath that hides the text selection toolbar. 23883b13d4/packages/flutter/lib/src/widgets/editable_text.dart (L3245-L3250) Because CJK keyboards may not hit this codepath, when the text is long and editable text tries to bring the new selection into view by scrolling, this triggers the hide context menu scroll listener in a weird state 23883b13d4/packages/flutter/lib/src/widgets/editable_text.dart (L3865-L3869) causing an exception to be thrown.

This PR tries to work around the issue above by hiding the toolbar when a `DeleteTextIntent` is received.
2024-08-22 03:19:24 +00:00
Taha Tesser
17ad052792
Make TextField read only when the text input is disabled by setting DropdownMenu.requestFocusOnTap to false (#153566)
Fixes [[DropdownMenu] Semantics still reads out "EditBox" when text editing is disabled](https://github.com/flutter/flutter/issues/151686)

### Code sample

<details>
<summary>expand to view the code sample</summary> 

```dart
import 'package:flutter/material.dart';

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

enum ColorLabel {
  blue('Blue', Colors.blue),
  pink('Pink', Colors.pink),
  green('Green', Colors.green),
  yellow('Orange', Colors.orange),
  grey('Grey', Colors.grey);

  const ColorLabel(this.label, this.color);
  final String label;
  final Color color;
}

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

  @override
  State<DropdownMenuExample> createState() => _DropdownMenuExampleState();
}

class _DropdownMenuExampleState extends State<DropdownMenuExample> {
  ColorLabel? selectedColor;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              spacing: 16.0,
              children: <Widget>[
                const ExcludeSemantics(child: Text('TexField')),
                const TextField(
                  readOnly: true,
                  decoration: InputDecoration(
                    labelText: 'Color',
                    border: OutlineInputBorder(),
                  ),
                ),
                const ExcludeSemantics(child: Text('DropdownMenu')),
                DropdownMenu<ColorLabel>(
                  requestFocusOnTap: false,
                  label: const Text('Color'),
                  dropdownMenuEntries: ColorLabel.values
                      .map<DropdownMenuEntry<ColorLabel>>((ColorLabel color) {
                    return DropdownMenuEntry<ColorLabel>(
                      value: color,
                      label: color.label,
                      style: MenuItemButton.styleFrom(
                        foregroundColor: color.color,
                      ),
                    );
                  }).toList(),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

```

</details>

### Preview (with Talkback captions)
|Before | After |
| --------------- | --------------- |
| <img src="https://github.com/user-attachments/assets/0d9f79f3-de5d-4c42-adea-3d700464d001" /> | <img src="https://github.com/user-attachments/assets/cf38508e-61f7-43ff-b420-ffe24cc8e28f" /> |

### Before demo
DropdownMenu announces "EditBox" and "double tap to activate" when setting `DropdownMenu.requestFocusOnTap` to `false` shouldn't allow that

https://github.com/user-attachments/assets/f692a4f6-9d6a-4834-8df0-baf6c65fae29

### After demo
When setting `DropdownMenu.requestFocusOnTap` to `false`, the underlying `TextField` gets read only state which changes the semantics to be not editable or focusable  and remove"EditBox" and "double tap to activate" announcments

https://github.com/user-attachments/assets/0e14a636-6b81-4535-a5d1-c8f301c4f89e
2024-08-21 18:30:39 +00:00
Kishan Rathore
b8f89f70bf
docs: Update doc for scale behaviour of floating label (#151835)
In input decoration if we are showing label as floating when it is focused, it scales down to `_kFinalLabelScale` i.e. 0.75 right now, but it was not mentioned anywhere.

Resolves #151406
2024-08-21 17:56:16 +00:00
PurplePolyhedron
e13e9a08e1
Disable Dropdown menu search during keyboard navigation (#152378)
fixes https://github.com/flutter/flutter/issues/152375

PR https://github.com/flutter/flutter/pull/147294 fix keyboard navigation issue https://github.com/flutter/flutter/issues/147253 by prioritising current selection in default search.

This revert PR https://github.com/flutter/flutter/pull/147294 and fix the issue by disabling `DropdownMenu` search during keyboard navigation instead.

also fixes https://github.com/flutter/flutter/issues/151878 as it is a regression caused by PR https://github.com/flutter/flutter/pull/147294.

Reason for reverting https://github.com/flutter/flutter/pull/147294 : it doesn't fix the keyboard navigation issue if a custom searchCallback(Issue https://github.com/flutter/flutter/issues/152375) is provided, and "prioritising current selection" is ambiguous for a custom searchCallback, so it would be tricky to have searchCallback behave the same way as the default search. Additionally the original search function was agnostic about the state of `DropdownMenu` other than the entry value type, might be good to keep it that way unless needed.
2024-08-21 17:00:15 +00:00
Nate Wilson
1cbf1a4cbf
_InteractiveViewerState code cleanup (#153645)
This pull request makes the interactive viewer's `TransformationController` a non-nullable value, initialized at its declaration site. (related: #153644)

It also renames a few private methods to follow the [style guide](https://github.com/flutter/flutter/blob/master/docs/contributing/Style-guide-for-Flutter-repo.md#naming-rules-for-typedefs-and-function-variables).
2024-08-21 00:52:08 +00:00
Victor Sanni
c631ad91a8
Implement tap to scroll to item in CupertinoPicker (#153386)
Finishes the work started by @Kavantix in #110733.

Fixes https://github.com/flutter/flutter/issues/24089.

Before:

https://github.com/user-attachments/assets/7ca0d346-7538-44a0-b0b2-41cf96eee6eb

After:

https://github.com/user-attachments/assets/8da91188-28a0-4738-a216-e03946f00284

Native picker:

https://github.com/user-attachments/assets/8662b3c0-0443-4f8d-818b-cabd97d37de8
2024-08-20 20:22:47 +00:00
chunhtai
e7da16df76
Fixes page.onPopInvoked type mismatches (#153593)
fixes https://github.com/flutter/flutter/issues/153150
2024-08-20 18:23:54 +00:00
Jason Simmons
cdab9d509b
When the app enters the detached state, clear the record of the last SystemChrome style sent to the host (#153586)
This ensures that the style will be sent again after the host is reattached

Fixes https://github.com/flutter/flutter/issues/150418
2024-08-20 17:33:13 +00:00
Michael Goderbauer
d9dbefc949
fix some unintended HTML tags in docs (#153507)
I used the `unintended_html_in_doc_comment` to find these, but sadly the lint is not ready to be enabled yet due to https://github.com/dart-lang/linter/issues/5065.
2024-08-16 23:17:14 +00:00
Joe Kawai
5d59f8bb1a
Add TextHeightBehavior argument for DefaultTextStyle.merge (#153178)
Addresses an issue where `DefaultTextStyle.merge` is missing the `textHeightBehavior` argument. The argument is present in the `DefaultTextStyle` constructor.

Resolves #120176
2024-08-15 23:00:15 +00:00
RamonFarizel
81ee230f49
Update TextTheme with the M3 Typography tokens (#153131)
This PR adds a new table with[ Material 3 typography tokens](https://m3.material.io/styles/typography/type-scale-tokens).

Issue:
https://github.com/flutter/flutter/issues/148429
2024-08-15 22:48:58 +00:00
Greg Spencer
1633c47dda
Improve asserts on Element.mount (#153477)
## Description

In debugging an issue with mount, I hit one of these asserts, and I thought it would be a much better assert with some context.

## Tests
 - No test changes because the change is only to the output string of an assert.
2024-08-15 21:30:03 +00:00
Bernardo Ferrari
ce63c029c5
Fix anti-aliasing when painting borders with solid colors. (#153365)
Trying to reland https://github.com/flutter/flutter/pull/122317 in 2024. Let's see if we can.

<img width="666" alt="image" src="https://user-images.githubusercontent.com/351125/182002867-03d55bbb-163d-48b9-ba3c-ed32dbef2680.png">

Side effect: shapes with border will be rounder:
![Frame 6](https://github.com/user-attachments/assets/95324ebc-8db5-4365-817f-bc62304b9044)

Close https://github.com/flutter/flutter/issues/13675.
2024-08-15 19:02:23 +00:00
Qun Cheng
108a355453
Update tokens to 5.0.0 (#153385)
This PR is to
* Update the Material Design tokens to 5.0.0
* 4 color roles in **Light mode** have different default values
   `onPrimaryContainer`: Primary10  -> Primary30 
   `onSecondaryContainer`: Secondary10 -> Secondary30
   `onTertiaryContainer`: Tertiary10 -> Tertiary30
   `onErrorContainer`: Error10 -> Error30
    
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;![Screenshot 2024-08-13 at 12 53 03 PM](https://github.com/user-attachments/assets/bfa863d9-03d3-4557-8676-d56febdb2be5)

* new tokens added in list.json
* `md.comp.menu.list-item.*` tokens are deprecated and should be replaced by tokens in list.json and we've done the migration last year:)!(#122388)
2024-08-14 22:53:36 +00:00
Denis Bowen
51c640297f
Slider shows visual label of value on focus (#152960)
Fixed issue to where value indicator label is not shown to user when initially focused.

Before:  [Screen recording 2024-08-05 12.16.24 PM.webm](https://github.com/user-attachments/assets/806e94d7-7c6c-40e5-93af-dbf2fb9e0dd4)
After: https://screencast.googleplex.com/cast/NTY5NzIzMTYxNjIxMjk5MnxkY2IyMGNkYi1iZA

Fixes https://github.com/flutter/flutter/issues/113538
2024-08-14 18:27:14 +00:00
PurplePolyhedron
b5847d364a
Delay DropdownMenu filtering until text input (#152368)
fixes https://github.com/flutter/flutter/issues/152055

Disabling filtering in `DropdownMenu` at start and after a selection has been made, and re-enable it (if `widget.enableFilter` is true) after text input.
This way it doesn't hide all other options when there is an existing selection.

Note: currently this may crush due to issue https://github.com/flutter/flutter/issues/151878 . Which is not directly related to this PR
2024-08-14 18:06:14 +00:00
PurplePolyhedron
593729165d
Move @_debugOnly documentation in framework.dart to be more visible to IDE. (#153134)
Change the location of the documentation of `@_debugOnly` following the style of `@override` so it is visible to IDE where the annotation is used.
2024-08-14 01:13:34 +00:00
Victor Sanni
cc5d08bc79
Make CupertinoButton interactive by keyboard shortcuts (#153126)
This should have been added with https://github.com/flutter/flutter/pull/150721.
2024-08-12 23:14:05 +00:00
Jamie Kerber
dae3a87d93
Implemented CupertinoButton new styles/sizes (fixes #92525) (#152845)
This PR fixes #92525 and introduces the following changes according to [latest iOS HIG](https://developer.apple.com/design/human-interface-guidelines/buttons#iOS-iPadOS):

- `CupertinoButton` now has a `size` property (type `enum CupertinoButtonSize`, values sm/md/lg, default `lg`) that allows the devs to apply new iOS 15+ button styles
- Previously `CupertinoButton` had a larger padding when no background color was specified. With the new HIG, that is no longer the case
- `CupertinoButton` now has a `.tinted` constructor that renders a translucent background (transparency % is brightness-dependent) and uses a different foreground color compared to `.filled`
- `CupertinoButton` now uses the `actionTextStyle` TextStyle from the given theme
- `CupertinoButton`'s child IconTheme's size will always be x1.2 the given TextStyle's size
- `CupertinoTextThemeData` now has a `actionSmallTextStyle` property to use with small buttons (including a default `_kDefaultActionSmallTextStyle` TextStyle)

Preview & example:

![image](https://github.com/user-attachments/assets/0985eb19-c091-41f5-bd98-0de196b7e403)

> **NOTE**: there is a discrepancy in dark mode button foreground color between the default CupertinoTheme and the HIG. A separate issue will be opened for this.

~EDIT: issue reported here https://github.com/flutter/flutter/issues/152846~
EDIT2: fixed by #153039 !

![image](https://github.com/user-attachments/assets/d671d7b4-bb2f-4b38-9464-ee1b04927304)

## Example
```dart
import 'package:flutter/cupertino.dart';

const Widget body = Row(
  mainAxisSize: MainAxisSize.min,
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Icon(
      CupertinoIcons.play_fill,
    ),
    Text("Play"),
  ],
);

void main() =>
  runApp(
    CupertinoApp(
      home: Container(
        child: Wrap(
        direction: Axis.horizontal,
        children: <Widget>[
          // header
          Text(''),
          Text('Plain'),
          Text('Grey'),
          Text('Tinted'),
          Text('Filled'),
          // small
          Text('Small'),
          CupertinoButton(
            child: body,
            onPressed: () {},
            size: CupertinoButtonSize.small,
          ),
          CupertinoButton.tinted(
            child: body,
            onPressed: () {},
            size: CupertinoButtonSize.small,
            color: CupertinoColors.systemGrey,
          ),
          CupertinoButton.tinted(
            child: body,
            onPressed: () {},
            size: CupertinoButtonSize.small,
          ),
          CupertinoButton.filled(
            child: body,
            onPressed: () {},
            size: CupertinoButtonSize.small,
          ),
          // medium
          Text('Medium'),
          CupertinoButton(
            child: body,
            onPressed: () {},
            size: CupertinoButtonSize.medium,
          ),
          CupertinoButton.tinted(
            child: body,
            onPressed: () {},
            size: CupertinoButtonSize.medium,
            color: CupertinoColors.systemGrey,
          ),
          CupertinoButton.tinted(
            child: body,
            onPressed: () {},
            size: CupertinoButtonSize.medium,
          ),
          CupertinoButton.filled(
            child: body,
            onPressed: () {},
            size: CupertinoButtonSize.medium,
          ),
          // large
          Text('Large'),
          CupertinoButton(
            child: body,
            onPressed: () {},
            size: CupertinoButtonSize.large,
          ),
          CupertinoButton.tinted(
            child: body,
            onPressed: () {},
            color: CupertinoColors.systemGrey,
            size: CupertinoButtonSize.large,
          ),
          CupertinoButton.tinted(
            child: body,
            onPressed: () {},
            size: CupertinoButtonSize.large,
          ),
          CupertinoButton.filled(
            child: body,
            onPressed: () {},
            size: CupertinoButtonSize.large,
          ),
        ].map((Widget w) => SizedBox(width: 110, height: 70, child: Center(child: w))).toList(),
      ),
      )
    ),
  );

```

*List which issues are fixed by this PR. You must list at least one issue. An issue is not required if the PR fixes something trivial like a typo.*

*If you had to change anything in the [flutter/tests] repo, include a link to the migration guide as per the [breaking change policy].*
2024-08-12 19:26:39 +00:00
Kishan Rathore
33c05da7a0
Refactor: Deprecate inactiveColor from cupertino checkbox (#152981)
Refactor: Deprecate `inactiveColor` from cupertino checkbox
Fixes #151252
2024-08-12 18:29:07 +00:00
Bruno Leroux
5609019500
Expose affixes icon constraints in InputDecorationTheme (#153089)
## Description

This PR makes the existing `InputDecoration.prefixIconConstraints` and `InputDecoration.suffixIconConstraints` configurable from an `InputDecorationTheme`.

## Related Issue

Related to https://github.com/flutter/flutter/issues/138691 (this is needed before providing a fix or a workaround for it).

## Tests

Update and split one existing test into two different tests.
Update the existing test related to debugFillDescription by adding all the non tested properties.
2024-08-09 22:04:56 +00:00
Justin McCandless
ed47c4bb1f
Spell check range error (#153055)
Fixed a bug in spell checkers, especially custom ones, where deleting characters rapidly threw an error.
2024-08-09 13:52:06 -07:00
Victor Sanni
0c9b2e5832
Move Cupertino focus constants to cupertino/constants.dart (#153115) 2024-08-09 17:34:11 +00:00
yim
14cd5fa30a
The PopupMenuButton should not steal focus from the TextField when it appears. (#150568)
Fixes: #24843
Fixes: #50567
2024-08-08 16:09:18 +00:00
Bruno Leroux
64b373b1f2
Clean up MenuAnchor (#152946)
## Description

This PR cleans up some typos and formatting issues in the `material/menu_anchor.dart` file and associated tests.
2024-08-07 23:39:24 +00:00
James Kerber
dc4d64c9c2
Set default Cupertino primaryContrastingColor to white (#153039)
**Fixes #152846 in accordance with iOS HIG**

Previously the `_CupertinoThemeDefaults _kDefaultTheme` would set the `primaryContrastingColor` to `CupertinoColors.systemBackground`, which was white-ish in light mode, and black-ish in dark mode. That was in accordance with Apple Design Resources from 5 years ago.

> Before:
> <img width="594" alt="image" src="https://github.com/user-attachments/assets/63e88abb-6933-446f-a7ba-55109d0f353c">

As of now, iOS HIG suggests that the `primaryContrastingColor` (in combination with the currently default `primaryColor: CupertinoColors.systemBlue`) be white (regardless of light/dark modes, contrast, elevation, etc.)

> After:
> <img width="594" alt="image" src="https://github.com/user-attachments/assets/2a48f22b-a886-46dd-aada-6d157cb4ac06">

Example code:
```dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/widgets.dart';

void main() =>
  runApp(
    CupertinoApp(
      theme: CupertinoThemeData(
        brightness: Brightness.dark,
      ),
      home: Center(child:
        CupertinoButton.filled(
          onPressed: () {},
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Icon(CupertinoIcons.add),
              Text('Add'),
            ],
          ),
          )
      )
    )
  );

```
2024-08-07 23:33:23 +00:00
Tyler Holland
88fa6210ad
Allow dropdown_menu to accept any EdgeInsetsGeometry (#153053)
Allow dropdown_menu to accept any EdgeInsetsGeometry instead of just strictly EdgeInsets.

This follows normal Flutter widget practices when accepting a padding parameter, like Container: https://github.com/flutter/flutter/blob/main/packages/flutter/lib/src/widgets/container.dart#L307C9-L307C27

Fixes https://github.com/flutter/flutter/issues/151769
2024-08-07 21:38:34 +00:00
Michael Goderbauer
7c8feb94a5
Doc imports again (#152958)
https://github.com/flutter/flutter/issues/150800

The only remaining reports of `comment_references` are now because of the known issues listed in https://github.com/flutter/flutter/issues/150800.
2024-08-07 18:32:37 +00:00
davidhicks980
1f4c6ebc97
MenuAnchor hover traversal fixes (#150914)
Fixes https://github.com/flutter/flutter/issues/150910 and https://github.com/flutter/flutter/issues/150911. 

https://github.com/flutter/flutter/issues/150910 is fixed by invalidating the focus scope whenever a hover occurs. I'm interested to hear of better fixes -- it feels a bit extreme to invalidate the focus scope so often.

https://github.com/flutter/flutter/issues/150911 is fixed by replacing TextButton.onHover with MouseRegion.onHover and MouseRegion.onExit. The issue appears to be that MouseRegion.onEnter is called on scroll, whereas MouseRegion.onHover is not. I'm not confident this is a great solution, so please let me know if you all have any suggestions!

@Piinks @dkwingsmt
2024-08-07 17:43:00 +00:00
Kishan Rathore
0f7bceb9c4
Style: Rename CupertinoSwitch activeColor and trackColor to activeTrackColor and InactiveTrackColor (#151367)
Style: Rename CupertinoSwitch `activeColor` and `trackColor` to `activeTrackColor` and `InactiveTrackColor`

Resolves #151256
2024-08-07 17:42:57 +00:00
Bruno Leroux
d595e98d85
Fix PageController throws when changing page before viewPortDimensions are set (#153017)
## Description

This PR fixes `PageController` throwing when using `jumpToPage` or `animateToPage` to switch page before the viewport dimensions were retrieved.

Solution based on https://github.com/flutter/flutter/pull/152947#discussion_r1706203170.

## Related Issue

Fixes https://github.com/flutter/flutter/issues/86222.
Fixes https://github.com/flutter/flutter/issues/152079

## Tests

Adds 2 tests.
2024-08-07 16:45:53 +00:00
Renzo Olivares
0a7f8af6d1
Support clearing selection programmatically through SelectableRegionState (#152882)
This change exposes:
* `SelectableRegionState.clearSelection()` to allow a user to programmatically clear the selection.
* `SelectionAreaState`/`SelectionAreaState.selectableRegion` to allow a user to access public API in `SelectableRegion` from `SelectionArea`.

Fixes #126980
2024-08-06 23:05:03 +00:00
davidhicks980
faabe3af72
[material/menu_anchor.dart] MenuAnchor focus refactoring for RawMenuAnchor (#150950)
This PR is aimed at (1) reducing the private API surface of _MenuAnchorState to make migration into RawMenuAnchor simpler, and (2) fixing focus-related bugs. 

Directional focus handling was moved from MenuAnchor (_MenuDirectionalFocusAction, _MenuNextFocusAction, and _MenuPreviousFocusAction) into SubmenuButton (_SubmenuDirectionalFocusAction). MenuAnchor now behaves similarly to a flat FocusScope, which makes it easier to customize. A future PR will ideally expose or remove the remaining internals (_lastItemFocusNode, _firstItemFocusNode, _isRoot, etc). All previous framework tests are passing, and additional tests were added for fixes (MenuAnchor tab traversal, reopened menus not being focusable), and to test MenuAnchor focus behavior separately from MenuBar. 

However, [one example test](https://github.com/flutter/flutter/pull/150950/files#diff-a33fa01b59d280784e7c8ed6b704bd005cde95b7d3b649dc82fd58530061a09d) had to be changed. I'm not sure why the previous example test was working to begin with, as submenu buttons are supposed to open on focus, but this behavior was not observed in the original test. 

Fixes https://github.com/flutter/flutter/issues/144381, https://github.com/flutter/flutter/issues/150334.

One added feature is the ability to move between top-level horizontal submenus if a horizontal movement is made on a vertical menu item that has no children in the movement direction. This behavior was observed on Google Docs, MacOS, and various other menu systems I encountered.

https://github.com/flutter/flutter/assets/59215665/04a42b8a-cc9e-4a50-9d0c-6f2d784cfc78
2024-08-06 19:04:11 +00:00
Gazal
6f98b485ec
fix: add parameter to maintainState of SearchDelegate (#152444)
Add parameter to `showSearch`, which is passed to `_SearchPageRoute` to maintain the state of the SearchDelegate.

- fix #43582

_Just contributed this change to start the conversation on how the #43582 can be addressed. Have not added tests yet._
2024-08-06 17:53:03 +00:00
Kishan Rathore
a9b2d8d6d4
Feat: Add fillColor property for cupertinoCheckbox (#151761)
Feat: Add `fillColor` property for `CupertinoCheckbox`

Required for #151252
2024-08-06 17:51:13 +00:00
Denis Bowen
93b55edff1
Slider does not show changed label value for keyboard users fix (#152886)
Fix issue to where keyboard users could not see visual indicator label of changed value in Slider

Before: 
[Screen recording 2024-08-05 12.16.24 PM.webm](https://github.com/user-attachments/assets/89b99423-7856-4b25-86de-b211b2dbe178)

After:
[Screen recording 2024-08-05 12.38.20 PM.webm](https://github.com/user-attachments/assets/641f9065-8279-4b79-89b1-b5bcd3d691a8)

Fixes https://github.com/flutter/flutter/issues/152884
Fixes b/340638215
2024-08-06 16:58:07 +00:00
Michael Goderbauer
75b6a2ff6a
more docImports (#151951)
Part of https://github.com/flutter/flutter/issues/150800.
2024-08-05 23:19:51 +00:00
Taha Tesser
00ef750d28
[Reland] Introduce double Flex.spacing parameter for Row/Column spacing (#152890)
Relands https://github.com/flutter/flutter/pull/152472 (Fixed error causing message test, maybe by https://github.com/flutter/flutter/pull/152501)

---

fixes [add spacing parameter to Column and Row](https://github.com/flutter/flutter/issues/55378)

### `Column.spacing` Code sample

<details>
<summary>expand to view the code sample</summary> 

```dart
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.black,
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: DecoratedBox(
              decoration: BoxDecoration(
                  border: Border.all(
                color: Colors.amber,
              )),
              child: const Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Column(
                    spacing: 40.0,
                    // ignore: avoid_redundant_argument_values
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      ColoredBox(
                        color: Color(0xffff0000),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.topCenter,
                            child: Text(
                              'RED',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff00ff00),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Center(
                            child: Text(
                              'GREEN',
                              style: TextStyle(color: Colors.black),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff0000ff),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.bottomCenter,
                            child: Text(
                              'BLUE',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  Column(
                    spacing: 40.0,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      ColoredBox(
                        color: Color(0xffff0000),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.topCenter,
                            child: Text(
                              'RED',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff00ff00),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Center(
                            child: Text(
                              'GREEN',
                              style: TextStyle(color: Colors.black),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff0000ff),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.bottomCenter,
                            child: Text(
                              'BLUE',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  Column(
                    spacing: 40.0,
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      ColoredBox(
                        color: Color(0xffff0000),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.topCenter,
                            child: Text(
                              'RED',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff00ff00),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Center(
                            child: Text(
                              'GREEN',
                              style: TextStyle(color: Colors.black),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff0000ff),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.bottomCenter,
                            child: Text(
                              'BLUE',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  Column(
                    spacing: 40.0,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      ColoredBox(
                        color: Color(0xffff0000),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.topCenter,
                            child: Text(
                              'RED',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff00ff00),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Center(
                            child: Text(
                              'GREEN',
                              style: TextStyle(color: Colors.black),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff0000ff),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.bottomCenter,
                            child: Text(
                              'BLUE',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  Column(
                    spacing: 40.0,
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: <Widget>[
                      ColoredBox(
                        color: Color(0xffff0000),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.topCenter,
                            child: Text(
                              'RED',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff00ff00),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Center(
                            child: Text(
                              'GREEN',
                              style: TextStyle(color: Colors.black),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff0000ff),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.bottomCenter,
                            child: Text(
                              'BLUE',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  Column(
                    spacing: 40.0,
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      ColoredBox(
                        color: Color(0xffff0000),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.topCenter,
                            child: Text(
                              'RED',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff00ff00),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Center(
                            child: Text(
                              'GREEN',
                              style: TextStyle(color: Colors.black),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff0000ff),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.bottomCenter,
                            child: Text(
                              'BLUE',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}
```

</details>

### Preview

<img width="1072" alt="Screenshot 2024-07-30 at 15 40 59" src="https://github.com/user-attachments/assets/14f21091-9e46-4a58-8552-1379f4ba9216">

### `Row.spacing` Code sample

<details>
<summary>expand to view the code sample</summary> 

```dart
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.black,
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: DecoratedBox(
              decoration: BoxDecoration(
                  border: Border.all(
                color: Colors.amber,
              )),
              child: const Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Row(
                    spacing: 40.0,
                    // ignore: avoid_redundant_argument_values
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      ColoredBox(
                        color: Color(0xffff0000),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.centerLeft,
                            child: Text(
                              'RED',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff00ff00),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Center(
                            child: Text(
                              'GREEN',
                              style: TextStyle(color: Colors.black),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff0000ff),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.centerRight,
                            child: Text(
                              'BLUE',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  Row(
                    spacing: 40.0,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      ColoredBox(
                        color: Color(0xffff0000),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.centerLeft,
                            child: Text(
                              'RED',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff00ff00),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Center(
                            child: Text(
                              'GREEN',
                              style: TextStyle(color: Colors.black),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff0000ff),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.centerRight,
                            child: Text(
                              'BLUE',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  Row(
                    spacing: 40.0,
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      ColoredBox(
                        color: Color(0xffff0000),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.centerLeft,
                            child: Text(
                              'RED',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff00ff00),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Center(
                            child: Text(
                              'GREEN',
                              style: TextStyle(color: Colors.black),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff0000ff),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.centerRight,
                            child: Text(
                              'BLUE',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  Row(
                    spacing: 40.0,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      ColoredBox(
                        color: Color(0xffff0000),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.centerLeft,
                            child: Text(
                              'RED',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff00ff00),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Center(
                            child: Text(
                              'GREEN',
                              style: TextStyle(color: Colors.black),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff0000ff),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.centerRight,
                            child: Text(
                              'BLUE',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  Row(
                    spacing: 40.0,
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: <Widget>[
                      ColoredBox(
                        color: Color(0xffff0000),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.centerLeft,
                            child: Text(
                              'RED',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff00ff00),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Center(
                            child: Text(
                              'GREEN',
                              style: TextStyle(color: Colors.black),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff0000ff),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.centerRight,
                            child: Text(
                              'BLUE',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  Row(
                    spacing: 40.0,
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      ColoredBox(
                        color: Color(0xffff0000),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.centerLeft,
                            child: Text(
                              'RED',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff00ff00),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Center(
                            child: Text(
                              'GREEN',
                              style: TextStyle(color: Colors.black),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff0000ff),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            child: Text(
                              'BLUE',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

```

</details>

### Preview

<img width="1072" alt="Screenshot 2024-07-30 at 15 39 42" src="https://github.com/user-attachments/assets/717e9f5e-a491-4853-ba74-e72ec7493363">
2024-08-05 23:04:50 +00:00
Qun Cheng
173bf86b7b
Fix CarouselView rebuild (#152791)
Fixes https://github.com/flutter/flutter/issues/152787

Originally, when we want to update `itemExtent`, we didn't check if the old itemExtent is null but `getItemFromPixels()` needs that information.
https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/carousel.dart#L1343-L1347
Then in `getItemFromPixels()`, it goes to the else statement which assert `flexWeights` is not null, then the exception happens.

- [x ] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement].
2024-08-05 23:04:48 +00:00
auto-submit[bot]
463a1532b3
Reverts "Introduce double Flex.spacing parameter for Row/Column spacing (#152472)" (#152885)
Reverts: flutter/flutter#152472
Initiated by: goderbauer
Reason for reverting: Tests are failing, e.g. https://ci.chromium.org/ui/p/flutter/builders/prod/Mac%20tool_integration_tests_5_5/127/overview
Original PR Author: TahaTesser

Reviewed By: {Piinks, goderbauer, Hixie}

This change reverts the following previous change:
fixes [add spacing parameter to Column and Row](https://github.com/flutter/flutter/issues/55378)

### `Column.spacing` Code sample

<details>
<summary>expand to view the code sample</summary> 

```dart
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.black,
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: DecoratedBox(
              decoration: BoxDecoration(
                  border: Border.all(
                color: Colors.amber,
              )),
              child: const Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Column(
                    spacing: 40.0,
                    // ignore: avoid_redundant_argument_values
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      ColoredBox(
                        color: Color(0xffff0000),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.topCenter,
                            child: Text(
                              'RED',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff00ff00),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Center(
                            child: Text(
                              'GREEN',
                              style: TextStyle(color: Colors.black),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff0000ff),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.bottomCenter,
                            child: Text(
                              'BLUE',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  Column(
                    spacing: 40.0,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      ColoredBox(
                        color: Color(0xffff0000),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.topCenter,
                            child: Text(
                              'RED',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff00ff00),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Center(
                            child: Text(
                              'GREEN',
                              style: TextStyle(color: Colors.black),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff0000ff),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.bottomCenter,
                            child: Text(
                              'BLUE',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  Column(
                    spacing: 40.0,
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      ColoredBox(
                        color: Color(0xffff0000),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.topCenter,
                            child: Text(
                              'RED',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff00ff00),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Center(
                            child: Text(
                              'GREEN',
                              style: TextStyle(color: Colors.black),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff0000ff),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.bottomCenter,
                            child: Text(
                              'BLUE',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  Column(
                    spacing: 40.0,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      ColoredBox(
                        color: Color(0xffff0000),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.topCenter,
                            child: Text(
                              'RED',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff00ff00),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Center(
                            child: Text(
                              'GREEN',
                              style: TextStyle(color: Colors.black),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff0000ff),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.bottomCenter,
                            child: Text(
                              'BLUE',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  Column(
                    spacing: 40.0,
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: <Widget>[
                      ColoredBox(
                        color: Color(0xffff0000),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.topCenter,
                            child: Text(
                              'RED',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff00ff00),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Center(
                            child: Text(
                              'GREEN',
                              style: TextStyle(color: Colors.black),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff0000ff),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.bottomCenter,
                            child: Text(
                              'BLUE',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  Column(
                    spacing: 40.0,
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      ColoredBox(
                        color: Color(0xffff0000),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.topCenter,
                            child: Text(
                              'RED',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff00ff00),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Center(
                            child: Text(
                              'GREEN',
                              style: TextStyle(color: Colors.black),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff0000ff),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.bottomCenter,
                            child: Text(
                              'BLUE',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}
```

</details>

### Preview

<img width="1072" alt="Screenshot 2024-07-30 at 15 40 59" src="https://github.com/user-attachments/assets/14f21091-9e46-4a58-8552-1379f4ba9216">

### `Row.spacing` Code sample

<details>
<summary>expand to view the code sample</summary> 

```dart
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.black,
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: DecoratedBox(
              decoration: BoxDecoration(
                  border: Border.all(
                color: Colors.amber,
              )),
              child: const Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Row(
                    spacing: 40.0,
                    // ignore: avoid_redundant_argument_values
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      ColoredBox(
                        color: Color(0xffff0000),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.centerLeft,
                            child: Text(
                              'RED',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff00ff00),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Center(
                            child: Text(
                              'GREEN',
                              style: TextStyle(color: Colors.black),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff0000ff),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.centerRight,
                            child: Text(
                              'BLUE',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  Row(
                    spacing: 40.0,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      ColoredBox(
                        color: Color(0xffff0000),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.centerLeft,
                            child: Text(
                              'RED',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff00ff00),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Center(
                            child: Text(
                              'GREEN',
                              style: TextStyle(color: Colors.black),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff0000ff),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.centerRight,
                            child: Text(
                              'BLUE',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  Row(
                    spacing: 40.0,
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      ColoredBox(
                        color: Color(0xffff0000),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.centerLeft,
                            child: Text(
                              'RED',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff00ff00),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Center(
                            child: Text(
                              'GREEN',
                              style: TextStyle(color: Colors.black),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff0000ff),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.centerRight,
                            child: Text(
                              'BLUE',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  Row(
                    spacing: 40.0,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      ColoredBox(
                        color: Color(0xffff0000),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.centerLeft,
                            child: Text(
                              'RED',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff00ff00),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Center(
                            child: Text(
                              'GREEN',
                              style: TextStyle(color: Colors.black),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff0000ff),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.centerRight,
                            child: Text(
                              'BLUE',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  Row(
                    spacing: 40.0,
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: <Widget>[
                      ColoredBox(
                        color: Color(0xffff0000),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.centerLeft,
                            child: Text(
                              'RED',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff00ff00),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Center(
                            child: Text(
                              'GREEN',
                              style: TextStyle(color: Colors.black),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff0000ff),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.centerRight,
                            child: Text(
                              'BLUE',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  Row(
                    spacing: 40.0,
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      ColoredBox(
                        color: Color(0xffff0000),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.centerLeft,
                            child: Text(
                              'RED',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff00ff00),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Center(
                            child: Text(
                              'GREEN',
                              style: TextStyle(color: Colors.black),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff0000ff),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            child: Text(
                              'BLUE',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

```

</details>

### Preview

<img width="1072" alt="Screenshot 2024-07-30 at 15 39 42" src="https://github.com/user-attachments/assets/717e9f5e-a491-4853-ba74-e72ec7493363">
2024-08-05 19:32:47 +00:00
Tirth
68983f7084
[Docs] DeviceOrientation Enum Correction (#152876)
Fixed #151371
2024-08-05 17:16:51 +00:00
Taha Tesser
48ecec16ee
Introduce double Flex.spacing parameter for Row/Column spacing (#152472)
fixes [add spacing parameter to Column and Row](https://github.com/flutter/flutter/issues/55378)

### `Column.spacing` Code sample

<details>
<summary>expand to view the code sample</summary> 

```dart
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.black,
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: DecoratedBox(
              decoration: BoxDecoration(
                  border: Border.all(
                color: Colors.amber,
              )),
              child: const Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Column(
                    spacing: 40.0,
                    // ignore: avoid_redundant_argument_values
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      ColoredBox(
                        color: Color(0xffff0000),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.topCenter,
                            child: Text(
                              'RED',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff00ff00),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Center(
                            child: Text(
                              'GREEN',
                              style: TextStyle(color: Colors.black),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff0000ff),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.bottomCenter,
                            child: Text(
                              'BLUE',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  Column(
                    spacing: 40.0,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      ColoredBox(
                        color: Color(0xffff0000),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.topCenter,
                            child: Text(
                              'RED',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff00ff00),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Center(
                            child: Text(
                              'GREEN',
                              style: TextStyle(color: Colors.black),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff0000ff),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.bottomCenter,
                            child: Text(
                              'BLUE',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  Column(
                    spacing: 40.0,
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      ColoredBox(
                        color: Color(0xffff0000),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.topCenter,
                            child: Text(
                              'RED',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff00ff00),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Center(
                            child: Text(
                              'GREEN',
                              style: TextStyle(color: Colors.black),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff0000ff),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.bottomCenter,
                            child: Text(
                              'BLUE',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  Column(
                    spacing: 40.0,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      ColoredBox(
                        color: Color(0xffff0000),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.topCenter,
                            child: Text(
                              'RED',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff00ff00),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Center(
                            child: Text(
                              'GREEN',
                              style: TextStyle(color: Colors.black),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff0000ff),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.bottomCenter,
                            child: Text(
                              'BLUE',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  Column(
                    spacing: 40.0,
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: <Widget>[
                      ColoredBox(
                        color: Color(0xffff0000),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.topCenter,
                            child: Text(
                              'RED',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff00ff00),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Center(
                            child: Text(
                              'GREEN',
                              style: TextStyle(color: Colors.black),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff0000ff),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.bottomCenter,
                            child: Text(
                              'BLUE',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  Column(
                    spacing: 40.0,
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      ColoredBox(
                        color: Color(0xffff0000),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.topCenter,
                            child: Text(
                              'RED',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff00ff00),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Center(
                            child: Text(
                              'GREEN',
                              style: TextStyle(color: Colors.black),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff0000ff),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.bottomCenter,
                            child: Text(
                              'BLUE',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}
```

</details>

### Preview

<img width="1072" alt="Screenshot 2024-07-30 at 15 40 59" src="https://github.com/user-attachments/assets/14f21091-9e46-4a58-8552-1379f4ba9216">

### `Row.spacing` Code sample

<details>
<summary>expand to view the code sample</summary> 

```dart
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.black,
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: DecoratedBox(
              decoration: BoxDecoration(
                  border: Border.all(
                color: Colors.amber,
              )),
              child: const Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Row(
                    spacing: 40.0,
                    // ignore: avoid_redundant_argument_values
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      ColoredBox(
                        color: Color(0xffff0000),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.centerLeft,
                            child: Text(
                              'RED',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff00ff00),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Center(
                            child: Text(
                              'GREEN',
                              style: TextStyle(color: Colors.black),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff0000ff),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.centerRight,
                            child: Text(
                              'BLUE',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  Row(
                    spacing: 40.0,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      ColoredBox(
                        color: Color(0xffff0000),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.centerLeft,
                            child: Text(
                              'RED',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff00ff00),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Center(
                            child: Text(
                              'GREEN',
                              style: TextStyle(color: Colors.black),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff0000ff),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.centerRight,
                            child: Text(
                              'BLUE',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  Row(
                    spacing: 40.0,
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      ColoredBox(
                        color: Color(0xffff0000),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.centerLeft,
                            child: Text(
                              'RED',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff00ff00),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Center(
                            child: Text(
                              'GREEN',
                              style: TextStyle(color: Colors.black),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff0000ff),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.centerRight,
                            child: Text(
                              'BLUE',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  Row(
                    spacing: 40.0,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      ColoredBox(
                        color: Color(0xffff0000),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.centerLeft,
                            child: Text(
                              'RED',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff00ff00),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Center(
                            child: Text(
                              'GREEN',
                              style: TextStyle(color: Colors.black),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff0000ff),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.centerRight,
                            child: Text(
                              'BLUE',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  Row(
                    spacing: 40.0,
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: <Widget>[
                      ColoredBox(
                        color: Color(0xffff0000),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.centerLeft,
                            child: Text(
                              'RED',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff00ff00),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Center(
                            child: Text(
                              'GREEN',
                              style: TextStyle(color: Colors.black),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff0000ff),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.centerRight,
                            child: Text(
                              'BLUE',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  Row(
                    spacing: 40.0,
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      ColoredBox(
                        color: Color(0xffff0000),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            alignment: Alignment.centerLeft,
                            child: Text(
                              'RED',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff00ff00),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Center(
                            child: Text(
                              'GREEN',
                              style: TextStyle(color: Colors.black),
                            ),
                          ),
                        ),
                      ),
                      ColoredBox(
                        color: Color(0xff0000ff),
                        child: SizedBox(
                          width: 50.0,
                          height: 75.0,
                          child: Align(
                            child: Text(
                              'BLUE',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

```

</details>

### Preview

<img width="1072" alt="Screenshot 2024-07-30 at 15 39 42" src="https://github.com/user-attachments/assets/717e9f5e-a491-4853-ba74-e72ec7493363">
2024-08-05 16:52:58 +00:00
Victor Sanni
6b73de27bd
Improve CupertinoRadio fidelity (#149703)
Adds the following:

*  Darkens when pressed in light mode
*  Lightens when pressed in dark mode.
* Tests that confirm `CupertinoRadio` is focusable and has correct focus
colors
* Tests that confirm `CupertinoRadio` uses correct default
active/inactive/fill colors
* Same look in disabled vs. enabled states as native macOS:

| Native macOS | Flutter Before | Flutter After | 
--- | --- | --- |
| <img width="50" alt="radio native"
src="https://github.com/flutter/flutter/assets/77553258/27c8c27e-f0dc-4ad7-a8c2-361ae8b437bb">
| <img width="50" alt="flutter radio before"
src="https://github.com/flutter/flutter/assets/77553258/580d9c4b-0f0d-457e-851f-73450738ee16">
| <img width="50" alt="flutter radio after"
src="https://github.com/flutter/flutter/assets/77553258/da6ae21b-87f8-45d8-a2d2-da70ff4853a1">
|

* Same look of an unselected radio button in dark mode as native macOS:

| Native light mode | Flutter before light mode | Flutter after light
mode | Native dark mode | Flutter before dark mode | Flutter after dark
mode
--- | --- | --- | --- | --- | --- |
| <img width="23" alt="native radio light"
src="https://github.com/flutter/flutter/assets/77553258/b52fc18b-e10d-4205-b10b-1536fbbf1ca0">
| <img width="23" alt="flutter radio after light"
src="https://github.com/flutter/flutter/assets/77553258/54294523-8254-479c-b668-77927a8295f1">
| <img width="23" alt="flutter radio light"
src="https://github.com/flutter/flutter/assets/77553258/8472deee-e5ce-4d39-9207-d788ad7f34f4">
| <img width="23" alt="native radio dark"
src="https://github.com/flutter/flutter/assets/77553258/44143099-6ab4-4fb8-8a94-ebb1386022c9">
| <img width="23" alt="flutter radio before dark"
src="https://github.com/flutter/flutter/assets/77553258/3411d9fb-fc7f-4b20-86a5-34fda167d5b9">
| <img width="23" alt="flutter radio dark"
src="https://github.com/flutter/flutter/assets/77553258/39ea3649-142e-43ad-9681-24e1216e0987">
|

## Light mode (with focus highlight)
| Native light mode | Flutter before light mode | Flutter after light
mode |
--- | --- | --- | 
| <img width="70" alt="native radio light mode"
src="https://github.com/user-attachments/assets/914b9f1f-5819-4c5b-8739-8498a72b337f">
| <img width="70" alt="radio flutter focus before"
src="https://github.com/user-attachments/assets/3129fca3-3310-4b2b-bcf3-98aa8f049911">
| <img width="70" alt="radio flutter focus after"
src="https://github.com/user-attachments/assets/7a2089d9-b2b5-4ff0-9db9-444455301146">
|

## Dark mode
| Native dark mode | Flutter before dark mode | Flutter after dark mode
|
--- | --- | --- | 
| <img width="70" alt="native radio dark mode"
src="https://github.com/user-attachments/assets/4da3c055-ce89-4f37-8fcd-d4cbbc4031a0">
| <img width="70" alt="flutter before radio dark mode"
src="https://github.com/user-attachments/assets/36b5f36a-f1d9-4c32-8493-3533a749cf5d">
| <img width="70" alt="flutter radio dark mode after"
src="https://github.com/user-attachments/assets/28828e01-bb2f-4217-9756-2766be3919a6">
|

## Disabled light mode
| Native | Flutter before | Flutter after | 
--- | --- | --- | 
| <img width="120" alt="light disabled radio native"
src="https://github.com/user-attachments/assets/bf6d2561-5dcf-4882-afac-6b639fa949b0">
| <img width="120" alt="Screenshot 2024-07-30 at 3 13 30 PM"
src="https://github.com/user-attachments/assets/3efc978c-fa58-44e8-877a-ea29778ea384">
| <img width="120" alt="light disabled radio flutter after"
src="https://github.com/user-attachments/assets/b2c2e30a-cb8d-40d0-aa6f-75a98caa4829">
|

## Disabled dark mode
| Native | Flutter before | Flutter after | 
--- | --- | --- | 
| <img width="120" alt="dark disabled radio native"
src="https://github.com/user-attachments/assets/feedccc7-9802-4b0c-8038-c9eb771b0eb0">
| <img width="120" alt="Screenshot 2024-07-30 at 3 13 30 PM"
src="https://github.com/user-attachments/assets/6d2f03f7-7216-4850-8c4f-f79ae05bb9da">
| <img width="136" alt="dark disabled radio flutter after"
src="https://github.com/user-attachments/assets/5e03d4fc-4b8e-4518-b429-6bb58f6d988d">
|

`CupertinoRadio` is missing a tristate/mixed state, but [Apple's latest
HIG specs discourages its
use](https://developer.apple.com/design/human-interface-guidelines/toggles#Radio-buttons).

Fixes https://github.com/flutter/flutter/issues/151994

## Pre-launch Checklist

- [x] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [x] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [x] I read and followed the [Flutter Style Guide], including [Features
we expect every widget to implement].
- [x] I signed the [CLA].
- [x] I listed at least one issue that this PR fixes in the description
above.
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [x] 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].

<!-- Links -->
[Contributor Guide]:
https://github.com/flutter/flutter/wiki/Tree-hygiene#overview
[Tree Hygiene]: https://github.com/flutter/flutter/wiki/Tree-hygiene
[test-exempt]:
https://github.com/flutter/flutter/wiki/Tree-hygiene#tests
[Flutter Style Guide]:
https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo
[Features we expect every widget to implement]:
https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo#features-we-expect-every-widget-to-implement
[CLA]: https://cla.developers.google.com/
[flutter/tests]: https://github.com/flutter/tests
[breaking change policy]:
https://github.com/flutter/flutter/wiki/Tree-hygiene#handling-breaking-changes
[Discord]: https://github.com/flutter/flutter/wiki/Chat
[Data Driven Fixes]:
https://github.com/flutter/flutter/wiki/Data-driven-Fixes

---------

Co-authored-by: Kate Lovett <katelovett@google.com>
2024-08-02 18:32:17 -07:00
Greg Spencer
51ed348f3b
Fix handling of iconSize and iconColor defaults for ButtonStyleButton subclasses. (#143501)
## Description

Adds defaults that use tokens to define default `iconSize` and `iconColor` values. Previously, the Material 3 token values for button icon sizes and colors were not being used as defaults when the `ButtonStyleButton.defaultStyleOf` function returned the default values.

Adds tests to make sure appropriate `ButtonStyle` fields are populated when defaultStyle is called on buttons.

Updated documentation for `defaultStyleOf` to indicated that not _all_ fields need to be non-null, since some fields make sense to be null (e.g. `fixedSize`) because they would otherwise override the behavior of other fields in the same `ButtonStyle`.

## Tests
 - Added tests to make sure that the appropriate fields are non-null in the default button styles for each type of button.
2024-08-02 23:31:07 +00:00