Reland "Fix `Chip.shape`'s side is not used when provided in Material 3" #133856

TahaTesser · 2023-09-01T13:25:44Z

fixes Chip border side color not working in Material3
Relands #132941 with an updated fix and a regression test.

expand to view the code sample

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,
      theme: ThemeData(useMaterial3: true),
      home: const Example(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Chips'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            const RawChip(
              shape: RoundedRectangleBorder(
                side: BorderSide(color: Colors.amber),
              ),
              side: BorderSide(color: Colors.red),
              label: Text('RawChip'),
            ),
            const Chip(
              shape: RoundedRectangleBorder(
                side: BorderSide(color: Colors.amber),
              ),
              side: BorderSide(color: Colors.red),
              label: Text('Chip'),
            ),
            ActionChip(
              shape: const RoundedRectangleBorder(
                side: BorderSide(color: Colors.amber),
              ),
              side: const BorderSide(color: Colors.red),
              label: const Text('ActionChip'),
              onPressed: () {},
            ),
            FilterChip(
              shape: const RoundedRectangleBorder(
                side: BorderSide(color: Colors.amber),
              ),
              side: const BorderSide(color: Colors.red),
              label: const Text('FilterChip'),
              onSelected: (value) {},
            ),
            ChoiceChip(
              shape: const RoundedRectangleBorder(
                side: BorderSide(color: Colors.amber),
              ),
              side: const BorderSide(color: Colors.red),
              label: const Text('ChoiceChip'),
              selected: false,
              onSelected: (value) {},
            ),
            InputChip(
              shape: const RoundedRectangleBorder(
                side: BorderSide(color: Colors.amber),
              ),
              side: const BorderSide(color: Colors.red),
              label: const Text('InputChip'),
              onSelected: (value) {},
            ),
          ],
        ),
      ),
    );
  }
}

Pre-launch Checklist

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

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

HansMuller

LGTM

HansMuller · 2023-09-01T20:54:54Z

packages/flutter/lib/src/material/chip.dart

So if I want to specify a shape with no border, then I need to specify both the shape and the side (as BorderSide.none) because specifying a shape with BorderSide.none will cause us to use the default side. I guess that's OK, since the OutlinedBorder classes use BorderSide.none by default. It's a little confusing. A separate PR that clarified this in the API doc might help.

auto-submit · 2023-09-01T22:07:25Z

auto label is removed for flutter/flutter/133856, due to - The status or check suite Google testing has failed. Please fix the issues identified (or deflake) before re-applying this label.

HansMuller · 2023-09-03T23:49:06Z

@TahaTesser

This PR is failing the SuperEditor presubmit test. On the face of it, it doesn't seem related to the change here.

 | 00:34 +1234: C:/b/s/w/ir/x/t/flutter_customer_testing.super_editor.70898aa8/tests/super_editor/test/super_editor/supereditor_scrolling_test.dart: SuperEditor scrolling within an ancestor Scrollable respects horizontal scrolling inside a TabBar (on iOS)
 | 00:34 +1234: C:/b/s/w/ir/x/t/flutter_customer_testing.super_editor.70898aa8/tests/super_editor/test/super_editor/text_entry/links_test.dart: SuperEditor link editing > does not expand the link when inserting before the link (on iOS)
 | ══╡ EXCEPTION CAUGHT BY FLUTTER TEST FRAMEWORK ╞════════════════════════════════════════════════════
 | The following TestFailure was thrown running a test:
 | Expected: given Document has equivalent content to the given markdown
 |   Actual: <Instance of 'MutableDocument'>
 |    Which: is different.
 |           Expected: Go to [www ...
 |             Actual: [www.googl ...
 |                     ^
 |            Differ at offset 0
 |
 | When the exception was thrown, this was the stack:
 | #4      main.<anonymous closure>.<anonymous closure> (file:///C:/b/s/w/ir/x/t/flutter_customer_testing.super_editor.70898aa8/tests/super_editor/test/super_editor/text_entry/links_test.dart:154:7)
 | <asynchronous suspension>
 | #5      testWidgetsOnIos.<anonymous closure> (file:///C:/b/s/w/ir/x/t/flutter_customer_testing.super_editor.70898aa8/tests/super_editor/test/test_tools.dart:424:7)
 | <asynchronous suspension>
 | #6      testWidgets.<anonymous closure>.<anonymous closure> (package:flutter_test/src/widget_tester.dart:168:15)
 | <asynchronous suspension>
 | #7      TestWidgetsFlutterBinding._runTestBody (package:flutter_test/src/binding.dart:1012:5)
 | <asynchronous suspension>
 | <asynchronous suspension>
 | (elided one frame from package:stack_trace)
 |
 | This was caught by the test expectation on the following line:
 |   file:///C:/b/s/w/ir/x/t/flutter_customer_testing.super_editor.70898aa8/tests/super_editor/test/super_editor/text_entry/links_test.dart line 154
 | The test description was:
 |   does not expand the link when inserting before the link (on iOS)
 | ════════════════════════════════════════════════════════════════════════════════════════════════════
 | 00:34 +1234 -1: C:/b/s/w/ir/x/t/flutter_customer_testing.super_editor.70898aa8/tests/super_editor/test/super_editor/supereditor_scrolling_test.dart: SuperEditor scrolling within an ancestor Scrollable respects horizontal scrolling inside a TabBar (on iOS)
 | 00:34 +1234 -1: C:/b/s/w/ir/x/t/flutter_customer_testing.super_editor.70898aa8/tests/super_editor/test/super_editor/text_entry/links_test.dart: SuperEditor link editing > does not expand the link when inserting before the link (on iOS) [E]
 |   Test failed. See exception logs above.
 |   The test description was: does not expand the link when inserting before the link (on iOS)

TahaTesser · 2023-09-04T07:21:59Z

@TahaTesser

This PR is failing the SuperEditor presubmit test. On the face of it, it doesn't seem related to the change here.

Thanks! I will try running this with flutter/test repo locally to confirm.

TahaTesser · 2023-09-04T08:40:30Z

This indeed looks like an outside issue. I see this failure in other PRs.
For instance https://github.com/flutter/flutter/pull/133965/checks?check_run_id=16464555245

TahaTesser · 2023-09-05T15:17:27Z

blocked by #134043

HansMuller · 2023-09-05T15:49:12Z

Hopefully to be unblocked by flutter/tests#294

HansMuller · 2023-09-06T17:30:13Z

The current list of 5000 failures appear to be unrelated to this PR. Checking with the Flutter rollers ...

…Material 3" (flutter/flutter#133856)

Manual roll Flutter from 685ce14 to aea4552 (64 revisions) Manual roll requested by [email protected] flutter/flutter@685ce14...aea4552 2023-09-07 [email protected] add --exit flag to dev/devicelab/bin/test_runner.dart (flutter/flutter#134165) 2023-09-07 [email protected] fix `--exit` flag in dev/devicelab/bin/run.dart (flutter/flutter#134162) 2023-09-07 [email protected] Roll Packages from e7d812c to 22d4754 (9 revisions) (flutter/flutter#134232) 2023-09-07 [email protected] Roll Flutter Engine from 71bea01d3abe to f0b718e28779 (2 revisions) (flutter/flutter#134231) 2023-09-07 [email protected] DropdownRoutePage should dispose the created ScrollController. (flutter/flutter#133941) 2023-09-07 [email protected] Cover some test/widgets tests with leak tracking (flutter/flutter#133803) 2023-09-07 [email protected] SearchDelegate should dispose resources. (flutter/flutter#133948) 2023-09-07 [email protected] Fixed [NavigationRailDestination]'s label opacity while disabled not being coherent with the icon (flutter/flutter#132345) 2023-09-07 [email protected] Roll Flutter Engine from 558136a1ccbf to 71bea01d3abe (2 revisions) (flutter/flutter#134216) 2023-09-07 [email protected] Roll Flutter Engine from 5a45ecd24aa3 to 558136a1ccbf (1 revision) (flutter/flutter#134206) 2023-09-07 [email protected] Roll Flutter Engine from d864ae68db3c to 5a45ecd24aa3 (1 revision) (flutter/flutter#134201) 2023-09-07 [email protected] Fix `TabBar` doesn't use `labelStyle` & `unselectedLabelStyle` color (flutter/flutter#133989) 2023-09-07 [email protected] Fix `DataTable`'s `headingTextStyle` & `dataTextStyle` are not merged with default text style (flutter/flutter#134138) 2023-09-07 [email protected] Roll Flutter Engine from 187c5b3c5f71 to d864ae68db3c (2 revisions) (flutter/flutter#134199) 2023-09-07 [email protected] Reland "Fix `Chip.shape`'s side is not used when provided in Material 3" (flutter/flutter#133856) 2023-09-07 [email protected] Roll Flutter Engine from 75437a3bd002 to 187c5b3c5f71 (1 revision) (flutter/flutter#134193) 2023-09-07 [email protected] Manual roll Flutter Engine from 2c69d05dfafb to 75437a3bd002 (15 revisions) (flutter/flutter#134188) 2023-09-07 [email protected] Revert "Roll Flutter Engine from 2c69d05dfafb to fa14d337449b (6 revisions)" (flutter/flutter#134183) 2023-09-06 49699333+dependabot[bot]@users.noreply.github.com Bump actions/upload-artifact from 3.1.2 to 3.1.3 (flutter/flutter#134173) 2023-09-06 [email protected] Roll Flutter Engine from 2c69d05dfafb to fa14d337449b (6 revisions) (flutter/flutter#134169) 2023-09-06 [email protected] DraggableScrollableActuator should dispose notifier. (flutter/flutter#133917) 2023-09-06 [email protected] Roll Flutter Engine from b04c2a378302 to 2c69d05dfafb (3 revisions) (flutter/flutter#134164) 2023-09-06 [email protected] Clean the fixed TODOs. (flutter/flutter#133859) 2023-09-06 [email protected] Roll Flutter Engine from 839051596b1d to b04c2a378302 (7 revisions) (flutter/flutter#134158) 2023-09-06 [email protected] [Windows Arm64] Also use Windows 11 for Devicelab tests (flutter/flutter#134082) 2023-09-06 [email protected] Fix `subtitleTextStyle.color` isn't applied to the `ListTile.subtitle` in Material 2 (flutter/flutter#133422) 2023-09-06 [email protected] Add `CheckedPopupMenuItem.onTap` callback (flutter/flutter#134000) 2023-09-06 [email protected] MinimumTextContrastGuideline should dispose image. (flutter/flutter#133861) 2023-09-06 [email protected] [flutter_tools] Fix "FormatException: Invalid date format" during version freshness check (flutter/flutter#134088) 2023-09-06 [email protected] Fix not disposed items in Cupertino app and route. (flutter/flutter#134085) 2023-09-06 [email protected] Roll Flutter Engine from a5e7fa6bf81a to 839051596b1d (2 revisions) (flutter/flutter#134140) 2023-09-06 [email protected] _DropdownMenuState should dispose TextEditingController. (flutter/flutter#133914) 2023-09-06 [email protected] Roll Flutter Engine from 5253a33096d1 to a5e7fa6bf81a (1 revision) (flutter/flutter#134137) 2023-09-06 [email protected] Roll Flutter Engine from c7fd088291e2 to 5253a33096d1 (1 revision) (flutter/flutter#134135) 2023-09-06 [email protected] Roll Flutter Engine from 3d9989f1e155 to c7fd088291e2 (1 revision) (flutter/flutter#134132) 2023-09-06 [email protected] Roll Flutter Engine from bace539bb654 to 3d9989f1e155 (3 revisions) (flutter/flutter#134128) 2023-09-06 [email protected] Roll Flutter Engine from 9344685efbc3 to bace539bb654 (1 revision) (flutter/flutter#134104) 2023-09-06 [email protected] Roll Flutter Engine from 0c8c1647dcd0 to 9344685efbc3 (1 revision) (flutter/flutter#134103) 2023-09-06 [email protected] Roll Flutter Engine from 0c663258fd09 to 0c8c1647dcd0 (1 revision) (flutter/flutter#134100) 2023-09-06 [email protected] Roll Flutter Engine from 8bacc3b38707 to 0c663258fd09 (3 revisions) (flutter/flutter#134096) 2023-09-06 [email protected] Roll Flutter Engine from 590349006d23 to 8bacc3b38707 (5 revisions) (flutter/flutter#134089) 2023-09-06 [email protected] Roll Flutter Engine from 5b2cc9d9b8fe to 590349006d23 (2 revisions) (flutter/flutter#134081) 2023-09-05 [email protected] Roll Flutter Engine from 98b036ae708e to 5b2cc9d9b8fe (2 revisions) (flutter/flutter#134080) 2023-09-05 [email protected] Roll Flutter Engine from f4975e04f35e to 98b036ae708e (3 revisions) (flutter/flutter#134077) ...

@HansMuller

…xplain default values for Material 3 (#134298) fixes [Update chip docs for Material 3 defaults.](#134296) Addresses a [comment](#133856 (comment)) from @HansMuller as well

…Material 3" (flutter/flutter#133856)

(#139572) I would like to request an update to the document to resolve confusion. I actually modified the code by applying priority as in the comment in [#139572](#139572) as shown below, but I thought that if 'OutlinedBorder' was used for 'shape', the default value of side for 'OutlinedBorder' was also the developer's intention. ``` OutlinedBorder _getShape(ThemeData theme, ChipThemeData chipTheme, ChipThemeData chipDefaults) { final BorderSide? resolvedSide = MaterialStateProperty.resolveAs<BorderSide?>(widget.side, materialStates) ?? MaterialStateProperty.resolveAs<BorderSide?>(chipTheme.side, materialStates); final BorderSide? resolvedShapeSide = MaterialStateProperty.resolveAs<BorderSide?>(widget.shape?.side, materialStates) ?? MaterialStateProperty.resolveAs<BorderSide?>(chipTheme.shape?.side, materialStates); final OutlinedBorder resolvedShape = MaterialStateProperty.resolveAs<OutlinedBorder?>(widget.shape, materialStates) ?? MaterialStateProperty.resolveAs<OutlinedBorder?>( chipTheme.shape, materialStates) ?? MaterialStateProperty.resolveAs<OutlinedBorder?>(chipDefaults.shape, materialStates) // TODO(tahatesser): Remove this fallback when Material 2 is deprecated. ?? const StadiumBorder(); // If the side is provided, shape uses the provided side. if (resolvedSide != null) { return resolvedShape.copyWith(side: resolvedSide); } if (resolvedShapeSide != null) { return resolvedShape.copyWith(side: resolvedShapeSide); } // If the side is not provided // then the shape's side is used. Otherwise, the default side is used. return resolvedShape.copyWith(side: chipDefaults.side); } ``` (in `chip.dart`) However, (#133856) PR seems to be intended to ignore this and use the aspect of `chipDefault.side` even if the developer specifies `shape.side` as [Border.none] without explicitly applying `side` . This is probably because the default value of OutlinedBorder is [Border.none]. I think this is an area that can cause enough confusion, but there are a lot of things that need to be modified to reduce confusion through code changes, and the impact on existing code is likely to be significant. I also confirmed that this is not accurately explained in the API Docs. So rather than modifying the code, I decided to add additional explanation to the `shape` comment. If the results are different from what you intended or the updated content is strange, please review. ð��

github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Sep 1, 2023

TahaTesser marked this pull request as ready for review September 1, 2023 15:01

TahaTesser requested a review from HansMuller September 1, 2023 15:01

HansMuller approved these changes Sep 1, 2023

View reviewed changes

HansMuller added autosubmit Merge PR when tree becomes green via auto submit App and removed autosubmit Merge PR when tree becomes green via auto submit App labels Sep 1, 2023

HansMuller reviewed Sep 1, 2023

View reviewed changes

HansMuller added the autosubmit Merge PR when tree becomes green via auto submit App label Sep 1, 2023

auto-submit bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Sep 1, 2023

TahaTesser force-pushed the reland_chip_border_side_fix branch from eb664db to 243bccf Compare September 4, 2023 08:24

TahaTesser force-pushed the reland_chip_border_side_fix branch 3 times, most recently from 8d5e040 to 0652eb2 Compare September 6, 2023 14:52

Reland "Fix Chip.shape's side is not used when provided in Material 3"

a46fc18

HansMuller force-pushed the reland_chip_border_side_fix branch from 0652eb2 to a46fc18 Compare September 6, 2023 22:13

TahaTesser added the autosubmit Merge PR when tree becomes green via auto submit App label Sep 7, 2023

auto-submit bot merged commit ded8b8e into flutter:master Sep 7, 2023

TahaTesser deleted the reland_chip_border_side_fix branch September 7, 2023 07:58

engine-flutter-autoroll mentioned this pull request Sep 7, 2023

Roll Flutter from c175cf87a6a3 to bbf5d11aadb4 (111 revisions) flutter/packages#4864

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 7, 2023

ded8b8e Reland "Fix Chip.shape's side is not used when provided in …

522493c

…Material 3" (flutter/flutter#133856)

engine-flutter-autoroll mentioned this pull request Sep 7, 2023

Roll Flutter from c175cf87a6a3 to 6ddb3b04b4fe (112 revisions) flutter/packages#4865

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 7, 2023

ded8b8e Reland "Fix Chip.shape's side is not used when provided in …

5c3658d

…Material 3" (flutter/flutter#133856)

engine-flutter-autoroll mentioned this pull request Sep 7, 2023

Roll Flutter from c175cf87a6a3 to 2867b31f5ed4 (113 revisions) flutter/packages#4867

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 7, 2023

ded8b8e Reland "Fix Chip.shape's side is not used when provided in …

0237abb

…Material 3" (flutter/flutter#133856)

engine-flutter-autoroll mentioned this pull request Sep 7, 2023

Roll Flutter from c175cf87a6a3 to aca91df6b784 (115 revisions) flutter/packages#4868

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 7, 2023

ded8b8e Reland "Fix Chip.shape's side is not used when provided in …

cd3af13

…Material 3" (flutter/flutter#133856)

engine-flutter-autoroll mentioned this pull request Sep 7, 2023

Roll Flutter from c175cf87a6a3 to ea351694fe5b (118 revisions) flutter/packages#4869

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 7, 2023

ded8b8e Reland "Fix Chip.shape's side is not used when provided in …

26ddc25

…Material 3" (flutter/flutter#133856)

engine-flutter-autoroll mentioned this pull request Sep 7, 2023

Manual roll Flutter from 685ce14b2d0f to aea4552acdc7 (64 revisions) flutter/packages#4870

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 7, 2023

ded8b8e Reland "Fix Chip.shape's side is not used when provided in …

a983e53

…Material 3" (flutter/flutter#133856)

TahaTesser mentioned this pull request Sep 8, 2023

Update chip docs to clarify how to specify a shape with no border & explain default values for Material 3 #134298

Merged

8 tasks

HansMuller mentioned this pull request Sep 8, 2023

Flutter Framework Team: Notable Commits #121415

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 15, 2023

ded8b8e Reland "Fix Chip.shape's side is not used when provided in …

5267ef8

…Material 3" (flutter/flutter#133856)

asci-00 mentioned this pull request Dec 13, 2023

[docs] Add document content related to chip shape #140015

Merged

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Reland "Fix `Chip.shape`'s side is not used when provided in Material 3" #133856

Reland "Fix `Chip.shape`'s side is not used when provided in Material 3" #133856

Uh oh!

TahaTesser commented Sep 1, 2023

Uh oh!

HansMuller left a comment

Uh oh!

HansMuller Sep 1, 2023

Uh oh!

auto-submit bot commented Sep 1, 2023

Uh oh!

HansMuller commented Sep 3, 2023 •

edited

Loading

Uh oh!

TahaTesser commented Sep 4, 2023

Uh oh!

TahaTesser commented Sep 4, 2023

Uh oh!

TahaTesser commented Sep 5, 2023

Uh oh!

HansMuller commented Sep 5, 2023

Uh oh!

HansMuller commented Sep 6, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Reland "Fix Chip.shape's side is not used when provided in Material 3" #133856

Reland "Fix Chip.shape's side is not used when provided in Material 3" #133856

Uh oh!

Conversation

TahaTesser commented Sep 1, 2023

Pre-launch Checklist

Uh oh!

HansMuller left a comment

Choose a reason for hiding this comment

Uh oh!

HansMuller Sep 1, 2023

Choose a reason for hiding this comment

Uh oh!

auto-submit bot commented Sep 1, 2023

Uh oh!

HansMuller commented Sep 3, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

TahaTesser commented Sep 4, 2023

Uh oh!

TahaTesser commented Sep 4, 2023

Uh oh!

TahaTesser commented Sep 5, 2023

Uh oh!

HansMuller commented Sep 5, 2023

Uh oh!

HansMuller commented Sep 6, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Reland "Fix `Chip.shape`'s side is not used when provided in Material 3" #133856

Reland "Fix `Chip.shape`'s side is not used when provided in Material 3" #133856

HansMuller commented Sep 3, 2023 •

edited

Loading