custom_tab_indicator.dart
5.97 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:one_key/res/colors.dart';
class CustomTabIndicator extends Decoration {
/// Create an underline style selected tab indicator.
///
/// The [borderSide] and [insets] arguments must not be null.
const CustomTabIndicator(
{this.borderSide = const BorderSide(width: 2.0, color: Colors.white),
this.insets = EdgeInsets.zero,
this.width,
this.radius,
this.color})
: assert(borderSide != null),
assert(insets != null);
/// The color and weight of the horizontal line drawn below the selected tab.
final BorderSide borderSide;
final double radius;
final double width;
final Color color;
/// 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 CustomTabIndicator) {
return CustomTabIndicator(
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 CustomTabIndicator) {
return CustomTabIndicator(
borderSide: BorderSide.lerp(borderSide, b.borderSide, t),
insets: EdgeInsetsGeometry.lerp(insets, b.insets, t),
);
}
return super.lerpTo(b, t);
}
@override
_UnderlinePainter createBoxPainter([VoidCallback onChanged]) {
return _UnderlinePainter(this, onChanged);
}
}
class _UnderlinePainter extends BoxPainter {
_UnderlinePainter(this.decoration, VoidCallback onChanged)
: assert(decoration != null),
super(onChanged);
final CustomTabIndicator 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 cw = (indicator.left + indicator.right) / 2;
// return Rect.fromLTWH(
// cw - decoration.width / 2,
// indicator.bottom - borderSide.width,
// decoration.width,
// borderSide.width);
// }
Rect _indicatorRectFor(Rect rect, TextDirection textDirection) {
assert(rect != null);
assert(textDirection != null);
final Rect indicator = insets.resolve(textDirection).deflateRect(rect);
return Rect.fromLTWH(
indicator.left,
indicator.bottom - borderSide.width,
indicator.width,
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 RRect rrect =
// RRect.fromRectAndRadius(indicator, Radius.circular(40.0));
// Gradient gradient = LinearGradient(colors: [
// MyColours.color_3BBFF5,
// MyColours.color_57a0ff,
// ]);
// final Paint paint = borderSide.toPaint()..strokeCap = StrokeCap.square;
// canvas.drawLine(Offset(rrect.left, rrect.bottom),
// Offset(rrect.right, rrect.bottom), paint);
// canvas.drawRRect(
// rrect,
// Paint()
// ..style = PaintingStyle.fill
// ..shader = gradient.createShader(rect));
// // Gradient gradient =
// // LinearGradient(colors: [Colors.red[200], Colors.red[800]]);
// Gradient gradient = LinearGradient(colors: [
// MyColours.color_3BBFF5,
// MyColours.color_57a0ff,
// ]);
// canvas.drawLine(rect.left, p2, paint)
// canvas.drawRRect(
// rrect,
// Paint()
// ..style = PaintingStyle.fill
// ..shader = gradient.createShader(rect));
// }
// 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;
// Gradient gradient = LinearGradient(colors: [
// MyColours.color_3BBFF5,
// MyColours.color_57a0ff,
// ]);
// final Rect indicator = _indicatorRectFor(rect, textDirection).deflate(borderSide.width / 2.0);
// final Paint paint = borderSide.toPaint()..strokeCap = StrokeCap.square ..shader = gradient.createShader(rect);
// canvas.drawLine(indicator.bottomLeft, indicator.bottomRight, paint);
// }
@override
void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
assert(configuration != null);
assert(configuration.size != null);
final Rect rect = offset & configuration.size;
final RRect rRect = RRect.fromRectAndRadius(
Rect.fromLTWH(
rect.left + (rect.width - ScreenUtil().setWidth(48 * 2)) / 2,
rect.top + rect.height - ScreenUtil().setWidth(20),
ScreenUtil().setWidth(48 * 2),
ScreenUtil().setWidth(6)),
Radius.circular(decoration.radius));
Gradient gradient = LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
MyColours.color_199095,
MyColours.color_199095,
],
);
canvas.drawRRect(
rRect,
Paint()
..style = PaintingStyle.fill
..shader = gradient.createShader(rect));
}
}