Skip to content

Segmented Button tap target size and selected background color not expanded #178901

Description

@detekfitfounder

Steps to reproduce

  1. Create a SegmentedButton with multiple segments.
  2. Wrap it inside a SizedBox(width: double.infinity) to force full-width layout.
  3. Apply SegmentedButton.styleFrom with fixedSize, minimumSize, and maximumSize all set to Size(double.infinity, ...).
  4. Run the app and observe the layout and tap behavior.

Expected results

  • Each segment should expand to fill the full available width.
  • The selected segment’s background should span the full width of its segment.
  • Tap targets should be full-width and match the visual bounds of each segment

Actual results

  • The SegmentedButton expands horizontally, but individual segments do not stretch to fill the width.
  • The selected segment’s background remains narrow and does not span the full width.
  • Tap targets are smaller than expected, making the UI feel misaligned and harder to interact with.

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(
      home: Scaffold(
        body: Center(
          child: SizedBox(
            width: double.infinity,
            child: SegmentedButton<String>(
              direction: Axis.vertical,
              emptySelectionAllowed: false,
              multiSelectionEnabled: false,
              showSelectedIcon: false,
              style: SegmentedButton.styleFrom(
                fixedSize: const Size(double.infinity, 300),
                minimumSize: const Size(double.infinity, 300),
                maximumSize: const Size(double.infinity, double.infinity),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(5),
                  side: const BorderSide(),
                ),
              ),
              segments: const [
                ButtonSegment(value: 'All', label: Text('All')),
                ButtonSegment(value: 'Top free', label: Text('Top free')),
                ButtonSegment(value: 'Top paid', label: Text('Top paid')),
              ],
              selected: const {'All'},
              onSelectionChanged: (newSelection) {
                // dummy test; nothing needed
              },
            ),
          ),
        ),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration Image

Logs

No response

Flutter Doctor output

Doctor output
Doctor summary (to see all details, run flutter doctor -v):
[!] Flutter (Channel stable, 3.35.4, on Microsoft Windows [Version 10.0.26200.7171], locale en-US)
    ! Upstream repository unknown source is not a standard remote.
      Set environment variable "FLUTTER_GIT_URL" to unknown source to dismiss this error.
[√] Windows Version (Windows 11 or higher, 25H2, 2009)
[√] Android toolchain - develop for Android devices (Android SDK version 36.0.0)
[√] Chrome - develop for the web
[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.14.8)
[√] Android Studio (version 2025.1.1)
[√] VS Code, 64-bit edition (version 1.103.2)
[√] Connected device (3 available)
[√] Network resources

! Doctor found issues in 1 category.

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work lista: qualityA truly polished experiencef: material designflutter/packages/flutter/material repository.found in release: 3.38Found to occur in 3.38found in release: 3.39Found to occur in 3.39frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions