ReusableAppbar error, can't be assigned to the parameter type PreferredSizeWidget

Question

I'm trying to create my own reusable appbar for my app but there's some error related with the PreferredSize Widget, I thought by providing some default height will help but it still show the same error how can I fix this ?

I tried applying PreferredSize but it didn't work. Maybe There's something wrong with the way I apply it

Error: The argument type 'ReusableAppbar' can't be assigned to the parameter type 'PreferredSizeWidget?'. (argument_type_not_assignable at [tiket_kerja] lib\screens\settings_pages\user_app_feedback_page.dart:11)

Here's my code:

Reusable appBar code

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'button/reusable_back_button.dart';

class ReusableAppbar extends StatelessWidget {
  final Function backButtonOnTap;
  final String appbarTitleText;
  final Color appbarBackgroundColor;
  final Widget additionalWidget;
  final Widget additionalWidget2;
  final double height;

  const ReusableAppbar({
    required this.backButtonOnTap,
    required this.appbarTitleText,
    this.appbarBackgroundColor = Colors.white,
    this.height = 60,
    this.additionalWidget = const SizedBox.shrink(),
    this.additionalWidget2 = const SizedBox.shrink(),
    Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AppBar(
      iconTheme: IconThemeData(color: appbarBackgroundColor),
      automaticallyImplyLeading: false,
      centerTitle: false,
      backgroundColor: personalBackGround,
      toolbarHeight: height,
      title: Column(
        children: [
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 13),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Expanded(
                  child: Row(
                    children: [
                      GestureDetector(
                        onTap: () {
                          Navigator.pop(context);
                        },
                        child: ReusableBackButton(color: primaryColor),
                      ),
                      Text(
                        appbarTitleText,
                        style: primaryColor600Style.copyWith(
                          fontSize: fontSize16,
                        ),
                      ).tr(),
                    ],
                  ),
                ),

                additionalWidget,
              ],
            ),
          ),

          additionalWidget2,
        ],
      ),
    );
  }
}

Here's my code for the usage:

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: ReusableAppbar(
          backButtonOnTap: (){
            Navigator.pop(context);
          },
          appbarTitleText: 'Try appbar',
      ),
    );
  }

Answer 1

Since appBar parameter of Scaffold Widget accepts PreferredSizeWidget so to create AppBar of your own style you need to implement your ReusableAppbar with PreferredSizeWidget abstract class and also you need to override preferredSize to define size of the appBar this way.

  @override
  Size get preferredSize => const Size(double.infinity, kToolbarHeight);

Full Code for your ReusableAppbar goes here ;

class ReusableAppbar extends StatelessWidget implements PreferredSizeWidget {
  final Function backButtonOnTap;
  final String appbarTitleText;
  final Color appbarBackgroundColor;
  final Widget additionalWidget;
  final Widget additionalWidget2;
  final double height;

  const ReusableAppbar(
      {required this.backButtonOnTap,
      required this.appbarTitleText,
      this.appbarBackgroundColor = Colors.white,
      this.height = 60,
      this.additionalWidget = const SizedBox.shrink(),
      this.additionalWidget2 = const SizedBox.shrink(),
      Key? key})
      : super(key: key);

  /// here kToolbarHeight is the default height provided by flutter
  /// you can use your custom height by providing double value.
  @override
  Size get preferredSize => const Size(double.infinity, kToolbarHeight);

  @override
  Widget build(BuildContext context) {
    return AppBar(
      iconTheme: IconThemeData(color: appbarBackgroundColor),
      automaticallyImplyLeading: false,
      centerTitle: false,
      backgroundColor: personalBackGround,
      toolbarHeight: height,
      title: Column(
        children: [
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 13),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Expanded(
                  child: Row(
                    children: [
                      GestureDetector(
                        onTap: () {
                          Navigator.pop(context);
                        },
                        child: ReusableBackButton(color: primaryColor),
                      ),
                      Text(
                        appbarTitleText,
                        style: primaryColor600Style.copyWith(
                          fontSize: fontSize16,
                        ),
                      ).tr(),
                    ],
                  ),
                ),
                additionalWidget,
              ],
            ),
          ),
          additionalWidget2,
        ],
      ),
    );
  }
}

Answer 2

You must extends StatelessWidget with PreferredSizeWidget:

class ReusableAppbar extends StatelessWidget with PreferredSizeWidget {
  final String text;
  ReusableAppbar({Key? key, required this.text})
      : preferredSize = Size.fromHeight(50.0),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text(text),
      centerTitle: true,
    );
  }

  @override
  final Size preferredSize;
}