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