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 : /// Create style builder.
24 1 : TitledTabStyle({
25 : List<TabItem> items,
26 : Color activeColor,
27 : Color color,
28 : this.curve,
29 : this.backgroundColor,
30 1 : }) : super(items: items, activeColor: activeColor, color: color);
31 :
32 1 : @override
33 : Widget build(BuildContext context, int index, bool active) {
34 1 : var pre = preActivate;
35 : if (active) {
36 1 : preActivate = index;
37 : }
38 2 : var item = items[index];
39 : if (active) {
40 1 : return TransitionContainer.slide(
41 1 : duration: Duration(milliseconds: 200),
42 1 : child: Container(
43 : width: ACTION_LAYOUT_SIZE,
44 : height: ACTION_LAYOUT_SIZE,
45 2 : margin: EdgeInsets.all(margin),
46 2 : decoration: BoxDecoration(shape: BoxShape.circle, color: activeColor),
47 1 : child: BlendImageIcon(
48 2 : item.activeIcon ?? item.icon,
49 : size: ACTION_INNER_BUTTON_SIZE,
50 2 : color: item.blend ? backgroundColor : null,
51 : ),
52 : ),
53 1 : curve: curve,
54 : );
55 : }
56 :
57 1 : if (pre == index) {
58 0 : return Stack(
59 : overflow: Overflow.visible,
60 : alignment: Alignment.center,
61 0 : children: <Widget>[
62 0 : Text(item.title, style: TextStyle(color: activeColor)),
63 0 : TransitionContainer.slide(
64 : reverse: true,
65 0 : child: Container(
66 : width: ACTION_LAYOUT_SIZE,
67 : height: ACTION_LAYOUT_SIZE,
68 0 : decoration: BoxDecoration(
69 : shape: BoxShape.circle,
70 0 : color: activeColor,
71 : ),
72 0 : child: BlendImageIcon(
73 0 : item.activeIcon ?? item.icon,
74 : size: ACTION_INNER_BUTTON_SIZE,
75 0 : color: item.blend ? backgroundColor : null,
76 : ),
77 : ),
78 0 : curve: curve,
79 : )
80 : ],
81 : );
82 : }
83 1 : return Center(
84 4 : child: Text(item.title, style: TextStyle(color: activeColor)),
85 : );
86 : }
87 : }
|