# Flutter: “The argument type ‘MyAppBar’ can’t be assigned to the parameter type ‘PreferredSizeWidget?’”

> The argument type can’t be assigned to PreferredSizeWidget: Scaffold.appBar needs a widget with a preferred size. Wrap it in PreferredSize or implement it.

Canonical: https://app369.com/fix/flutter-cant-be-assigned-to-preferredsizewidget/
Last updated: 2026-11-08

Passing your own widget to Scaffold(appBar: …) fails with The argument type ‘MyAppBar’ can’t be assigned to the parameter type ‘PreferredSizeWidget?’. Scaffold.appBar doesn’t take any widget: it takes a PreferredSizeWidget, so the Scaffold knows how tall the app bar wants to be. AppBar and TabBar implement it; a custom StatelessWidget or a Container doesn’t.

**Short answer**

Wrap the widget in PreferredSize with a height: appBar: PreferredSize(preferredSize: const Size.fromHeight(64), child: MyAppBar()). For a reusable custom app bar, have the class implement PreferredSizeWidget and return its size from preferredSize.

## **Why Scaffold rejects the widget, and the fix**

1. 01 ### **A plain widget passed to appBar**
  > “Parents like Scaffold use PreferredSizeWidget to require that their children implement that interface.” [**Flutter, PreferredSize class**](https://api.flutter.dev/flutter/widgets/PreferredSize-class.html) Wrap it in PreferredSize. The height you give is what Scaffold reserves at the top of the screen. PreferredSize adds no status bar padding, so wrap your bar’s content in SafeArea.```
Scaffold(
  appBar: PreferredSize(
    preferredSize: const Size.fromHeight(64),
    child: MyGradientBar(title: title),
  ),
  body: body,
)
```
2. 02 ### **A reusable custom app bar class** Implement PreferredSizeWidget on the widget itself, so every screen can pass it straight to appBar.```
class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
  const MyAppBar({super.key, required this.title});
  final String title;

  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight);

  @override
  Widget build(BuildContext context) => AppBar(title: Text(title));
}
```
3. 03 ### **The same rule in AppBar.bottom** AppBar(bottom: …) also takes a PreferredSizeWidget. A TabBar works as is; anything else, such as a search field, needs PreferredSize too.```
AppBar(
  bottom: PreferredSize(
    preferredSize: const Size.fromHeight(56),
    child: Padding(
      padding: const EdgeInsets.all(8),
      child: SearchField(onChanged: onSearch),
    ),
  ),
)
```

Checked against the vendor’s docs on November 8, 2026: [Flutter API: Scaffold.appBar](https://api.flutter.dev/flutter/material/Scaffold/appBar.html); [Flutter API: PreferredSize](https://api.flutter.dev/flutter/widgets/PreferredSize-class.html).

## **Rather hand it over?**

Fixed scope, fixed price, paid upfront. The work happens in writing; no call needed.

- [from $450**App Fix Ticket**One reproducible bug in an existing mobile or web app, diagnosed and fixed.**See scope and start**](https://app369.com/fixed-price/flutter-firebase-bug-fix/)
- [from $450**AI-Built App Rescue**A Lovable, Bolt or Cursor app checked end to end in 3 days, then its worst problems fixed at a fixed price.****No issues worth fixing, no charge.**** If the Launch Check finds nothing rated medium or higher, Simon refunds the full $450. You keep the report either way. This applies to the first 10 Launch Checks bought after October 30, 2026.**See scope and start**](https://app369.com/fixed-price/ai-app-rescue/)

Related: [**Flutter “A RenderFlex overflowed”**](https://app369.com/fix/flutter-renderflex-overflowed/) · [**Flutter “Invalid constant value”**](https://app369.com/fix/flutter-invalid-constant-value/) · [**Flutter “No MediaQuery widget found”**](https://app369.com/fix/flutter-no-mediaquery-widget-found/) · [**Flutter “The argument type ‘String’ can’t be assigned to the parameter type ‘Uri’”**](https://app369.com/fix/flutter-string-cant-be-assigned-to-uri/)

Questions

## **More on this error**

<details>

<summary>**What height should I use? **+</summary>

kToolbarHeight (56) matches a standard AppBar. Use more only if the custom bar really is taller, otherwise the body starts lower than it looks like it should.

</details>

<details>

<summary>**Can I put the custom bar in body instead? **+</summary>

Yes, in a Column above the content, but then you handle the status bar yourself either way. PreferredSize only tells Scaffold how tall the bar is. It adds no status bar padding, so wrap your bar’s content in SafeArea.

</details>

<details>

<summary>**Can you fix it for me? **+</summary>

If one bug is the whole problem, the App Fix Ticket covers it: a written diagnosis first, then the fix. If the app has more going on, the Launch Check is a written check of the whole app. Each issue found is rated critical, high, medium or low, with where it is and how it was confirmed. No issues worth fixing, no charge. If the Launch Check finds nothing rated medium or higher, Simon refunds the full $450. You keep the report either way. This applies to the first 10 Launch Checks bought after October 30, 2026.

</details>

A different error?

## **Describe it and get a written quote**

Send the error and what you were doing. You get a written scope, a fixed price and a timeline; Simon replies by email, usually within one business day.

[**Describe your problem **→](https://app369.com/contact/) [**All fixes**](https://app369.com/fix/)