Skip to content

AppBar back button focus/hover circle should not fill up whole height #141361

@parlough

Description

@parlough

Steps to reproduce

  1. Set up two screens with an AppBar and add a way to navigate to the other one
  2. Run the app. (I tried macOS, CanvasKit, and skwasm)
  3. Navigate to the second page
  4. Hover over the automatic back button in the top app bar
  5. Notice its hover circle fills up the whole height rather than have a consistent hover target

Expected results

The circle from hovering over the back button wouldn't fill up the entire height of the app bar, nor expand when the height increases.

Actual results

The back button hover circle fills up the entire height of the app bar, both with the default height and at increased heights. See screenshots below for reference.

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: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home screen'),
        elevation: 8,
        toolbarHeight: 96,
      ),
      body: Center(
        child: TextButton(
          child: const Text('Go to other screen'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (BuildContext context) => const SecondScreen(),
              ),
            );
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  const SecondScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Other screen'),
        elevation: 8,
        toolbarHeight: 96,
      ),
      body: const Center(
        child: Text(
          'Other screen content',
        ),
      ),
    );
  }
}

Screenshots

Screenshots

Fill up whole height (default height):
Example of back button expanding to default appbar height

Fill up whole height (expanded height):
Example of back button expanding to full appbar height

Expected behavior:
Expected shape of hover circle

Flutter version info

Version
Flutter 3.19.0-3.0.pre.43 • channel main • https://github.com/flutter/flutter
Framework • revision f961fdf2ba (4 hours ago) • 2024-01-10 17:37:07 -0500
Engine • revision a045134c91
Tools • Dart 3.4.0 (build 3.4.0-14.0.dev) • DevTools 2.31.0

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work listf: material designflutter/packages/flutter/material repository.found in release: 3.16Found to occur in 3.16found in release: 3.18Found to occur in 3.18frameworkflutter/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

Projects

Status

Done (PR merged)

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions