TabBar in Flutter with Scrolling Categories | Flutter eCommerce App

In this informative Flutter eCommerce video tutorial, we will guide you through the creation of a TabBar in Flutter, offering you a dynamic and organized user interface for your e-commerce app.

🎊 E-COMMERCE APP
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

❤️ FLUTTER E-COMMERCE APP PLAYLISTS
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

❤️ SUBSCRIPTIONS
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

COURSES
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

🧑‍💻 RELATED VIDEOS
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

FOLLOW US ON SOCIAL MEDIA
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

DETAILS
Our focus in this tutorial is on the implementation of TabBar views, with each view featuring Categories and Content. We'll showcase the best practices for designing a user-friendly interface.

Furthermore, you'll learn to display featured brands with a maximum of 2 in each category, creating an engaging and attractive showcase for top-rated products within each category.

By the end of this tutorial, you'll have the skills to implement a sophisticated TabBar in your Flutter eCommerce app, enhancing the navigation and user experience. Join us on this journey to create an efficient and appealing e-commerce app interface!

[CodingwithT]

TBrandCard Class which every one was looking for.


import

import
import
import
import
import
import
import
import

/// 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 =

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: [
brand.name, brandTextSize: TextSizes.large),
Text(
'${brand.productsCount ?? 0} products',
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.labelMedium,
),
],
),
),
],
),
),
);
}
}

[T-B-]

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.

[mohamedalhamri]

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.)

[MuntasirHossain]

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

[muhendis_]

14:43 I learnt a awesome new thing, wow 💯

[nurullahozatak]

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?

[geiseebag]

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.

[cromuelbarut]

Because of this tutorial, now i know how to implement the scrollable tab bar view, you're a life saver!

thank you very much!!!

[haikal]

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

[daniel_kiing]

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?

[mcatrader]

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

[gulammustufamomin]

Tab bar is taking horizontal space and then showing Sports tab. How to remove the space before Sports tab?

[pinkisingh]

can you tell me in which folder you create TBrandCard ? and what code you write in category_tab.dart within store 's widget folder?

[chiragpendharkar]

Please complete e-commerce app with admin panel many features 👍

[NomotoSolutions]

I have an error in the store.dart on this line images.map((image) => brandTopProductImageWidget(image, context)).toList() .. Error is The element type 'List<Widget>' 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

[noxtube]

thank you for this tutoriel I apreciate

[arturochavezchibli]

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!

[felipedahora]

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?

[eshu]

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 ..

[ayushmishra]

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.