Add `SegmentedButton.styleFrom` #137542

AcarFurkan · 2023-10-30T15:05:09Z

SegmentedButtom.styleFrom has been added to the segment button, so there is no longer any need to the button style from the beginning. It works like ElevatedButton.styleFrom only I added selectedForegroundColor, selectedBackgroundColor. In this way, the user will be able to change the color first without checking the MaterialState states. I added tests of the same controls.

#129215 I opened this problem myself, but I was rejected because I handled too many items in a PR. For now, I wrote a structure that only handles MaterialStates instead of users.

old (still avaliable)

new (just an option for developer)

Code sample

expand to view the code sample

import 'package:flutter/material.dart';

/// Flutter code sample for [SegmentedButton].

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

enum Calendar { day, week, month, year }

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

  @override
  State<SegmentedButtonApp> createState() => _SegmentedButtonAppState();
}

class _SegmentedButtonAppState extends State<SegmentedButtonApp> {
  Calendar calendarView = Calendar.day;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: Scaffold(
        body: Center(
          child: SegmentedButton<Calendar>(
            style: SegmentedButton.styleFrom(
              foregroundColor: Colors.amber,
              visualDensity: VisualDensity.comfortable,
            ),
            // style: const ButtonStyle(
            //   foregroundColor: MaterialStatePropertyAll<Color>(Colors.deepPurple),
            //   visualDensity: VisualDensity.comfortable,
            // ),
            segments: const <ButtonSegment<Calendar>>[
              ButtonSegment<Calendar>(
                  value: Calendar.day,
                  label: Text('Day'),
                  icon: Icon(Icons.calendar_view_day)),
              ButtonSegment<Calendar>(
                  value: Calendar.week,
                  label: Text('Week'),
                  icon: Icon(Icons.calendar_view_week)),
              ButtonSegment<Calendar>(
                  value: Calendar.month,
                  label: Text('Month'),
                  icon: Icon(Icons.calendar_view_month)),
              ButtonSegment<Calendar>(
                  value: Calendar.year,
                  label: Text('Year'),
                  icon: Icon(Icons.calendar_today)),
            ],
            selected: <Calendar>{calendarView},
            onSelectionChanged: (Set<Calendar> newSelection) {
              setState(() {
                calendarView = newSelection.first;
              });
            },
          ),
        ),
      ),
    );
  }
}

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.

AcarFurkan · 2023-10-30T16:40:08Z

hi, @TahaTesser #137430 in this pr you gave me suggestions. l followed them. but l took errors again. l could not understand sorry.

TahaTesser · 2023-11-08T16:06:07Z

it seems there are a bunch of errors in this PR. Can you please take a look at the errors and fix them?

See
https://logs.chromium.org/logs/flutter/buildbucket/cr-buildbucket/8765795303426198961/+/u/Analyze/analyze/test_stdout

AcarFurkan · 2023-11-09T11:59:08Z

Hi, @TahaTesser probably mission completed :)

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

TahaTesser · 2023-11-10T14:59:57Z

@AcarFurkan
Great job up updating the PR. Provided some reviews.

TahaTesser · 2023-11-10T15:03:28Z

Can you please link an issue this PR fixes? If it doesn't exist, please file an issue and link it in the PR description.

AcarFurkan · 2023-11-11T08:37:43Z

#138289 This is a feature request and I'm adding it.

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

packages/flutter/test/material/segmented_button_theme_test.dart

TahaTesser · 2023-11-14T13:10:30Z

Looks like current tests are just duplications and not necessarily testing styleFrom itself. Removing these tests

AcarFurkan · 2023-11-14T14:12:50Z

You asked me for a test for this in another thread, so I added all the tests.

TahaTesser · 2023-11-14T14:41:22Z

You asked me for a test for this in another thread, so I added all the tests.

Since this is one of your first PRs. I'm writing tests for you. i will comment it soon.

AcarFurkan · 2023-11-14T15:13:58Z

Oh thank you so much, I can help you if you give me a clue.

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

TahaTesser

With my suggestions applied and after adding SegmentedButton.styleFrom specific test this looks ready
LGTM!

AcarFurkan · 2023-11-14T20:18:38Z

@TahaTesser This is my first contribution to flutter, what do you think? And thank you so much for your concern :)

HansMuller

I haven't had a chance to review this carefully yet but at first blush it looks good. Can you include the example (and an example test)? The calendar example you've provided should work although you might want to configure a pair of of foo/disabledFoo properties just to amplify the idea.

AcarFurkan · 2023-11-16T11:39:04Z

hi @HansMuller, I'm sorry I didn't understand exactly what you wanted. I added such an example.
https://github.com/AcarFurkan/segmented_button_example and
I added almost the same test as "SegmentedButton.styleFrom is applied to the SegmentedButton" l just added
multiSelectionEnabled: true

TahaTesser · 2023-11-16T11:55:35Z

@AcarFurkan
Is there a reason you added add test for multi selection?

It doesn't look necessary. The test added is sufficient to test SegmentedButton.styleFrom

packages/flutter/test/material/segmented_button_test.dart

AcarFurkan · 2023-11-16T11:58:31Z

hans said "Can you include the example (and an example test)?" l don't understand actually what he wants. if you want l can remove

AcarFurkan · 2023-11-16T12:00:12Z

hi @TahaTesser if you understand, can you explain what he wants? l added an example is it enough

TahaTesser · 2023-11-16T12:02:39Z

hans said "Can you include the example (and an example test)?" l don't understand actually what he wants.

Feel free to ask. The test you added is a duplication of the existing, without any relevance.

Hans asked if you can add example and example test (not the widget test).
The examples and their tests are located here https://github.com/flutter/flutter/tree/master/examples/api

AcarFurkan · 2023-11-16T12:09:42Z

ah thank you but l can not call styleFrom method here because this file
import 'package:flutter/material.dart';
path:
/Users/furkanacar/flutter-projects/remotef/flutter/examples/api/lib/material/segmented_button/

TahaTesser · 2023-11-20T15:00:40Z

You should be able to use SegmentedButton.styleFrom locally when you clone your forked Flutter repository.
Make sure to execute flutter pub get in the examples/api app.

AcarFurkan · 2023-12-07T11:24:47Z

awesome let's wait then @TahaTesser thanks for everything :)

HansMuller

This is looking good, just some minor feedback.

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

examples/api/lib/material/segmented_button/segmented_button.1.dart

HansMuller · 2023-12-07T17:10:19Z

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

Could this have been written in terms of ButtonStyle.styleFrom()? If there are any differences you could write something like return ButtonStyle.styleFrom(...).copyWith(...)

@AcarFurkan seems to be lost so I've addressed this feedback.

Added TextButton.styleFrom with .copyWith for background, foreground, and overlay color.

HansMuller · 2023-12-07T17:17:06Z

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

I don't think it's a good idea to duplicate aspects of _M3Defaults here; we want this stuff to change automatically when we regenerate _M3Defaults. Adding methods to the _M3Defaults template is OK. When you do be sure to explain the use cases in comments.

Great idea. I added a static function in _M3Defaults which uses the tokens to return color with opacity in the selected and unselected states.

TahaTesser · 2023-12-18T12:40:19Z

@AcarFurkan
Please address the feedback from Hans and reply to the comments, mention if you addressed the provided feedback.

AcarFurkan · 2023-12-18T14:40:52Z

I solved 4 of them, but I couldn't understand the remaining 2. @HansMuller If you have the time, can you give some details for the 2 that I can't figure out?

AcarFurkan · 2023-12-24T07:17:58Z

@TahaTesser @HansMuller hii, I know you are very busy and I am sorry to bother you, but there are two feedbacks that I cannot solve, if you can explain them, I will solve them. I would be very happy if you get back to me when you are available. thank you :)

Revert "added SegmentedButton.stylefrom to SegmentedButton" This reverts commit 34b8696ad759bef8ab577b9751e86b4f342c3acf. reverted commit and fix string problems Refactor: deleting custom deprecated messages Update packages/flutter/lib/src/material/segmented_button.dart update documentation Co-authored-by: Taha Tesser <[email protected]> Update packages/flutter/lib/src/material/segmented_button.dart remove unnecessary explanations from the documentation Co-authored-by: Taha Tesser <[email protected]> Update packages/flutter/lib/src/material/segmented_button.dart Co-authored-by: Taha Tesser <[email protected]> Update packages/flutter/lib/src/material/segmented_button.dart update _SegmentedButtonDefaultElevation to MaterialStatePropertyAll<double> Co-authored-by: Taha Tesser <[email protected]> Update packages/flutter/lib/src/material/segmented_button.dart delete unnecessary empty lines Co-authored-by: Taha Tesser <[email protected]> Update packages/flutter/lib/src/material/segmented_button.dart Co-authored-by: Taha Tesser <[email protected]> Refactor: changing overlay opacity values according to m3 Update packages/flutter/lib/src/material/segmented_button.dart Update packages/flutter/test/material/segmented_button_theme_test.dart Update packages/flutter/test/material/segmented_button_theme_test.dart Update packages/flutter/test/material/segmented_button_theme_test.dart Update packages/flutter/test/material/segmented_button_theme_test.dart Update packages/flutter/lib/src/material/segmented_button.dart Update packages/flutter/lib/src/material/segmented_button.dart Update packages/flutter/lib/src/material/segmented_button.dart Update packages/flutter/lib/src/material/segmented_button.dart Add test add test for multi selection Update packages/flutter/test/material/segmented_button_test.dart style added to segmented_button example and added test to segmented button added license header buttonStyle instance moved to outside of button widget moving example and test to right file Refactor: minimize example Update packages/flutter/lib/src/material/segmented_button.dart Co-authored-by: Taha Tesser <[email protected]> Update examples/api/lib/material/segmented_button/segmented_button.1.dart Co-authored-by: Taha Tesser <[email protected]> Update examples/api/lib/material/segmented_button/segmented_button.1.dart Co-authored-by: Taha Tesser <[email protected]> Fix example and update test Fix documentation Update examples/api/lib/material/segmented_button/segmented_button.1.dart Co-authored-by: Hans Muller <[email protected]> Refactor: adding tool snippet Refactor: example link added Refactor: shortened the example Refactor: ButtonStyle updated to ButtonStyle.styleFrom Refactor: Buttonstyle.from json to Buttonstyle

Address comments

TahaTesser · 2024-01-02T15:32:39Z

@HansMuller Please take a look the address review commit c690ee1

HansMuller · 2024-01-02T19:16:38Z

@HansMuller Please take a look the address review commit c690ee1

Your changes LGTM. This PR appears to be ready to land.

TahaTesser

LGTM

HansMuller

LGTM

Manual roll Flutter from 11def8e to cc40425 (118 revisions) Manual roll requested by [email protected] flutter/flutter@11def8e...cc40425 2024-01-05 [email protected] Roll Flutter Engine from 0bbb4d61ce82 to f60d9a9a3395 (1 revision) (flutter/flutter#140993) 2024-01-04 [email protected] Roll Flutter Engine from b2a9ce88a19e to 0bbb4d61ce82 (3 revisions) (flutter/flutter#140990) 2024-01-04 [email protected] [web] Fix and unskip a few more CanvasKit tests (flutter/flutter#140821) 2024-01-04 [email protected] Roll Flutter Engine from bd175aa5e0b6 to b2a9ce88a19e (1 revision) (flutter/flutter#140986) 2024-01-04 [email protected] Pin package:vm_service (flutter/flutter#140972) 2024-01-04 [email protected] Add scrollbar for menus (flutter/flutter#140941) 2024-01-04 [email protected] manual pub roll to pick up dds fixes (flutter/flutter#140979) 2024-01-04 [email protected] Roll Flutter Engine from b81023eb71c9 to bd175aa5e0b6 (2 revisions) (flutter/flutter#140980) 2024-01-04 [email protected] Temporarily remove env variable for leak tracking bots. (flutter/flutter#140978) 2024-01-04 [email protected] Add Flutter CI status to README (flutter/flutter#140513) 2024-01-04 [email protected] Reland "integrate testWidgets with leak tracking" (#140521) (flutter/flutter#140928) 2024-01-04 [email protected] Run half of iOS devicelab tests with Xcode 15 (flutter/flutter#140927) 2024-01-04 [email protected] Fix `SegmentedButton` states update logic (flutter/flutter#140772) 2024-01-04 [email protected] Roll Flutter Engine from f539acfb8c5a to b81023eb71c9 (1 revision) (flutter/flutter#140973) 2024-01-04 [email protected] [Fix] Consistency in ButtonStyleButton related Tests (flutter/flutter#140610) 2024-01-04 [email protected] Roll Packages from bbb4134 to 31fc7b5 (6 revisions) (flutter/flutter#140967) 2024-01-04 [email protected] Fix local engine use in macOS plugins (flutter/flutter#140222) 2024-01-04 [email protected] Roll Flutter Engine from 7d5a120a601b to f539acfb8c5a (2 revisions) (flutter/flutter#140959) 2024-01-04 [email protected] Roll Flutter Engine from 1ff3cb885842 to 7d5a120a601b (1 revision) (flutter/flutter#140946) 2024-01-04 [email protected] Roll Flutter Engine from c8bf51f0d4cd to 1ff3cb885842 (1 revision) (flutter/flutter#140943) 2024-01-04 [email protected] Roll Flutter Engine from bfd2d8a100ec to c8bf51f0d4cd (2 revisions) (flutter/flutter#140939) 2024-01-04 [email protected] Roll Flutter Engine from 28ae9e35c331 to bfd2d8a100ec (1 revision) (flutter/flutter#140937) 2024-01-04 [email protected] Roll Flutter Engine from ab4098c742f8 to 28ae9e35c331 (1 revision) (flutter/flutter#140936) 2024-01-04 [email protected] Roll Flutter Engine from e169f3677008 to ab4098c742f8 (2 revisions) (flutter/flutter#140933) 2024-01-03 [email protected] Roll Flutter Engine from 7c2adb811059 to e169f3677008 (1 revision) (flutter/flutter#140929) 2024-01-03 [email protected] Remove deprecated bitcode stripping from tooling (flutter/flutter#140903) 2024-01-03 [email protected] Add Windows leak tracking targets (flutter/flutter#140423) 2024-01-03 [email protected] [github actions] refactor and fix cherry pick actions (flutter/flutter#140499) 2024-01-03 [email protected] Migrate Xcode projects last version checks to Xcode 15.1 (flutter/flutter#140256) 2024-01-03 [email protected] Roll Flutter Engine from bf232c4da241 to 7c2adb811059 (3 revisions) (flutter/flutter#140920) 2024-01-03 [email protected] fix typo and reflow (flutter/flutter#140925) 2024-01-03 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Re-land integrate testWidgets with leak tracking." (flutter/flutter#140926) 2024-01-03 [email protected] Roll Flutter Engine from bf979d220283 to bf232c4da241 (1 revision) (flutter/flutter#140915) 2024-01-03 [email protected] Changes the regular cursor to a floating cursor when a long press occurs. (flutter/flutter#138479) 2024-01-03 [email protected] Add `SegmentedButton.styleFrom` (flutter/flutter#137542) 2024-01-03 [email protected] Roll Flutter Engine from c62bcff5b809 to bf979d220283 (1 revision) (flutter/flutter#140910) 2024-01-03 [email protected] Re-land integrate testWidgets with leak tracking. (flutter/flutter#140521) 2024-01-03 [email protected] Roll Flutter Engine from 98b72c7ffe71 to c62bcff5b809 (2 revisions) (flutter/flutter#140905) 2024-01-03 [email protected] [flutter_tools] add support for --enable-impeller to test device. (flutter/flutter#140899) 2024-01-03 [email protected] Roll Flutter Engine from cf7536964a2f to 98b72c7ffe71 (1 revision) (flutter/flutter#140897) 2024-01-03 [email protected] Handle KEYCODE_DPAD_CENTER and KEYCODE_ENTER (flutter/flutter#140808) 2024-01-03 [email protected] Add Lucas Saudon to AUTHORS (flutter/flutter#139965) 2024-01-03 [email protected] Link to wiki page about updating dependencies in each `pubspec.yaml` file (flutter/flutter#140826) 2024-01-03 [email protected] Marks Linux_pixel_7pro native_assets_android to be unflaky (flutter/flutter#140866) ... --------- Co-authored-by: Tarrin Neal <[email protected]>

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

TahaTesser self-requested a review November 8, 2023 16:05

TahaTesser requested changes Nov 10, 2023

View reviewed changes

TahaTesser requested changes Nov 13, 2023

View reviewed changes

packages/flutter/lib/src/material/segmented_button.dart Outdated Show resolved Hide resolved

TahaTesser requested changes Nov 13, 2023

View reviewed changes

packages/flutter/lib/src/material/segmented_button.dart Outdated Show resolved Hide resolved

TahaTesser requested changes Nov 14, 2023

View reviewed changes

TahaTesser approved these changes Nov 14, 2023

View reviewed changes

TahaTesser requested a review from HansMuller November 14, 2023 20:14

HansMuller reviewed Nov 16, 2023

View reviewed changes

TahaTesser requested changes Nov 16, 2023

View reviewed changes

packages/flutter/test/material/segmented_button_test.dart Outdated Show resolved Hide resolved

HansMuller reviewed Dec 7, 2023

View reviewed changes

AcarFurkan requested a review from TahaTesser December 15, 2023 05:15

AcarFurkan requested a review from HansMuller December 18, 2023 14:41

AcarFurkan and others added 2 commits January 2, 2024 12:20

Address review comments

c690ee1

Address comments

TahaTesser force-pushed the master branch from 74dcfdb to c690ee1 Compare January 2, 2024 12:07

TahaTesser added 2 commits January 3, 2024 14:08

Fix overlay implementation and add overlay color check

dd6164e

Update template

c6c7df0

TahaTesser approved these changes Jan 3, 2024

View reviewed changes

HansMuller approved these changes Jan 3, 2024

View reviewed changes

HansMuller added the autosubmit Merge PR when tree becomes green via auto submit App label Jan 3, 2024

auto-submit bot merged commit 83ac760 into flutter:master Jan 3, 2024

engine-flutter-autoroll mentioned this pull request Jan 3, 2024

Manual roll Flutter from 11def8eff455 to d0f3777f2b97 (89 revisions) flutter/packages#5792

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jan 3, 2024

83ac760 Add SegmentedButton.styleFrom (flutter/flutter#137542)

ed058d7

engine-flutter-autoroll mentioned this pull request Jan 5, 2024

Manual roll Flutter from 11def8eff455 to cc40425ddcef (118 revisions) flutter/packages#5806

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jan 5, 2024

83ac760 Add SegmentedButton.styleFrom (flutter/flutter#137542)

fcc304d

HansMuller mentioned this pull request Jan 5, 2024

Flutter Framework Team: Notable Commits #121415

Closed

AcarFurkan mentioned this pull request Feb 1, 2024

[Material3] textStyle property for SegmentedButton does not work #140608

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 16, 2024

83ac760 Add SegmentedButton.styleFrom (flutter/flutter#137542)

b4a4cf9

Add SegmentedButton.styleFrom #137542

Add SegmentedButton.styleFrom #137542

Uh oh!

Conversation

AcarFurkan commented Oct 30, 2023 • edited by TahaTesser Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code sample

Pre-launch Checklist

Uh oh!

AcarFurkan commented Oct 30, 2023

Uh oh!

TahaTesser commented Nov 8, 2023

Uh oh!

AcarFurkan commented Nov 9, 2023

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

TahaTesser commented Nov 10, 2023

Uh oh!

TahaTesser commented Nov 10, 2023

Uh oh!

AcarFurkan commented Nov 11, 2023

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

TahaTesser commented Nov 14, 2023

Uh oh!

AcarFurkan commented Nov 14, 2023

Uh oh!

TahaTesser commented Nov 14, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

AcarFurkan commented Nov 14, 2023

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

TahaTesser left a comment

Choose a reason for hiding this comment

Uh oh!

AcarFurkan commented Nov 14, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

HansMuller left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AcarFurkan commented Nov 16, 2023

Uh oh!

TahaTesser commented Nov 16, 2023

Uh oh!

Uh oh!

AcarFurkan commented Nov 16, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

AcarFurkan commented Nov 16, 2023

Uh oh!

TahaTesser commented Nov 16, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

AcarFurkan commented Nov 16, 2023

Uh oh!

TahaTesser commented Nov 20, 2023

Uh oh!

AcarFurkan commented Dec 7, 2023

Uh oh!

HansMuller left a comment

Choose a reason for hiding this comment

Uh oh!

Add `SegmentedButton.styleFrom` #137542

Add `SegmentedButton.styleFrom` #137542

AcarFurkan commented Oct 30, 2023 •

edited by TahaTesser

Loading

TahaTesser commented Nov 14, 2023 •

edited

Loading

AcarFurkan commented Nov 14, 2023 •

edited

Loading

HansMuller left a comment •

edited

Loading

AcarFurkan commented Nov 16, 2023 •

edited

Loading

TahaTesser commented Nov 16, 2023 •

edited

Loading

TahaTesser commented Dec 18, 2023 •

edited

Loading