Skip to content

Cannot touch widget behind a (transparent & unelevated) AppBar when extendBodyBehindAppBar is true #101248

@monkeyswarm

Description

@monkeyswarm

Internal: b/261125917

Steps to Reproduce

  1. Execute flutter run on the code sample
  2. Attempt to tap the button which is behind the transparent & unelevated AppBar

Expected results:
Button accepts tap

Actual results:
Button does not accept tap

Reason:
AppBar uses a Material widget (app_bar.dart line 1060) with an unspecified MaterialType, which defaults to MaterialType.canvas. Material widgets absorb touches unless the type is MaterialType.transparency.

Suggestion:
If the AppBar's elevation is zero and background color is transparent, then set the Material within the AppBar to type = MaterialType.transparency. This allows touches to pass through instead of being absorbed.

I will create a PR for this, but am open to any other strategies (e.g. an explicit parameter on AppBar).

Code sample
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      home: Scaffold(
        extendBodyBehindAppBar: true,
        appBar: AppBar(
          title: Text('I am an app bar'),
          backgroundColor: Color(0x00000000),
          elevation: 0,
        ),
        body: Align(
            alignment: Alignment.topCenter,
            child: ElevatedButton(
                onPressed: () => print('tap!'), child: Text('tap me'))),
      ),
    );
  }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions