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),
),
),
],
),
),
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!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.