Repository: flutter
Issue: AppBar repainting happens abruptly.
Labels: c: new feature,framework,f: material design,c: proposal,P3,team-design,triaged-design

#91605
#92093

Repainting the AppBar from surfaceColor to backgroundColor and vice versa happens abruptly when scrolling. But if you add the Shape property to the AppBar, then the repainting will be great. I think that such repainting should be the default, because it looks more attractive.

## Uses cases
First use case with Shape:

https://user-images.githubusercontent.com/102767277/202495702-557d7cea-f335-4431-bf16-bcb879f6945c.mp4

```dart
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(
      title: 'Test AppBar',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        brightness: Brightness.light,
        useMaterial3: true,
        colorSchemeSeed: Color(0x6750A4),
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        useMaterial3: true,
        colorSchemeSeed: Color(0x6750A4),
      ),
      home: IterableList(),
    );
  }
}

class IterableList extends StatelessWidget {
  const IterableList({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Small TopAppBar'),
        leadingWidth: 40.0,
        leading: Padding(
          padding: EdgeInsets.only(left: 7),
          child: IconButton(
            onPressed: () {},
            icon: Icon(Icons.menu_outlined),
          ),
        ),
        actions: [
          IconButton(onPressed: () {}, icon: Icon(Icons.favorite)),
          IconButton(onPressed: () {}, icon: Icon(Icons.favorite)),
        ],
        shape: Border.all(color: Colors.transparent),
      ),
      body: ListView.builder(
        itemCount: 76,
        itemBuilder: (context, index) {
          return Padding(
            padding: EdgeInsets.only(left: 15, bottom: 6),
            child: Text(index.toString(), style: TextStyle(fontSize: 16)),
          );
        },
      ),
    );
  }
}
```

Second use case without Shape:

https://user-images.githubusercontent.com/102767277/202495985-ed1c68e1-b0b2-4150-856b-d507904166c4.mp4

```
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(
      title: 'Test AppBar',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        brightness: Brightness.light,
        useMaterial3: true,
        colorSchemeSeed: Color(0x6750A4),
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        useMaterial3: true,
        colorSchemeSeed: Color(0x6750A4),
      ),
      home: IterableList(),
    );
  }
}

class IterableList extends StatelessWidget {
  const IterableList({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Small TopAppBar'),
        leadingWidth: 40.0,
        leading: Padding(
          padding: EdgeInsets.only(left: 7),
          child: IconButton(
            onPressed: () {},
            icon: Icon(Icons.menu_outlined),
          ),
        ),
        actions: [
          IconButton(onPressed: () {}, icon: Icon(Icons.favorite)),
          IconButton(onPressed: () {}, icon: Icon(Icons.favorite)),
        ],
      ),
      body: ListView.builder(
        itemCount: 76,
        itemBuilder: (context, index) {
          return Padding(
            padding: EdgeInsets.only(left: 15, bottom: 6),
            child: Text(index.toString(), style: TextStyle(fontSize: 16)),
          );
        },
      ),
    );
  }
}
```

## Proposal
Make AppBar recoloring smooth by default, as shown in the Shape example, so you don't have to use Shape later on to achieve this effect.