The AppBarDesign can't be assigned to the parameter type 'PreferredSizeWidget'

Question

Anyone please give some information why this is happening?

When I try to add a class AppBarDesign which implements appBar flutter is gi

Answer 1

Scaffold requires as appbar a class that implements PreferredSizeWidget

Either wrap your custom appbar into a PreferredSize

Scaffold(
  appBar: PreferredSize(
    preferredSize: const Size.fromHeight(100),
    child: Container(color: Colors.red),
  ),
)

or implement PreferredSizeWidget:

Scaffold(
  appBar: MyAppBar(),
)

...

class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Size get preferredSize => const Size.fromHeight(100);

  @override
  Widget build(BuildContext context) {
    return Container(color: Colors.red);
  }
}

Answer 2

You can also use following way to design your appbar in separate file and then use it in your whole app.

Widget Custom_Appbar(){
  return AppBar(
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(bottom: Radius.circular(20))),
        title: Text(
          'Decimal to Binary & Vice Versa',
          style: TextStyle(fontWeight: FontWeight.w400, fontSize: 19),
        ));
}

And then use it like this

return Scaffold(
      appBar: Custom_Appbar(),
)

Answer 3

helpful tips to implementing that without searching any other topics:

class ApplicationToolbar extends StatelessWidget with PreferredSizeWidget{
  @override
  Widget build(BuildContext context) {
    return AppBar( ... );
  }

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

Answer 4

If you get the error

The argument type x can't be assigned to the parameter type 'PreferredSizeWidget'.

Just wrap x in the PreferredSize widget.

Example:

appBar: AppBar(
    bottom: Column(
              children: <Widget>[
                new TabBar(
                  tabs: [
                    new Tab(icon: new Icon(Icons.directions_car)),
                    new Tab(icon: new Icon(Icons.directions_transit)),
                    new Tab(
                      icon: new Icon(Icons.airplanemode_active),
                    )
                  ],
                ),
              ],
            ),

Here I get the error: The argument type 'Column' can't be assigned to the parameter type 'PreferredSizeWidget'.

Solution:

Click on Column

Click on light bulb

Choose Wrap with Widget

Replace widget with PreferredSize

Add a PreferredSize attribute, such as preferredSize: Size.fromHeight(100.0),

Result:

appBar: AppBar(
     bottom: PreferredSize(
              preferredSize: Size.fromHeight(100.0),
              child: Column(
                children: <Widget>[
                  new TabBar(
                    tabs: [
                      new Tab(icon: new Icon(Icons.directions_car)),
                      new Tab(icon: new Icon(Icons.directions_transit)),
                      new Tab(
                        icon: new Icon(Icons.airplanemode_active),
                      )
                    ],
                  ),
                ],
              ),
            ),

Answer 5

Create this class:

class CustomAppBar extends PreferredSize {
  @override
  Size get preferredSize => Size.fromHeight(100); // set height of your choice

  @override
  Widget build(BuildContext context) {
    return Container(
      height: preferredSize.height,
      alignment: Alignment.center,
      child: // widget implementation
    );
  }
}

Usage:

Scaffold(
  appBar: CustomAppBar(),
)