Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cannot change border of SegmentedButton via SegmentedButtonThemeData #155222

Closed
Mr-Pepe opened this issue Sep 15, 2024 · 4 comments
Closed

Cannot change border of SegmentedButton via SegmentedButtonThemeData #155222

Mr-Pepe opened this issue Sep 15, 2024 · 4 comments
Labels
f: material design flutter/packages/flutter/material repository. found in release: 3.24 Found to occur in 3.24 found in release: 3.26 Found to occur in 3.26 framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on r: solved Issue is closed as solved team-design Owned by Design Languages team

Comments

@Mr-Pepe
Copy link

Mr-Pepe commented Sep 15, 2024

Steps to reproduce

  1. flutter create bug
  2. cd bug
  3. Copy the code sample into main.dart
  4. flutter run

Expected results

The segmented button has a red border with a width of 5 and a radius of 10.

Actual results

The segmented button only has a radius of 10. The provided BorderSide does not get applied.

Code sample

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(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ).copyWith(
          segmentedButtonTheme: SegmentedButtonThemeData(
              style: SegmentedButton.styleFrom(
        shape: RoundedRectangleBorder(
          side: const BorderSide(color: Colors.red, width: 5),
          borderRadius: BorderRadius.circular(10),
        ),
      ))),
      home: Scaffold(
          body: Center(
        child: SegmentedButton(segments: const [
          ButtonSegment(
            value: true,
            label: Text("First"),
          ),
          ButtonSegment(
            value: false,
            label: Text("Second"),
          )
        ], selected: const {
          true
        }),
      )),
    );
  }
}

Screenshots or Video

No response

Logs

No response

Flutter Doctor output

Doctor output 
[✓] Flutter (Channel stable, 3.24.1, on Arch Linux 6.10.9-arch1-2, locale en_US.UTF-8)
    • Flutter version 3.24.1 on channel stable at /home/felipe/snap/flutter/common/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5874a72aa4 (4 weeks ago), 2024-08-20 16:46:00 -0500
    • Engine revision c9b9d5780d
    • Dart version 3.5.1
    • DevTools version 2.37.2

[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0-rc2)
    • Android SDK at /home/felipe/Android/Sdk/
    • Platform android-35, build-tools 35.0.0-rc2
    • ANDROID_HOME = ~/Android/Sdk
    • Java binary at: /home/felipe/Applications/android-studio/jbr/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.11+0-17.0.11b1207.24-11852314)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • CHROME_EXECUTABLE = chromium

[✓] Linux toolchain - develop for Linux desktop
    • clang version 10.0.0-4ubuntu1
    • cmake version 3.16.3
    • ninja version 1.10.0
    • pkg-config version 0.29.1

[✓] Android Studio (version 2024.1)
    • Android Studio at /home/felipe/Applications/android-studio
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.11+0-17.0.11b1207.24-11852314)

[✓] Connected device (3 available)
    • Pixel 8 (mobile) • 3A101FDJH00722 • android-arm64  • Android 14 (API 34)
    • Linux (desktop)  • linux          • linux-x64      • Arch Linux 6.10.9-arch1-2
    • Chrome (web)     • chrome         • web-javascript • Chromium 128.0.6613.137 Arch Linux

[✓] Network resources
    • All expected network resources are available.

• No issues found!
@danagbemava-nc danagbemava-nc added the in triage Presently being triaged by the triage team label Sep 16, 2024
@danagbemava-nc
Copy link
Member

Reproducible using the code sample provided above.

flutter doctor -v 
[✓] Flutter (Channel stable, 3.24.3, on macOS 14.6.1 23G93 darwin-arm64, locale en-US)
    • Flutter version 3.24.3 on channel stable at /Users/deanli/dev/stable
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 2663184aa7 (5 days ago), 2024-09-11 16:27:48 -0500
    • Engine revision 36335019a8
    • Dart version 3.5.3
    • DevTools version 2.37.3

[!] Flutter (Channel master, 3.26.0-1.0.pre.129, on macOS 14.6.1 23G93 darwin-arm64, locale en-US)
    • Flutter version 3.26.0-1.0.pre.129 on channel master at /Users/deanli/dev/master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b4903228eb (7 hours ago), 2024-09-15 22:29:13 -0400
    • Engine revision 9aaea5a4bd
    • Dart version 3.6.0 (build 3.6.0-255.0.dev)
    • DevTools version 2.40.0-dev.1

@danagbemava-nc danagbemava-nc added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. has reproducible steps The issue has been confirmed reproducible and is ready to work on team-design Owned by Design Languages team found in release: 3.24 Found to occur in 3.24 found in release: 3.26 Found to occur in 3.26 and removed in triage Presently being triaged by the triage team labels Sep 16, 2024
@ayyoub-coder
Copy link

Cause:

The issue arises from how the shape property is being used within SegmentedButton.styleFrom. The shape parameter is only responsible for defining the overall shape (such as borderRadius). However, BorderSide properties (like color and width) are not applied through shape. Instead, side should be explicitly set at the style level using the side parameter of ButtonStyle, rather than inside RoundedRectangleBorder.

Solution:

To achieve the desired result (a segmented button with a red border, 5px width, and 10px radius), the side parameter needs to be applied correctly in SegmentedButton.styleFrom. Here’s how you can update the code:

    theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ).copyWith(
        segmentedButtonTheme: SegmentedButtonThemeData(
          style: SegmentedButton.styleFrom(
            side: const BorderSide(color: Colors.red, width: 5), // Explicitly set the border side here
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10), // Keep the radius here
            ),
          ),
        ),
      ),

@Mr-Pepe
Copy link
Author

Mr-Pepe commented Sep 20, 2024

That works, indeed.

It's also the answer to a similar question for OutlinedButton: https://stackoverflow.com/questions/57874576/how-to-change-outlinedbutton-border-color

I'm personally fine with this answer and don't need anything further from this issue but it's not a very intuitive API. Maybe the button should take the BorderSide from shape.side, unless it is defined on the style level? But that probably breaks all sorts of current behaviors. In general, quoting the Zen of Python:

There should be one-- and preferably only one --obvious way to do it.

Feel free to re-open if someone sees the need for further action.

@Mr-Pepe Mr-Pepe closed this as completed Sep 20, 2024
@danagbemava-nc danagbemava-nc added the r: solved Issue is closed as solved label Sep 20, 2024
@github-actions GitHub Actions
Copy link

github-actions bot commented Oct 4, 2024

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Oct 4, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
f: material design flutter/packages/flutter/material repository. found in release: 3.24 Found to occur in 3.24 found in release: 3.26 Found to occur in 3.26 framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on r: solved Issue is closed as solved team-design Owned by Design Languages team
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Mr-Pepe @ayyoub-coder @danagbemava-nc