[英]How to make a circle shaped tab indicator in flutter
I need to have 4 tabs with 4 circles at the bottom indicating which tab you are currently on.我需要有 4 个标签,底部有 4 个圆圈,指示您当前所在的标签。 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.我不能让它只是一个有 4 个容器更改 colors 的行,我需要它们成为功能齐全的按钮,我可以在按下它们时在选项卡之间切换。 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.我的主要问题是我似乎无法让我的标签更窄,并且它们最终相距大约 30 像素,这不是我想要的。 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/smooth_page_indicator
https://pub.dev/packages/dots_indicator https://pub.dev/packages/dots_indicator
https://pub.dev/packages/page_view_indicators https://pub.dev/packages/page_view_indicators
https://pub.dev/packages/page_indicator https://pub.dev/packages/page_indicator
https://pub.dev/packages/ink_page_indicator https://pub.dev/packages/ink_page_indicator
https://pub.dev/packages/dot_pagination_swiper 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.您可以通过更改小部件的 state 来更改颜色。
I think this is may be helpful for you!我想这可能对你有帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.