在tabbar中indicator宽度是无法修改的,所以需要咱们去自定义indicator。

下面是自定义的代码,直接拷贝使用,已做好修改。

// Copyright 2018 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file. import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart'; /// Used with [TabBar.indicator] to draw a horizontal line below the
/// selected tab.
///
/// The selected tab underline is inset from the tab's boundary by [insets].
/// The [borderSide] defines the line's color and weight.
///
/// The [TabBar.indicatorSize] property can be used to define the indicator's
/// bounds in terms of its (centered) widget with [TabIndicatorSize.label],
/// or the entire tab with [TabIndicatorSize.tab].
class TabSizeIndicator extends Decoration { final double wantWidth;//传入的指示器宽度,默认20 /// Create an underline style selected tab indicator.
///
/// The [borderSide] and [insets] arguments must not be null.
const TabSizeIndicator({
this.borderSide = const BorderSide(width: 2.0, color: Colors.blue),
this.insets = EdgeInsets.zero,
this.wantWidth = 20
}) : assert(borderSide != null),
assert(insets != null),
assert(wantWidth != null); /// The color and weight of the horizontal line drawn below the selected tab.
final BorderSide borderSide;//指示器高度以及颜色 ,默认高度2,颜色蓝 /// Locates the selected tab's underline relative to the tab's boundary.
///
/// The [TabBar.indicatorSize] property can be used to define the
/// tab indicator's bounds in terms of its (centered) tab widget with
/// [TabIndicatorSize.label], or the entire tab with [TabIndicatorSize.tab].
final EdgeInsetsGeometry insets; @override
Decoration lerpFrom(Decoration a, double t) {
if (a is UnderlineTabIndicator) {
return UnderlineTabIndicator(
borderSide: BorderSide.lerp(a.borderSide, borderSide, t),
insets: EdgeInsetsGeometry.lerp(a.insets, insets, t),
);
}
return super.lerpFrom(a, t);
} @override
Decoration lerpTo(Decoration b, double t) {
if (b is TabSizeIndicator) {
return TabSizeIndicator(
borderSide: BorderSide.lerp(borderSide, b.borderSide, t),
insets: EdgeInsetsGeometry.lerp(insets, b.insets, t),
);
}
return super.lerpTo(b, t);
} @override
_MyUnderlinePainter createBoxPainter([ VoidCallback onChanged ]) {
return _MyUnderlinePainter(this,wantWidth, onChanged);
}
} class _MyUnderlinePainter extends BoxPainter {
final double wantWidth;
_MyUnderlinePainter(this.decoration, this.wantWidth,VoidCallback onChanged)
: assert(decoration != null),
super(onChanged); final TabSizeIndicator decoration; BorderSide get borderSide => decoration.borderSide;
EdgeInsetsGeometry get insets => decoration.insets; Rect _indicatorRectFor(Rect rect, TextDirection textDirection) {
assert(rect != null);
assert(textDirection != null);
final Rect indicator = insets.resolve(textDirection).deflateRect(rect); //希望的宽度
// double wantWidth = 20;
//取中间坐标
double cw = (indicator.left + indicator.right) / 2;
return Rect.fromLTWH(cw - wantWidth / 2,
indicator.bottom - borderSide.width, wantWidth, borderSide.width);
} @override
void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
assert(configuration != null);
assert(configuration.size != null);
final Rect rect = offset & configuration.size;
final TextDirection textDirection = configuration.textDirection;
final Rect indicator = _indicatorRectFor(rect, textDirection).deflate(borderSide.width / 2.0);
final Paint paint = borderSide.toPaint()..strokeCap = StrokeCap.square;
canvas.drawLine(indicator.bottomLeft, indicator.bottomRight, paint);
}
}

将源码拷贝过来进行修改。以上代码就是修改好的。下面是使用方式。

TabBar(
indicator: TabSizeIndicator(wantWidth:
15,borderSide: BorderSide(width:
2.0,color: Colors.red)),//TabSizeIndicator已有默认值,宽度默认20,颜色蓝色,高度2,不需要修改的可以不传参数
                                         //TabSizeIndicator();即可                                                             
isScrollable: true,
controller: _tabController,
unselectedLabelStyle: TextStyle(
fontSize: 13, fontWeight: FontWeight.bold),
labelStyle: TextStyle(
fontWeight: FontWeight.bold, fontSize: 13),
tabs:_tabbarItem()
),

最新文章

  1. ASP.NET Web API自身对CORS的支持:从实例开始
  2. python fork 用法
  3. Python中对字节流/二进制流的操作:struct
  4. 年薪10w和年薪100w的人,差在哪里?
  5. Andriod读取XML问题
  6. Java中实现文件上传下载的三种解决方案
  7. 常见S1信令交互流程
  8. 第四讲:hibernate 的session (二)
  9. android103 内容观察者
  10. Delphi流的操作
  11. 内网神器-Bettercap
  12. 项目分享:通过使用SSH框架的公司-学员关系管理系统(CRM)
  13. Unable to handle 'index' format version '2', please update rosdistro的解决办法
  14. Httpclient代码
  15. 微信小程序代码构成
  16. angular.isString()
  17. zhuan: WAN simulating tool - Netem : command tc qdisc
  18. linux搭建zabbix server
  19. Linux内核笔记:epoll实现原理(二)
  20. 一步一步教你搭建和使用FitNesse

热门文章

  1. wsl 网络探究
  2. TypeScript 学习笔记 — 看官方文档
  3. 亲测有效! Wondershare UniConverterV14.1.7 Wondershare PDFelement Professional V9.3.3 含(win/mac版)
  4. VMware虚拟机的简单安装和配置
  5. 学习Java Day13
  6. 2021级《JAVA语言程序设计》上机考试试题1
  7. 修改ctags让fzf.vim插件显示C,C++方法声明的标签
  8. Centos7基础知识--------创建文件夹、彻底删除文件夹、文件命令
  9. 【ACR2015】依那西普按需维持治疗策略有效抑制RA骨破坏进展
  10. webserver 简单demo