Skip to content

Commit 6bb5121

Browse files
deepikahrdeepikahr
committed
GFTabs animation completed
1 parent 06682ea commit 6bb5121

2 files changed

Lines changed: 217 additions & 66 deletions

File tree

‎example/lib/main.dart‎

Lines changed: 58 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ class _MyHomePageState extends State<MyHomePage> {
7474
mainAxisAlignment: MainAxisAlignment.center,
7575
crossAxisAlignment: CrossAxisAlignment.center,
7676
children: <Widget>[
77+
7778
GFSlider(
7879
// pagerSize: 12.0,
7980
// activeIndicator: Colors.pink,
@@ -106,7 +107,63 @@ class _MyHomePageState extends State<MyHomePage> {
106107
),
107108

108109
GFTabs(
109-
110+
initialIndex: 0,
111+
length: 3,
112+
tabs: <Widget>[
113+
GFButton(
114+
onPressed: null,
115+
child: Text("share"),
116+
icon: Icon(Icons.share),
117+
),
118+
Tab(
119+
icon: Icon(Icons.error),
120+
child: Text(
121+
"Orders",
122+
),
123+
),
124+
Tab(
125+
child: Text(
126+
"Pastry",
127+
),
128+
),
129+
],
130+
tabBarViewChild: TabBarView(
131+
children: <Widget>[
132+
Container(
133+
color: Colors.red,
134+
child: Column(
135+
mainAxisAlignment: MainAxisAlignment.center,
136+
crossAxisAlignment: CrossAxisAlignment.center,
137+
children: <Widget>[
138+
Icon(Icons.directions_railway),
139+
GFButton(
140+
onPressed: null,
141+
child: Text("share"),
142+
icon: Icon(Icons.share),
143+
type: GFType.outline,
144+
shape: GFShape.pills,
145+
),
146+
],
147+
),
148+
),
149+
Icon(Icons.directions_car),
150+
Icon(Icons.directions_transit),
151+
],
152+
),
153+
labelColor: Colors.lightGreen,
154+
unselectedLabelColor: Colors.black,
155+
labelStyle: TextStyle(
156+
fontWeight: FontWeight.w500,
157+
fontSize: 13.0,
158+
color: Colors.deepOrange,
159+
fontFamily: 'OpenSansBold',
160+
),
161+
unselectedLabelStyle: TextStyle(
162+
fontWeight: FontWeight.w500,
163+
fontSize: 13.0,
164+
color: Colors.black,
165+
fontFamily: 'OpenSansBold',
166+
),
110167
),
111168

112169

‎lib/components/tabs/gf_tabs.dart‎

Lines changed: 159 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,150 @@
11
import 'package:flutter/material.dart';
2+
import 'package:flutter/foundation.dart';
3+
import 'package:flutter/rendering.dart';
4+
import 'package:flutter/widgets.dart';
5+
import 'package:ui_kit/components/button/gf_button.dart';
6+
27

38
class GFTabs extends StatefulWidget {
9+
GFTabs({
10+
Key key,
11+
this.initialIndex = 0,
12+
@required this.length,
13+
this.height,
14+
this.tabBarColor,
15+
this.indicatorColor,
16+
this.indicatorWeight = 2.0,
17+
this.indicatorPadding = EdgeInsets.zero,
18+
this.indicator,
19+
this.indicatorSize,
20+
this.labelColor,
21+
this.labelStyle,
22+
this.labelPadding,
23+
this.unselectedLabelColor,
24+
this.unselectedLabelStyle,
25+
this.tabBarViewChild,
26+
this.tabs,
27+
}):
28+
assert(length != null && length >= 0),
29+
assert(initialIndex != null && initialIndex >= 0 && (length == 0 || initialIndex < length));
30+
31+
/// The initial index of the selected tab. Defaults to zero.
32+
final int initialIndex;
33+
34+
/// The total number of tabs. Typically greater than one. Must match [TabBar.tabs]'s and
35+
/// [TabBarView.children]'s length.
36+
final int length;
37+
38+
/// Sets [GFTabs] height
39+
final double height;
40+
41+
/// Sets [TabBar] color using material color [Color]
42+
final Color tabBarColor;
43+
44+
/// The color of the line that appears below the selected tab.
45+
///
46+
/// If this parameter is null, then the value of the Theme's indicatorColor
47+
/// property is used.
48+
///
49+
/// If [indicator] is specified, this property is ignored.
50+
final Color indicatorColor;
51+
52+
/// The thickness of the line that appears below the selected tab.
53+
///
54+
/// The value of this parameter must be greater than zero and its default
55+
/// value is 2.0.
56+
///
57+
/// If [indicator] is specified, this property is ignored.
58+
final double indicatorWeight;
59+
60+
/// The horizontal padding for the line that appears below the selected tab.
61+
///
62+
/// For [isScrollable] tab bars, specifying [kTabLabelPadding] will align
63+
/// the indicator with the tab's text for [Tab] widgets and all but the
64+
/// shortest [Tab.text] values.
65+
///
66+
/// The [EdgeInsets.top] and [EdgeInsets.bottom] values of the
67+
/// [indicatorPadding] are ignored.
68+
///
69+
/// The default value of [indicatorPadding] is [EdgeInsets.zero].
70+
///
71+
/// If [indicator] is specified, this property is ignored.
72+
final EdgeInsetsGeometry indicatorPadding;
73+
74+
/// Defines the appearance of the selected tab indicator.
75+
///
76+
/// If [indicator] is specified, the [indicatorColor], [indicatorWeight],
77+
/// and [indicatorPadding] properties are ignored.
78+
///
79+
/// The default, underline-style, selected tab indicator can be defined with
80+
/// [UnderlineTabIndicator].
81+
///
82+
/// The indicator's size is based on the tab's bounds. If [indicatorSize]
83+
/// is [TabBarIndicatorSize.tab] the tab's bounds are as wide as the space
84+
/// occupied by the tab in the tab bar. If [indicatorSize] is
85+
/// [TabBarIndicatorSize.label], then the tab's bounds are only as wide as
86+
/// the tab widget itself.
87+
final Decoration indicator;
88+
89+
/// Defines how the selected tab indicator's size is computed.
90+
///
91+
/// The size of the selected tab indicator is defined relative to the
92+
/// tab's overall bounds if [indicatorSize] is [TabBarIndicatorSize.tab]
93+
/// (the default) or relative to the bounds of the tab's widget if
94+
/// [indicatorSize] is [TabBarIndicatorSize.label].
95+
///
96+
/// The selected tab's location appearance can be refined further with
97+
/// the [indicatorColor], [indicatorWeight], [indicatorPadding], and
98+
/// [indicator] properties.
99+
final TabBarIndicatorSize indicatorSize;
100+
101+
/// The color of selected tab labels.
102+
///
103+
/// Unselected tab labels are rendered with the same color rendered at 70%
104+
/// opacity unless [unselectedLabelColor] is non-null.
105+
///
106+
/// If this parameter is null, then the color of the [ThemeData.primaryTextTheme]'s
107+
/// body2 text color is used.
108+
final Color labelColor;
109+
110+
/// The color of unselected tab labels.
111+
///
112+
/// If this property is null, unselected tab labels are rendered with the
113+
/// [labelColor] with 70% opacity.
114+
final Color unselectedLabelColor;
115+
116+
/// The text style of the selected tab labels.
117+
///
118+
/// If [unselectedLabelStyle] is null, then this text style will be used for
119+
/// both selected and unselected label styles.
120+
///
121+
/// If this property is null, then the text style of the
122+
/// [ThemeData.primaryTextTheme]'s body2 definition is used.
123+
final TextStyle labelStyle;
124+
125+
/// The padding added to each of the tab labels.
126+
///
127+
/// If this property is null, then kTabLabelPadding is used.
128+
final EdgeInsetsGeometry labelPadding;
129+
130+
/// The text style of the unselected tab labels
131+
///
132+
/// If this property is null, then the [labelStyle] value is used. If [labelStyle]
133+
/// is null, then the text style of the [ThemeData.primaryTextTheme]'s
134+
/// body2 definition is used.
135+
final TextStyle unselectedLabelStyle;
136+
137+
/// One widget per tab.
138+
/// Its length must match the length of the [GFTabs.tabs]
139+
/// list, as well as the [controller]'s [GFTabs.length].
140+
final TabBarView tabBarViewChild;
141+
142+
/// Typically a list of two or more [Tab] widgets.
143+
///
144+
/// The length of this list must match the [controller]'s [TabController.length]
145+
/// and the length of the [TabBarView.children] list.
146+
final List<Widget> tabs;
147+
4148

5149
@override
6150
_GFTabsState createState() => _GFTabsState();
@@ -10,81 +154,31 @@ class _GFTabsState extends State<GFTabs> {
10154
@override
11155
Widget build(BuildContext context) {
12156
return Container(
13-
width: MediaQuery.of(context).size.height * 0.5,
14157
child: DefaultTabController(
15-
initialIndex: 0,
16-
length: 2,
158+
initialIndex: widget.initialIndex,
159+
length: widget.length,
17160
child: Container(
18-
height: MediaQuery.of(context).size.height * 0.5,
19-
width: MediaQuery.of(context).size.height * 0.5,
161+
height: widget.height == null ? MediaQuery.of(context).size.height * 0.5 : widget.height,
20162
child: Column(
21163
children: <Widget>[
22164
Material(
23165
type: MaterialType.button,
24-
color: Colors.teal,
166+
color: widget.tabBarColor ?? Theme.of(context).primaryColor,
25167
child: TabBar(
26-
indicatorColor: Colors.pink,
27-
indicatorSize: TabBarIndicatorSize.tab,
28-
labelColor: Colors.lightGreen,
29-
unselectedLabelColor: Colors.black,
30-
labelStyle: TextStyle(
31-
fontWeight: FontWeight.w500,
32-
fontSize: 13.0,
33-
color: Colors.deepOrange,
34-
fontFamily: 'OpenSansBold',
35-
),
36-
unselectedLabelStyle: TextStyle(
37-
fontWeight: FontWeight.w500,
38-
fontSize: 13.0,
39-
color: Colors.black,
40-
fontFamily: 'OpenSansBold',
41-
),
42-
tabs: [
43-
// GFButton(
44-
// onPressed: null,
45-
// child: Text("share"),
46-
// icon: Icon(Icons.share),
47-
// type: GFType.outline,
48-
// shape: GFShape.pills,
49-
// ),
50-
Tab(
51-
icon: Icon(Icons.error),
52-
child: Text(
53-
"Orders",
54-
),
55-
),
56-
Tab(
57-
child: Text(
58-
"Pastry",
59-
),
60-
),
61-
],
168+
labelColor: widget.labelColor,
169+
unselectedLabelColor: widget.unselectedLabelColor,
170+
labelStyle: widget.labelStyle,
171+
unselectedLabelStyle: widget.unselectedLabelStyle,
172+
indicatorColor: widget.indicatorColor,
173+
indicatorSize: widget.indicatorSize,
174+
indicator: widget.indicator,
175+
indicatorPadding: widget.indicatorPadding,
176+
indicatorWeight: widget.indicatorWeight,
177+
tabs: widget.tabs,
62178
),
63179
),
64180
Expanded(
65-
child: TabBarView(
66-
children: [
67-
// Container(
68-
// color: Colors.red,
69-
// child: Column(
70-
// mainAxisAlignment: MainAxisAlignment.center,
71-
// crossAxisAlignment: CrossAxisAlignment.center,
72-
// children: <Widget>[
73-
// Icon(Icons.directions_railway),
74-
//// GFButton(
75-
//// onPressed: null,
76-
//// child: Text("share"),
77-
//// icon: Icon(Icons.share),
78-
//// type: GFType.outline,
79-
//// shape: GFShape.pills,
80-
//// ),
81-
// ],
82-
// ),
83-
// ),
84-
Icon(Icons.directions_car),
85-
Icon(Icons.directions_transit),
86-
],
87-
),
181+
child: widget.tabBarViewChild
88182
),
89183
],
90184
),

0 commit comments

Comments
 (0)