Flutter Custom AppBar Design | Reusable AppBar Flutter 2023

Welcome to this enlightening Flutter tutorial, where we'll explore the art of crafting a reusable custom app bar.
► Flutter eCommerce App Course: • Professional Flutter E...
🎊 E-COMMERCE APP
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
🎁 DOWNLOAD SOURCE CODE: codingwitht.com/product/flutt...
❤️ FLUTTER E-COMMERCE APP PLAYLISTS
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
► Complete E-Commerce App : • Professional Flutter E...
► Section - 1 Configuration : • Professional Flutter P...
► Section - 2 Login App : • Professional Flutter P...
► Section - 3 eCommerce UI : • Flutter Complete Ecomm...
► Section - 4 Login Backend: • Flutter Firebase Cours...
► Section - 5 eCommerce Backend: • Flutter E-Commerce App...
❤️ SUBSCRIPTIONS
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
► Join Patreon to Access Premium Content: / membership
COURSES
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
► FLUTTER CRASH COURSE • Flutter Crash Course f...
► LOGIN APP FIREBASE • Flutter Login App - UI...
🧑‍💻 RELATED VIDEOS
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
► Custom App Bar: • Flutter Custom AppBar ...
► Custom Shape: • Flutter Clip Path Tuto...
► Circular image: • Search Bar and Horizon...
► Grid Layout & Product Design : • Gridview in Flutter wi...
► All Products Page Design • Flutter All Products P...
FOLLOW US ON SOCIAL MEDIA
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
💻 Facebook | / codingwithtea
💻 Instagram | / coding_with_tea
❤️ Subscribe | kzbin.info...
CHAPTERS
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
00:00 Introduction
00:45 Project Overview
01:23 Why do we need to create Custom AppBar?
03:12 Create Custom Appbar
08:40 Use Custom Appbar in Design
10:46 Design Cart Icon in AppBar with a Count Badge
15:48 Make the Code Clean
DETAILS
We'll unravel the why and how of building a custom app bar in Flutter, even when the AppBar theme offers predefined options.
In this tutorial, you'll gain a deep understanding of the PreferredSize widget and its significance in creating a custom app bar that seamlessly integrates with your app's design. But that's not all; we'll also venture into the world of design by creating a Circular Counter Icon on your Cart Items Icon button using the powerful Stack widget.
By the end of this tutorial, you'll be well-versed in the art of creating custom app bars and enhancing user interactions through creative design. Let's embark on this journey of Flutter customization and design together!

[@Paulodjall]

Really really useful and clean tutorial! Well done 🙏

[@CodingwithT]

Thank you 🙏

[@cinnamoneffect]

Thank you. You helping me a lot

[@CodingwithT]

I'm so glad that it helped!

[@godsplangodwin5721]

Really hope you finish this series as its going to help a lot of flutter developers

[@CodingwithT]

I will complete 💯 it.

[@cryptoairdroppp]

keep goin bro!

[@CodingwithT]

Thank you 😊

[@maazafridi2090]

Awesomee....

[@CodingwithT]

Thanks 🤗

[@hachcupi]

Ta chaine est juste magique merci pour tout 🤩

[@CodingwithT]

Vous êtes les bienvenus 🤗

[@CodingwithT]

De rien et merci pour votre soutien 🙂

[@aouadicharaf1038]

❤❤❤

[@mahmoud_hamdy_flutter]

nice

[@CodingwithT]

Thanks

[@abodsy844]

sir why is the TAppBar is not showing in my case even tho i did everything from the beginning but this is the first thing that doesn't show or work but if i use it as a appbar outside the bode it works but in a bad shape and everything is cutted please help me asap 🙏🙏🙏

[@CodingwithT]

You have to call appbar outside the body: of scafold as appBar: TAppBar() If you have more questions then you can contact us on whatsapp

[@MagnoDaza]

Great tutorial! You make it look easy and enjoyable. There was an issue with Tprimaryheader in the end. It should have a child element to display properly

[@mawandenxumalo4901]

I actually have that issue and I'm not sure how to fix it.

[@CodingwithT]

Please make sure you assigned the child property in the widget. People created that child but forget to assign it.

[@MagnoDaza]

@@mawandenxumalo4901 In the next tutorial show you how to fix it

[@rifkyakh]

thnks for your insight, it's solved my issue

[@BC2715]

beautifully done , love this series

[@CodingwithT]

I am glad that you liked it. Thank you for your Love and Support.

[@kinggrey2511]

Hi sir I don't know this getx or something state management and some advanced topics will you explain them in detail when we get there. Love your way of explaining keep going sir ❤❤❤❤❤❤

[@CodingwithT]

Sure I will

[@speermart]

please do a video for admin panel also how to integrate with existing Woocommerce store as backend

[@CodingwithT]

Admin panel will be uploaded here after 2 weeks. Noted for woo commerce.

[@T-B-5]

Hello sir, I am stuck on the back arrow. I followed every code and instruction but somehow the program is working but back arrow is not showing. I put this.showBackArrow = true but it doesnt seem to be working. Please help

[@T-B-5]

Sorry sir, my mistake. I forgot to insert the child widget in the primary_header_container as you mentioned here 1:11

[@dilshanisenarathna8096]

@@T-B-5 Thank you dr, you saved me!

[@CodingwithT]

Awesome 👍

[@user-xq5vd7zo6i]

i also did same mistake but my time is saved because of you bro hehehe because i read your comment and correct my mistake thanks a lot

[@lilykarmila4559]

your comment save me bro. thanks😂

[@user-uy9iy9ws9m]

i followed the video but nothing is getting visible on by blue appbar screen neither text nor cart

[@danielmarin8994]

same here

[@danielmarin8994]

I have found the solution here in the comments. firstly I forgot to display 'child' in Stack() function from primary_header_container.dart. After that, the appbar was white and I managed to solve this by adding forceMaterialTransparency: true in appbar.dart before automaticallyImplyLeading. I hope this will help you too.

[@MuhammadAfinF.]

Is 'TPrimaryHeaderContainer' a custom widget to configure the 'TAppbar' padding on the body (Column)? Because in my case without that widget, the Custom Appbar has a padding on the sides.

[@CodingwithT]

TPrimaryHeaderContainer is a custom widget and inside this you can create anything using it's child property 😀

[@musautmani6706]

❤😋

[@CodingwithT]

❤️

[@ananyasah900]

sir i was solving the error since an hour i didnt use what not chatgpt to solve problem and it was child not asssigned to TPrimaryHeader class :)

[@CodingwithT]

It sounds like you've been working hard to solve that error! Sometimes it’s the simplest things we overlook. Glad you figured it out! 😊 If you need any more help, feel free to ask.

[@user-zn1lb6ir2w]

I have been working thru each video and no issues until this one. The AppBar does not appear in the emulator (the initial left arrow did not appear, nor the text, icon or counter). No code errors and I have checked my code vs your code. It's a mystery to me. Thoughts?

[@user-zn1lb6ir2w]

Never mind - I ran the code in debug and found the issue. I missed displaying the "child" in TPrimaryHeaderContainer... a very small mistake that meant the AppBar was never displayed. Thanks for this great tutorial - I am learning a lot.

[@CodingwithT]

Thank you for sharing the solution 😀

[@gbengaabayomi8865]

Having the same issue, even tried putting an empty Column inside TPrimaryHeaderContainer it had no effect (blank screen), i also tried putting a text inside the Column it also did not reflect. What could be the issue?

[@alikamalharb6624]

@@gbengaabayomi8865 insert the child widget in the primary_header_container as you mentioned here 1:11

[@mdmusaddique_cse7458]

​@@user-zn1lb6ir2w Thanks for mentioning the solution. I just had to add the passed child element in the children of Stack in TPrimaryHeaderContainer.

[@markleo2455]

bee following the series. have an issue with my home page. still receicing "RenderBox was not laid out: RenderTransform#cc340 relayoutBoundary=up5 'package:flutter/src/rendering/box.dart': Failed assertion: line 1972 pos 12: 'hasSize'" and wont display content

[@CodingwithT]

Using SizedBox or Container with specific dimensions can provide explicit constraints to your widgets, helping them avoid layout issues like "RenderBox was not laid out." Simply wrap your widgets with SizedBox or Container and specify the desired width and height to ensure proper layout. Hope this helps! If you have any further questions, feel free to ask.

[@zakariaelaaliji7747]

sir I have a problem is that my titles and the icon cannot take the primary header which is the custom shape background that we have created, as a background, instead, they take their own background like the rest of the home screen, please can you help me ?

[@zakariaelaaliji7747]

up

[@zakariaelaaliji7747]

up

[@mhsmartgaming2708]

How to solve this problem Failed assertion: line 599 pos 12: 'size.isFinite': is not true.

[@amankumaragrawal1894]

after doing everything my app bar is not visible not the back button as well shopping cart button

[@CodingwithT]

Please share your code snippet at [e-mail] or do me WhatsApp at wa.me/923178059528

[@amankumaragrawal1894]

Thank you @@CodingwithT for your help the issue got resolved by adding the child Widget after Positioned we have created on primary_header_container.dart file again thankyou.

[@CodingwithT]

You welcome 🤗

[@maazafridi2090]

i am facing the same error! my appbar is not showing.... after lots of trying. @@CodingwithT

[@maazafridi2090]

can you help me i am facing the same error the appbar is not showing....@@amankumaragrawal1894

[@shehzadhussain491]

Sir the back arrow appears in the right corner where the custom container design is. How to solve this?

[@CodingwithT]

Remove the default back arrow using automaticallyImplyLeading to false

[@user-wt7lc9gl9p]

sir appbar is not displaying on home screen how to fix

[@CodingwithT]

Not sure what could go wrong! It's just a widget

[@ZeelaxJr]

Hi Sir. For some reasons, the Appbar appears on the top of the PrimaryHeader even if I called it inside the PrimaryHeader. I can't seem to find where the problem is.

[@ZeelaxJr]

Never mind, found the solution. You just have to add extra property forceMaterialTransparency: true, in AppBar. I hope someone else find that useful.

[@CodingwithT]

Thank you for your support. Making appbar transparent might help.

[@JirolBikes]

@@ZeelaxJr still doesn't work on mine, it seems the AppBar was covered by the PrimaryHeader.

[@JirolBikes]

@@CodingwithT what is other solutions?

[@ZeelaxJr]

@@JirolBikes Does you Appbar appear in the app, like the title and subtitle. If not, try the other solution that a lot get in this video, not putting widget variable name child in PrimaryHeader [Check 1:08]. The problem im facing is like the subtitle and title appear but the white color of the appbar overwrite the blue color of primaryheader and the circular container.

[@user-knxhe]

the code does not give an error, but for some reason the text does not come out

[@CodingwithT]

Have you assigned the child widget in your Appbar write after Stack custom shapes?

[@user-knxhe]

Thank you for the answer ))@@CodingwithT

[@mdmirajhossain3799]

I've the same proble and can't solve the issue@@user-knxhe

[@rohitshinde4348]

my appbar is not working in primary header container ??

[@CodingwithT]

Make sure to check the widget again and see if you have added the child

[@SeriatyTn]

the app bar is not transparent in my case .. why??

[@CodingwithT]

you can use your appbar background color as Colors.transparent. If it didn't work, you can contact me on whatsapp.

[@younesmlbb2972]

Why Tsize dont word all the commende with T dont work ?

[@CodingwithT]

Sorry? Can you explain?

[@sohelindian1988]

where we create home.dart file ?

[@CodingwithT]

In the Bottom Navigation which is the first tutorial of this Section 3. kzbin.info/www/bejne/p5WyYputnJd7j5o

[@rizkyahsansyarif5584]

Sorry in advance sir, I'm stuck on the code that I typed, there was no error, but why doesn't the back button, text and shopping bag icon appear even though I have added children to the Primary Header Container. How can I solve this?? Please help me sir

[@CodingwithT]

I think you just need to change the colors and back button will appear

[@rizkyahsansyarif5584]

it's solved, thank you sir. :)

[@CodingwithT]

NP 😁

[@bashafaris5908]

Where i can get background elements and illustrations for free😢

[@CodingwithT]

You can go to icons8.com or simply download the project with all its resources and assets for free. Link is the description 🎉🤗

[@walmosawi]

error >> Another exception was thrown: 'package:flutter/src/widgets/framework.dart': Failed assertion: line 5729 pos 14: '_dependents.isEmpty': is not true.

[@b.farhana]

sir are u going to make video today on next topic

[@CodingwithT]

Hi, Sorry for the delay. From tomorrow onwards I'll start uploading daily

[@b.farhana]

​@@CodingwithTdaily without 2days gap aa sir? It's really good sir if u uplaod video daily.Thank u​

[@CodingwithT]

Yes almost on a daily basis 😁

[@R004032]

Hope have a Laravel api

[@CodingwithT]

Noted, I'll consider integrating a Laravel API into the project. Thank you for your suggestion!

[@amanimakoi7651]

Whenever I use MPrimaryHeaderContainer The AppBar doesn't appear

[@CodingwithT]

I think you did a mistake in making appbar in header. did you use APPbar widget or made a custom appbar?

[@amanimakoi7651]

@@CodingwithT I use custom appbar and I clearly followed your instructions but I think the issue here is the MPrimaryHeaderContainer because whenever I mark it as a comment, the appbar and search bar just appear and work pretty fine

[@muvut3144]

What is 'Typo in word'.....??

[@CodingwithT]

Sorry?