Line data Source code
1 : import 'package:flutter/cupertino.dart';
2 : import 'package:flutter/material.dart';
3 :
4 : import '../../convex_bottom_bar.dart';
5 : import 'blend_image_icon.dart';
6 : import 'transition_container.dart';
7 :
8 : /// tab icon, text animated with pop transition
9 : class TitledTabStyle extends DelegateBuilder {
10 : final List<TabItem> items;
11 : final Color activeColor;
12 : final Color color;
13 : final Curve curve;
14 : final Color backgroundColor;
15 : int preActivate = -1;
16 : final margin = (ACTION_LAYOUT_SIZE - ACTION_INNER_BUTTON_SIZE) / 4;
17 :
18 1 : TitledTabStyle({
19 : this.items,
20 : this.activeColor,
21 : this.color,
22 : this.curve,
23 : this.backgroundColor,
24 : });
25 :
26 1 : @override
27 : Widget build(BuildContext context, int index, bool active) {
28 1 : var pre = preActivate;
29 : if (active) {
30 1 : preActivate = index;
31 : }
32 2 : var item = items[index];
33 : if (active) {
34 1 : return TransitionContainer.slide(
35 1 : duration: Duration(milliseconds: 200),
36 1 : child: Container(
37 : width: ACTION_LAYOUT_SIZE,
38 : height: ACTION_LAYOUT_SIZE,
39 2 : margin: EdgeInsets.all(margin),
40 2 : decoration: BoxDecoration(shape: BoxShape.circle, color: activeColor),
41 1 : child: BlendImageIcon(
42 2 : item.activeIcon ?? item.icon,
43 : size: ACTION_INNER_BUTTON_SIZE,
44 2 : color: item.blend ? backgroundColor : null,
45 : ),
46 : ),
47 1 : curve: curve,
48 : );
49 : }
50 :
51 1 : if (pre == index) {
52 0 : return Stack(
53 : overflow: Overflow.visible,
54 : alignment: Alignment.center,
55 0 : children: <Widget>[
56 0 : Text(item.title, style: TextStyle(color: activeColor)),
57 0 : TransitionContainer.slide(
58 : reverse: true,
59 0 : child: Container(
60 : width: ACTION_LAYOUT_SIZE,
61 : height: ACTION_LAYOUT_SIZE,
62 0 : decoration: BoxDecoration(
63 : shape: BoxShape.circle,
64 0 : color: activeColor,
65 : ),
66 0 : child: BlendImageIcon(
67 0 : item.activeIcon ?? item.icon,
68 : size: ACTION_INNER_BUTTON_SIZE,
69 0 : color: item.blend ? backgroundColor : null,
70 : ),
71 : ),
72 0 : curve: curve,
73 : )
74 : ],
75 : );
76 : }
77 1 : return Center(
78 4 : child: Text(item.title, style: TextStyle(color: activeColor)),
79 : );
80 : }
81 : }
|