How to make a circle shaped tab indicator in flutter
There are many packages available for that you can check out these packages which is suitable for your case :
https://pub.dev/packages/smooth_page_indicator
https://pub.dev/packages/dots_indicator
https://pub.dev/packages/page_view_indicators
https://pub.dev/packages/page_indicator
https://pub.dev/packages/ink_page_indicator
https://pub.dev/packages/dot_pagination_swiper
again you can make your custom widget to do that :
You change colour by changing the state of widget.
I think this is may be helpful for you!
Andrii Kaidash
Updated on December 29, 2022Comments
-
Andrii Kaidash over 1 year
I need to have 4 tabs with 4 circles at the bottom indicating which tab you are currently on. Like this. I cant make it just a Row with 4 containers changing colors, i need them to be fully functional buttons where i can switch between tabs when pressing them. My main problem is that i can't seem to make my tabs narrower, and they end up being about 30 pixels apart, which is not what i want. Any help is appreciated. Here is my code so far
Container( width: 22.0.h, child: TabBar( indicatorPadding: EdgeInsets.zero, indicatorSize: TabBarIndicatorSize.label, tabs: [ Tab( child: Container( height: 1.0.h, width: 1.0.h, decoration: BoxDecoration(color: UIThemes.buttonDarkBlue, shape: BoxShape.circle), ), ), Tab( child: Container( height: 1.0.h, width: 1.0.h, decoration: BoxDecoration(color: UIThemes.buttonDarkBlue), ), ), Tab( child: Container( height: 1.0.h, width: 1.0.h, decoration: BoxDecoration(color: UIThemes.buttonDarkBlue), ), ), Tab( child: Container( height: 1.0.h, width: 1.0.h, decoration: BoxDecoration(color: UIThemes.buttonDarkBlue), ), ), ], ), ),
-
Andrii Kaidash about 3 yearsDamn bro, thanks a lot. In my blinding rage because i couldn't figure this one out, i forgot about packages completely.