在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()
),

flutter tabbar指示器indicator宽度高度自定义的更多相关文章

  1. 灵活、可高度自定义的——Progress进度圈、弹窗、加载进度、小菊花

    DDProgressHUD的介绍 提供了四种类型的展示: 显示无限旋转的加载图(比如小菊花,可以自定义),显示文字信息.网络刷新时经常用到. 显示加载进度的动画,也可以显示文字.网络下载时用的比较多, ...

  2. CSS控制div宽度最大宽度/高度和最小宽度/高度

    在网页制作中经常要控制div宽度最大宽度/高度或者最小宽度/高度,但是在IE6中很多朋友都会遇到不兼容的头疼问题,包括我也经常遇到这样的问题,在百度查了很多都没法解决,后来在一个论坛上学习到,在这里跟 ...

  3. fancybox 点击 js脚本判断验证,fancybox的宽度高度设置

    当我们在使用fancybox做弹出窗口的时候,可能在弹窗之前就需要判断一些验证条件,例如我这里有个案例,用户必须先得勾选一个 那么怎么做呢?我们用到fancybox的一个onStart方法就可以了 $ ...

  4. span宽度高度设置

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. C#获取显示器宽度高度,桌面宽度高度等

    1.C#获取显示器宽度高度,桌面宽度高度等 //获取当前显示器的宽度和高度 int width = Screen.PrimaryScreen.Bounds.Width; int height = Sc ...

  6. java中得到图片的宽度 高度:

    java中得到图片的宽度 高度:BufferedImage srcImage = null;srcImage = ImageIO.read(new File(srcImagePath));int sr ...

  7. simple高度自定义的jqPaginator 项目中做分页的应用技巧

    最近做后台管理系统,分页用到的不少,项目中其实已经有分页功能的组件但是不够高度自定义,于是就找到了 jqPaginator 高度自定义的Html结构 初始化引用如下: $("#paginat ...

  8. 使用 <embed> 标签显示 flash文件(swf)格式 ,如何设置 width 和 height 宽度,高度.

    1. embed 标签 支持  .swf 格式.     .flv 的不支持. 2. 通常情况下, 网站中上传 多个 flash文件. 它的默认大小是不一样的. 而且 可以 宽度 大于 高度(横向的) ...

  9. js 获取浏览器/网页宽度高度整理

    网页宽度.高度: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.bo ...

  10. 相册 垂直居中; 水平居中. 1)宽度 大于高度, 宽度 100%; 2) 高度 大于 宽度 , 高度100%; getimagesize , list --->line-height , text-align, vertical-align, max-height, max-width

    一: 效果: 1) 黑色 部分是 相框. 2) 图片 要实现 水平居中, 垂直居中 3) 如果 宽度 大于 高度 ,那么 宽度 100% ,如图1 , 高度 自适应 ,同时不能超过黑色相框的 高度 ; ...

随机推荐

  1. bbs大作业

    1.项目开发基本流程 1.需求分析 2.架构设计 3.分组开发 4.提交测试 5.交付上线 2.项目流程 仿造博客园项目(核心:文章的增删改查) 1.表分析: 1.1用户表 1.2个人站点表 1.3文 ...

  2. 关闭Vim 的蜂鸣 | 解决Vim在Git BASH闪砾的问题

    set vb t_vb= 这个设置屏蔽了vim遇到无效命令时发出的蜂鸣声,而用一个快速的闪烁取而代之.

  3. 【TS】object类型

    object是一个对象,在ts中定义对象类型的语法为:let 变量名 :object = { } 在object类型中,对象内部定义的值是不受类型约束的,只要是一个object类型即可,例如: let ...

  4. 【译】.NET 7 中的性能改进(二)

    原文 | Stephen Toub 翻译 | 郑子铭 堆栈替换 (On-Stack Replacement) 堆栈替换 (OSR) 是 .NET 7 中最酷的 JIT 功能之一.但要真正了解 OSR, ...

  5. LG P4980【模板】Pólya 定理

    \(\text{Solution}\) \[ans = \frac{1}{n}\sum_{i=1}^n n^{(i,n)} = \frac{1}{n}\sum_{d|n}n^d\varphi(\fra ...

  6. JZOJ 5343. 【NOIP2017模拟9.3A组】健美猫

    题面 其中 \(1 \leq n \leq 2 \times 10^6\) 分析 考虑每次移动,发现负数对答案贡献少 \(1\),非负数多 \(1\) 每次移动都加了 \(1\) 负数变非负数关键点在 ...

  7. 跳板攻击之:frp代理转发

    跳板攻击之:frp代理转发 目录 跳板攻击之:frp代理转发 1 frp 介绍 2 frp 原理 3 实验环境 3.1 实验准备 3.2 实验拓扑 4 frp代理socks 5 frp代理stcp安全 ...

  8. python基本语法入门

    思维导图 https://gitee.com/starry-tong/python-data/blob/pyimage/day03.png python语法注释 """注 ...

  9. 零基础小白速成python?有了这本书你还在担心什么?

    <Python编程快速上手>书籍PDF高清版免费下载地址 提取码:bc9h 内容简介  · · · · · · 如今,人们面临的大多数任务都可以通过编写计算机软件来完成.Python是一种 ...

  10. Java面向对象之什么是多态?

    多态 动态编译:类型:可扩展性 即同一方法可以根据发送对象的不同而采用多种不同的行为方式. 一个对象的实际类型是确定的,但可以指向对象的引用的类型有很多. 多态存在的条件: 1.有继承关系,类型转换异 ...