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.

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

Possibility to arrange SegmentedButton vertically #150416

Open
RoarGronmo opened this issue Jun 18, 2024 · 6 comments · May be fixed by #150903
Open

Possibility to arrange SegmentedButton vertically #150416

RoarGronmo opened this issue Jun 18, 2024 · 6 comments · May be fixed by #150903
Assignees
Labels
c: new feature Nothing broken; request for a new capability c: proposal A detailed proposal for a change to Flutter f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. P3 Issues that are less important to the Flutter project team-design Owned by Design Languages team triaged-design Triaged by Design Languages team

Comments

@RoarGronmo
Copy link

Use case

I see that SegmentedButton are only ment to be horizontal, but we often see the need to arrange them vertically.
An example below (snipped from an android/kotlin app):
image

Proposal

Please add a direction parameter in SegmentedButton, which turns the direction of the layout.
...such as this one, actually suggested from Gemini:

import 'package:flutter/material.dart';

// ...

SegmentedButton<int>(
  style: ButtonStyle(
    // Customize the button style for verticalorientation
    padding: MaterialStateProperty.all(EdgeInsets.symmetric(vertical: 12.0, horizontal: 8.0)),
    textStyle: MaterialStateProperty.all(TextStyle(fontSize: 16.0)),
    // Add more styling as needed
  ),
  segments: const <ButtonSegment<int>>[
    ButtonSegment<int>(value: 0, label: Text('Option 1')),
    ButtonSegment<int>(value: 1, label: Text('Option 2')),
    ButtonSegment<int>(value: 2, label: Text('Option 3')),
    // Add more segments as needed
  ],
  selected: <int>{0}, // Set initial selection
  onSelectionChanged: (Set<int> newSelection) {
    // Handle selection changes
    print('Selected segment: ${newSelection.first}');
  },
  direction: Axis.vertical, // Set the direction to vertical
)

image

the call has been forwarded...

@huycozy huycozy added the in triage Presently being triaged by the triage team label Jun 18, 2024
@huycozy
Copy link
Member

huycozy commented Jun 18, 2024

In case we add support for this, there should be design spec accordingly, but it doesn't exist on M3 design as I can see: https://m3.material.io/components/segmented-buttons/specs.

Instead, I see ToggleButtons has direction that you can try to see if it fits your case or not.

@huycozy huycozy added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Jun 18, 2024
@RoarGronmo
Copy link
Author

Could the suggestion be forwarded to the Material team then ?

@github-actions github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Jun 18, 2024
@huycozy
Copy link
Member

huycozy commented Jun 18, 2024

This needs to be triaged by Flutter design team afterward if you think this feature should be added to SegmentedButton. Doesn't ToggleButtons work for your case?

@huycozy huycozy added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Jun 18, 2024
@RoarGronmo
Copy link
Author

RoarGronmo commented Jun 18, 2024 via email

@github-actions github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Jun 18, 2024
@huycozy huycozy added c: new feature Nothing broken; request for a new capability framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. c: proposal A detailed proposal for a change to Flutter team-design Owned by Design Languages team and removed in triage Presently being triaged by the triage team labels Jun 18, 2024
@TahaTesser
Copy link
Member

TahaTesser commented Jun 18, 2024

This sounds reasonable. M3 SegmentedButton supports vertical orientation on Android side.

Preview

@Piinks Piinks added P3 Issues that are less important to the Flutter project triaged-design Triaged by Design Languages team labels Jun 20, 2024
@abdalmonem
Copy link

Please assign me to this.
I already started working on.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
c: new feature Nothing broken; request for a new capability c: proposal A detailed proposal for a change to Flutter f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. P3 Issues that are less important to the Flutter project team-design Owned by Design Languages team triaged-design Triaged by Design Languages team
Projects
None yet
5 participants