I encountered an issue where the TabBar was shifted to the right, creating a gap on the left. I resolved this by setting tabAlignment: TabAlignment.start in the TabBar widget. By default, the tabAlignment property is set to startOffset when both the isScrollable property of the TabBar and the useMaterial3 property of ThemeData are set to true. According to the documentation for tabs.dart: (/// If [TabBarTheme.tabAlignment] is null and [ThemeData.useMaterial3] is true, /// then [TabAlignment.startOffset] is used if [isScrollable] is true, /// otherwise [TabAlignment.fill] is used.)
If anyone experiences a bottom overflow halfway through tutorial, this will be fixed at the end of the tutorial so don't panic. I made this mistake not going through tutorial till end, thinking it wasn't in the video. Sorry sir and I appreciate your work.
Hey, I have this problem in the tabbar when I only use 4 tabs or 3 they don't take the whole width of the screen and missing space stays in the edges also the line under the tabbar doesn't extend to the both edges.
Hello T, I'm following your videos step by step and making good progress. However, I have a question. I am working on this project for a school assignment, and there is a requirement to use MSSQL. In my research, I found that I can use Prisma ORM. Can I use a local database instead of Firebase in the code you provided? Is the code you wrote suitable for this, and does it support the use of Prisma ORM for MSSQL?
@@bubaygamingblogging5714 it wasnt shown and many more things are skipped its too hard to catch up those things store me grid layout me jo gesture detector tha usi ko widget extract kiya hai
Im also facing this problem. Idk if it will help you or not, but the solution I found is to add tabAlightment: tabAlignment.center or tabAlignment.start property in TabBar under isScrollable: true. When isScrollable property is given, it creates that problem.
Hello T Why did you suggest we don't use SingleChildScrollView when we got the render box error with the content in the Category Tab? I used it and the error went away for me Is there any technical reason or performance penalty for that?
Thanks for your question. The SingleChildScrollView can indeed resolve layout issues like render box errors by allowing content to overflow vertically. However, it’s generally advised to use SingleChildScrollView with caution in scenarios when there are multiple scrolling elements on the same screen. When used in combination with other scrollable widgets, it can lead to conflicting scroll behaviors and a less predictable user experience.
I have an error in the store.dart on this line images.map((image) => brandTopProductImageWidget(image, context)).toList() .. Error is The element type 'List' can't be assigned to the list type 'Widget'. I cannot get around this problem albeit following your instructions to the letter (Except for the TBrandCard which wasn't written from previous tut..I did it myself). Please help
I read something somewhere and ended up adding 3 dots at the begining like this ...images.map((image) => brandTopProductImageWidget(image, context)).toList() then it gave me this warning "Unnecessary use of 'toList' in a spread." I then removed the toList() and it was happy! Can you explain? have I messed up the logic?
I am facing an issue, I have similar app with tabs in nested scroll view in tab bar view what I want that all the tab view should take only height they require. Currently my tab bar view is taking maximum height for all the tab views what should I do.
I cant stop watching your videos dude Just a question, am following your videos like crazy, and replacing everything trying to build a plataform for free ebooks and Audiobooks, is it possible to put a ePub reader? I cant seme to do it Thanks for everything man!
Hello Tell me please The error appears specifically in TabBarView "Controller's length property (5) does not match the number of children (1) present in TabBarView's children property." How can I fix the error? Thanks for your reply
The page works well but the tab bar wont scroll to the top, it leaves a small space that means that you can see the under elements sliding past. How could i fix this? floating and pinned are true for the sliverappbar. The list view widget in the tabpage causes the gap. I've tried overriding the list view padding, wrapping in safearea and wrapping it in mediaquery.removepadding.
I have exactly the same behavior, obviously this is by design (built inside Flutter library). The gap is only a few pixels high, so it shouldn't display anything from the under layer except if you have no padding.
TBrandCard Class which every one was looking for.
import 'package:flutter/material.dart';
import '../../../features/shop/models/brand_model.dart';
import '../../../utils/constants/colors.dart';
import '../../../utils/constants/enums.dart';
import '../../../utils/constants/sizes.dart';
import '../../../utils/helpers/helper_functions.dart';
import '../custom_shapes/containers/rounded_container.dart';
import '../images/t_circular_image.dart';
import '../texts/t_brand_title_text_with_verified_icon.dart';
/// A card widget representing a brand.
class TBrandCard extends StatelessWidget {
/// Default constructor for the TBrandCard.
///
/// Parameters:
/// - brand: The brand model to display.
/// - showBorder: A flag indicating whether to show a border around the card.
/// - onTap: Callback function when the card is tapped.
const TBrandCard({
super.key,
required this.brand,
required this.showBorder,
this.onTap,
});
final BrandModel brand;
final bool showBorder;
final void Function()? onTap;
@override
Widget build(BuildContext context) {
final isDark = THelperFunctions.isDarkMode(context);
return GestureDetector(
onTap: onTap,
/// Container Design
child: TRoundedContainer(
showBorder: showBorder,
backgroundColor: Colors.transparent,
padding: const EdgeInsets.all(TSizes.sm),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
/// -- Icon
Flexible(
child: TCircularImage(
image: brand.image,
isNetworkImage: true,
backgroundColor: Colors.transparent,
overlayColor: isDark ? TColors.white : TColors.black,
),
),
const SizedBox(width: TSizes.spaceBtwItems / 2),
/// -- Texts
// [Expanded] & Column [MainAxisSize.min] is important to keep the elements in the vertical center and also
// to keep text inside the boundaries.
Expanded(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TBrandTitleWithVerifiedIcon(title: brand.name, brandTextSize: TextSizes.large),
Text(
'${brand.productsCount ?? 0} products',
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.labelMedium,
),
],
),
),
],
),
),
);
}
}
Hi, can I get BrandModel code?
I encountered an issue where the TabBar was shifted to the right, creating a gap on the left. I resolved this by setting tabAlignment: TabAlignment.start in the TabBar widget. By default, the tabAlignment property is set to startOffset when both the isScrollable property of the TabBar and the useMaterial3 property of ThemeData are set to true. According to the documentation for tabs.dart: (/// If [TabBarTheme.tabAlignment] is null and [ThemeData.useMaterial3] is true,
/// then [TabAlignment.startOffset] is used if [isScrollable] is true,
/// otherwise [TabAlignment.fill] is used.)
Valuable
thanks
If anyone experiences a bottom overflow halfway through tutorial, this will be fixed at the end of the tutorial so don't panic. I made this mistake not going through tutorial till end, thinking it wasn't in the video. Sorry sir and I appreciate your work.
Thank you so much for helping others 😊. I'm really glad for your response. 🎉💕
It is you we should all thank for the free tutorials.
your comment always save me broo 🤣🤣🤣
We are on the same boat. That's hilarious
@@lilykarmila4559 x2
14:43 I learnt a awesome new thing, wow 💯
I'm thrilled to hear that! Learning new things is always exciting. Keep up the great work! 💯🚀
thank you, this section is awesome
You're welcome! I'm glad you're enjoying this section.
I Appreciate your Hardwork
Hey, I have this problem in the tabbar when I only use 4 tabs or 3 they don't take the whole width of the screen and missing space stays in the edges also the line under the tabbar doesn't extend to the both edges.
To fix this issue, you can set isScrollable to false. Here is the modified code for your TTabBar:
Because of this tutorial, now i know how to implement the scrollable tab bar view, you're a life saver!
thank you very much!!!
I'm glad to hear that! Thank you for your kind words and support. Happy coding! 🎉
hi , for the search, i didnt see which videos make the code for searching the products. for example when i type A , apple comes out
Hello T, I'm following your videos step by step and making good progress. However, I have a question. I am working on this project for a school assignment, and there is a requirement to use MSSQL. In my research, I found that I can use Prisma ORM. Can I use a local database instead of Firebase in the code you provided? Is the code you wrote suitable for this, and does it support the use of Prisma ORM for MSSQL?
Yes, absolutely, 💯 You can use any Backend you like. Just grab the design and fit the backend of your choice.
Thanks you so much
You are my savior
Thanks you so much
You are my savior
hello , i need a help to you , i am using the same tabbar so i want set selected tab at the center of thr tabbar
can you kindly tell me on which video you create the TBrandcard() class or that dart file, I don't find it on previous video
Hello, Aapko mila ye code ?
Let me share that
@@CodingwithT Please sir share asap
@@Dhara_Joshi Comment Pinned in this video
@@CodingwithTThank you so much for the immediate response! Your quick support really helped me out. 😊🙏
can you tell me in which folder you create TBrandCard ? and what code you write in category_tab.dart within store 's widget folder?
Common>widgets>brands>brand_card.dart
@@mahsolii hi can you share brand_card.dart file code, becouse meroko pata nhi konsa video pe yea code lika giya.
@@bubaygamingblogging5714 it wasnt shown and many more things are skipped its too hard to catch up those things
store me grid layout me jo gesture detector tha usi ko widget extract kiya hai
Tab bar is taking horizontal space and then showing Sports tab. How to remove the space before Sports tab?
I'll try to find the cause and will share it.
I also facing same problem@@CodingwithT
Im also facing this problem. Idk if it will help you or not, but the solution I found is to add tabAlightment: tabAlignment.center or tabAlignment.start property in TabBar under isScrollable: true. When isScrollable property is given, it creates that problem.
@@CodingwithT if you got the solution to the provided question please share it.
@@ZeelaxJr it worked thanks
Hello T
Why did you suggest we don't use SingleChildScrollView when we got the render box error with the content in the Category Tab?
I used it and the error went away for me
Is there any technical reason or performance penalty for that?
Thanks for your question. The SingleChildScrollView can indeed resolve layout issues like render box errors by allowing content to overflow vertically. However, it’s generally advised to use SingleChildScrollView with caution in scenarios when there are multiple scrolling elements on the same screen.
When used in combination with other scrollable widgets, it can lead to conflicting scroll behaviors and a less predictable user experience.
I have an error in the store.dart on this line images.map((image) => brandTopProductImageWidget(image, context)).toList() .. Error is The element type 'List' can't be assigned to the list type 'Widget'. I cannot get around this problem albeit following your instructions to the letter (Except for the TBrandCard which wasn't written from previous tut..I did it myself). Please help
I read something somewhere and ended up adding 3 dots at the begining like this ...images.map((image) => brandTopProductImageWidget(image, context)).toList() then it gave me this warning "Unnecessary use of 'toList' in a spread." I then removed the toList() and it was happy! Can you explain? have I messed up the logic?
Maybe the widget which in my case requested List and in your case you make it a single item type variable
Please complete e-commerce app with admin panel many features 👍
I will
I am facing an issue, I have similar app with tabs in nested scroll view in tab bar view what I want that all the tab view should take only height they require. Currently my tab bar view is taking maximum height for all the tab views what should I do.
You can use Listtile and shrinkWrap as true. Add background colors to check the height
TBrandCard dart code where? pls write
Sorry for the delayed reply. I will add it in the comments
thank you for this tutoriel I apreciate
Glad it was helpful!
Hello, I have a question. The images I'm using aren't looking good, could you please tell me what dimensions the images you're using?
You can download the starter kit for free from the product link in the description. Containing assets, folder structure, theme
Awesome video !!!
Thank you 😊
I cant stop watching your videos dude
Just a question, am following your videos like crazy, and replacing everything trying to build a plataform for free ebooks and Audiobooks, is it possible to put a ePub reader? I cant seme to do it
Thanks for everything man!
Thank you. I'll try to create a video on it.
@@CodingwithT oh my gosh seriously?? I fucking Love you man!
I just finished the featured brand section. But how to add different brands... I have Nike's in all 4 brands... How to add other brand like Adidas ..
Keep watching, in the backend tutorials of Section 5 you'll be able to handle all types of Brands.
thank you@@CodingwithT
11:15
Hello
Tell me please
The error appears specifically in TabBarView "Controller's length property (5) does not match the number of children (1) present in TabBarView's children property." How can I fix the error? Thanks for your reply
It means your DefaultTabController length is different then TabBarView Screens
You are Awesome Bro
I am glad that you like it. Thank you for your love and support.
@@CodingwithT hello sir pls write(share) TBrandCard dart code
where is the TBrand Class?
I have pinned the comment. Please get it
BOTTOM OVERFLOWED BY 52 PIXELS how to fix it
Have you used Listview the way I did?
@@CodingwithT yes sir i followed all steps but problem are not fix
super bro!
Thanks 🙏
Thank you
You welcome 🎊
Bhai font size barhao android studio ki
Noted
❤❤❤
Thank you 😊 dear
nice
Thank you
The page works well but the tab bar wont scroll to the top, it leaves a small space that means that you can see the under elements sliding past. How could i fix this? floating and pinned are true for the sliverappbar. The list view widget in the tabpage causes the gap. I've tried overriding the list view padding, wrapping in safearea and wrapping it in mediaquery.removepadding.
I have exactly the same behavior, obviously this is by design (built inside Flutter library). The gap is only a few pixels high, so it shouldn't display anything from the under layer except if you have no padding.