ToggleButtons with MaterialTapTargetSize.padded and height constrained to 32

This issue corresponds to Google internal issue b/204226713. It does not need additional triage.

The ToggleButtons height has been constrained to 32 but the input area has been padded, per MaterialTapTargetSIze.padded, to 48. The Toggle button has been wrapped in a green Container to highlight the input padding.

Code sample

import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  const Home({ Key? key }) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  int selectedTabIndex = 0;

  @override
  Widget build(BuildContext context) {
    final ColorScheme colorScheme = Theme.of(context).colorScheme;
    return Scaffold(
      body: Center(
        child: Container(
          color: Colors.green.withOpacity(0.15),
          child: ToggleButtons(
            tapTargetSize: MaterialTapTargetSize.padded,
            isSelected: [
              selectedTabIndex == 0,
              selectedTabIndex == 1,
            ],
            onPressed: (int index) {
              setState(() { selectedTabIndex = index; });
            },
            borderRadius: const BorderRadius.all(Radius.circular(8)),
            selectedBorderColor: colorScheme.primary,
            selectedColor: colorScheme.primary,
            constraints: const BoxConstraints.tightFor(
              width: 86,
              height: 32,
            ),
            children: [
              Text('Locks'),
              Text('Unlocks'),
            ],
          ),
        ),
      ),
    );
  }
}
void main() {
  runApp(const MaterialApp(home: Home()));
}

I think I've figure out the problem. In #93259 you're padding around each button, but you're not creating a new SemanticsNode for the padding. In contrast, ButtonStyleButton wraps its _InputPadding widget in a Semantics widget so that the SemanticsNode has the larger size. In the case of ToggleButtons, this should in theory be solvable by wrapping the _InputPadding widget in a MergedSemantics. Unfortunately, it looks like ToggleButtons wraps the whole group of individual buttons in _InputPadding as opposed to each individual button, so adding MergedSemantics is not trivial.

Reopening as the change is being reverted

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.

Navigation Menu

Repository navigation

ToggleButtons with MaterialTapTargetSize.padded and height constrained to 32 #97302

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

ToggleButtons with MaterialTapTargetSize.padded and height constrained to 32 #97302

Description

Activity

math1man commented on Jan 26, 2022

Piinks commented on Apr 7, 2022

github-actions commented on May 11, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions