I created a separate Stateless widget called CustomAppBar will certain parameters. Every I need appBar in my app. I will use CustomAppBar and give required parameters instead of normal AppBar.

like this :

 appBar: PreferredSize(
        preferredSize: const Size.fromHeight(50),
        child: CustomAppBar(title: 'Wishlist', enableBack: widget.enableBack),
      ),

I would like to know, if this is correct way or will it have any impact on performance and app crashes.

Any help is really appreciated. Thankyou.

Please check the code below (CustomAppBar):

class CustomAppBar extends StatelessWidget {
  bool enableBack;
  String title;
  Color backgroundColor;
  bool enableSearchBar;
  bool showLogo;
  bool isSearchPage;

  CustomAppBar(
      {Key key,
      this.enableBack = true,
      this.title,
      this.backgroundColor = Colors.white,
      this.enableSearchBar = false,
      this.showLogo = false,
      this.isSearchPage = false})
      : super(key: key);

  // const CustomAppBar({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AppBar(
        elevation: 0,
        leading: enableBack
            ? GestureDetector(
                onTap: () {
                  Navigator.pop(context);
                },
                child: const Icon(
                  Icons.arrow_back,
                  color: Colors.white,
                  size: 18,
                ),
              )
            : const SizedBox(),
        centerTitle: enableBack ? false : true,
        backgroundColor: const Color(0xff004aad),
        titleSpacing: 0,
        leadingWidth: 50,
        title: showLogo
            ? Row(
                children: [
                  const Padding(
                    padding: EdgeInsets.only(left: 0),
                    child: Image(
                      height: 35,
                      width: 35,
                      // width: 400,
                      image: AssetImage(
                          'assets/images/featured_images/logo-transparent.png'),
                      fit: BoxFit.contain,
                    ),
                  ),
                  const SizedBox(
                    width: 5,
                  ),
                  CustomSizedTextBox(
                    textContent: "TITLE",
                    color: Colors.white,
                    fontSize: 25,
                    fontName: 'Alegreya Sans',
                  ),
                ],
              )
            : Text(
                title,
                style: const TextStyle(color: Colors.white, fontSize: 15),
              ),
        actions: enableSearchBar
            ? [
                Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 12),
                    child: GestureDetector(
                      onTap: () {
                        isSearchPage
                            ? Navigator.pop(context)
                            : Navigator.pushNamed(context, '/search');
                      },
                      child: const Icon(
                        CupertinoIcons.search,
                        color: Colors.white,
                      ),
                    )),
                Padding(
                  padding:
                      const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                  child: GestureDetector(
                    onTap: () {
                      Navigator.pushNamed(context, '/wishlist');
                    },
                    child: const Icon(
                      CupertinoIcons.heart,
                      color: Colors.white,
                    ),
                  ),
                ),
                Padding(
                  padding:
                      const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                  child: GestureDetector(
                    onTap: () {
                      Navigator.pushNamed(context, '/cart',
                          arguments: Cart(
                            enableBack: true,
                          ));
                    },
                    child: const Icon(
                      CupertinoIcons.bag,
                      color: Colors.white,
                    ),
                  ),
                ),
              ]
            : []);
  }
}

CodePudding user response：

This is an approach, there's nothing wrong with that.

Another approach commonly used to implement a custom app bar is by implement PreferredSizeWidget in your CustomAppBar:

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  bool enableBack;
  String title;
  Color backgroundColor;
  bool enableSearchBar;
  bool showLogo;
  bool isSearchPage;

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

  CustomAppBar(
      {Key key,
      this.enableBack = true,
      this.title,
      this.backgroundColor = Colors.white,
      this.enableSearchBar = false,
      this.showLogo = false,
      this.isSearchPage = false})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    // ...
  }
}

Now you can use your CustomAppBar like the original AppBar:

appBar: CustomAppBar(title: 'Wishlist', enableBack: widget.enableBack),