Help us understand the severity of this issue

• causing severe production issues e.g. malfunctions or data loss
• blocking next binary release
• blocking a client feature launch within a quarter
• nice-to-have but does not block a launch within the next quarter

Steps to reproduce

Not a bug, more like a request for GPay. GPay is doing an app-wide migration to conform to the latest guidelines in go/m3-tone-based-surfaces. However, on auditing, we realised that AppBar() will always use surfaceTint color.

From the code it seems like the default behavior would be applying a tint over background color itself.
Is there any way we can handle the color logic internally within AppBar and allow user to pass in surfaceTint / elevated color if they wish, rather than having to override surfaceTint for all callsites to conform to M3 tonal colors?

Expected results

The recommended guideline is to show surfaceContainer.

• Note: If we override surfaceTint color to transparent, we would get surfaceContainer.

Actual results

• Currently, when we are under scrolledUnderElevation, the color seems to be surface2 (surface + surfaceTint with opacity 0.08) without overriding surfaceTint color on AppBarTheme.

Code sample

import 'package:flutter/material.dart';

void main() => runApp(const AppBarApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AppBarExample(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
    // Override appBarTheme with transparent. If we remove this, we will realise
    // that color is not surfaceContainer.
          surfaceTintColor: Colors.transparent,
          title: const Text('AppBar Demo'),
        ),
        body: SingleChildScrollView(
          child: Container(
            // On scroll should see the two colors are the same.
            color: Theme.of(context).colorScheme.surfaceContainer,
            child: Column(
            children: [
              for (int i = 0; i < 100; i++)
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text('Item $i'),
                )
            ],
          ),
        ),
      ),
    );
  }
}

Screenshots or Video

Logs

Flutter Doctor output