[英]Flutter rounded TabBar border indicator
I spent way too many hours searching for a similar solution but it seems that nobody on earth is implementing such design.我花了太多时间寻找类似的解决方案,但似乎地球上没有人实施这样的设计。 I want to indicate selected TabBar Tab with such indicator:
我想用这样的指示器指示选定的 TabBar 选项卡:
Currently it looks like this:目前它看起来像这样:
Code of current TabBar:当前TabBar的代码:
const TabBar(
indicator: BoxDecoration(
border: Border(
top: BorderSide(color: Colors.blue, width: 5),
),
),
labelPadding: EdgeInsets.zero,
tabs: [
_Tab(icon: Icons.home, text: 'Home'),
_Tab(icon: Icons.settings, text: 'Settings'),
_Tab(icon: Icons.cleaning_services, text: 'Clean'),
_Tab(icon: Icons.construction, text: 'Service'),
_Tab(icon: Icons.library_books, text: 'Resources'),
],
),
)
Has anybody got an idea of how this should look like?有人知道这应该是什么样子吗?
You must create your own Decoration.您必须创建自己的装饰。 Have a look to this guide: https://medium.com/swlh/flutter-custom-tab-indicator-for-tabbar-d72bbc6c9d0c
看看这个指南: https://medium.com/swlh/flutter-custom-tab-indicator-for-tabbar-d72bbc6c9d0c
It creates a custom point under the tab, so you can copy that to create your kind of indicator它在选项卡下创建一个自定义点,因此您可以复制它来创建您的指标类型
Thanks, BabC.谢谢,巴布克。
Here's the final result:这是最终结果:
class _TabIndicator extends Decoration {
final BoxPainter _painter;
_TabIndicator() : _painter = _TabIndicatorPainter();
@override
BoxPainter createBoxPainter([onChanged]) => _painter;
}
class _TabIndicatorPainter extends BoxPainter {
final Paint _paint;
_TabIndicatorPainter()
: _paint = Paint()
..color = Colors.blue
..isAntiAlias = true;
@override
void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
final double _xPos = offset.dx + cfg.size.width / 2;
canvas.drawRRect(
RRect.fromRectAndCorners(
Rect.fromLTRB(_xPos - 20, 0, _xPos + 20, 5),
bottomLeft: const Radius.circular(5.0),
bottomRight: const Radius.circular(5.0),
),
_paint,
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.