Skip to content

Commit

Permalink
Custom Widget in tab item. Background color for tab bar.
Browse files Browse the repository at this point in the history
  • Loading branch information
@manojeeva
manojeeva committed Sep 29, 2020
1 parent 322e1fc commit 554de42
Show file tree
Hide file tree
Showing 6 changed files with 182 additions and 42 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
## [0.1.0] - Custom Widget in tab item. Background color for tab bar.
## [0.0.4] - RangeError Fixed.
## [0.0.3] - Duration Added. Now user can added custom duration.
## [0.0.2] - Example Added.
Expand Down
116 changes: 101 additions & 15 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ Wrap your code with Default Tab Controller to animate when you change tab.

goto pubspec.yaml file add
```
jumping_bottom_nav_bar : 0.0.4
jumping_bottom_nav_bar : 0.0.5
```

import inside your project.
Expand Down Expand Up @@ -49,6 +49,55 @@ Changing Icon and Curve colors
curveColor: Colors.yellow,
)
```
Custom Tab Widget buildWidget color is animationColor.
```
TabItemIcon(
buildWidget: (_, color) => Container(
color: color.value,
child: Text("1"),
),
startColor: Colors.red,
endColor: Colors.green,
curveColor: Colors.yellow,
),
```

Show Notification Count or Icon
```
TabItemIcon(
buildWidget: (_, color) => Stack(
children: <Widget>[
new Icon(
Icons.notifications,
size: 30,
),
new Positioned(
top: 1.0,
right: 0.0,
child: new Stack(
children: <Widget>[
new Icon(
Icons.brightness_1,
size: 18.0,
color: Colors.green[800],
),
new Positioned(
top: 1.0,
right: 4.0,
child: new Text("2",
style: new TextStyle(
color: Colors.white,
fontSize: 15.0,
fontWeight: FontWeight.w500,
)),
)
],
),
)
],
),
),
```
Changing Circle Color
```
LinearGradient(
Expand All @@ -63,33 +112,22 @@ LinearGradient(

## Full Example.
```
class BottomBarPage extends StatefulWidget {
cclass BottomBarPage extends StatefulWidget {
@override
_BottomBarPageState createState() => _BottomBarPageState();
}
class _BottomBarPageState extends State<BottomBarPage> {
int selectedIndex = 2;
final iconList = [
TabItemIcon(
iconData: Icons.home,
startColor: Colors.red,
endColor: Colors.green,
curveColor: Colors.yellow),
TabItemIcon(iconData: Icons.healing, curveColor: Colors.orange),
TabItemIcon(iconData: Icons.location_on, curveColor: Colors.green),
TabItemIcon(iconData: Icons.notifications),
TabItemIcon(iconData: Icons.supervised_user_circle),
];
void onChangeTab(int index) {
selectedIndex = index;
}
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: iconList.length,
length: 5,
child: Scaffold(
appBar: AppBar(
title: Text("Bottom Bar Page"),
Expand All @@ -115,6 +153,7 @@ class _BottomBarPageState extends State<BottomBarPage> {
),
bottomNavigationBar: JumpingTabBar(
onChangeTab: onChangeTab,
backgroundColor: Colors.blue,
circleGradient: LinearGradient(
colors: [
Colors.purpleAccent,
Expand All @@ -123,12 +162,59 @@ class _BottomBarPageState extends State<BottomBarPage> {
begin: Alignment.bottomLeft,
end: Alignment.topRight,
),
items: iconList,
items: [
TabItemIcon(
buildWidget: (_, color) => Container(
color: color.value,
child: Text("1"),
),
startColor: Colors.red,
endColor: Colors.green,
curveColor: Colors.yellow,
),
TabItemIcon(iconData: Icons.healing, curveColor: Colors.orange),
TabItemIcon(iconData: Icons.location_on, curveColor: Colors.green),
TabItemIcon(
buildWidget: (_, color) => Stack(
children: <Widget>[
new Icon(
Icons.notifications,
size: 30,
),
new Positioned(
top: 1.0,
right: 0.0,
child: new Stack(
children: <Widget>[
new Icon(
Icons.brightness_1,
size: 18.0,
color: Colors.green[800],
),
new Positioned(
top: 1.0,
right: 4.0,
child: new Text("2",
style: new TextStyle(
color: Colors.white,
fontSize: 15.0,
fontWeight: FontWeight.w500,
)),
)
],
),
)
],
),
),
TabItemIcon(iconData: Icons.supervised_user_circle),
],
selectedIndex: selectedIndex,
),
),
);
}
}
```
62 changes: 48 additions & 14 deletions example/bottom_bar_page.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,25 +9,14 @@ class BottomBarPage extends StatefulWidget {
class _BottomBarPageState extends State<BottomBarPage> {
int selectedIndex = 2;

final iconList = [
TabItemIcon(
iconData: Icons.home,
startColor: Colors.red,
endColor: Colors.green,
curveColor: Colors.yellow),
TabItemIcon(iconData: Icons.healing, curveColor: Colors.orange),
TabItemIcon(iconData: Icons.location_on, curveColor: Colors.green),
TabItemIcon(iconData: Icons.notifications),
TabItemIcon(iconData: Icons.supervised_user_circle),
];
void onChangeTab(int index) {
selectedIndex = index;
}

@override
Widget build(BuildContext context) {
return DefaultTabController(
length: iconList.length,
length: 5,
child: Scaffold(
appBar: AppBar(
title: Text("Bottom Bar Page"),
Expand All @@ -53,7 +42,6 @@ class _BottomBarPageState extends State<BottomBarPage> {
),
bottomNavigationBar: JumpingTabBar(
onChangeTab: onChangeTab,
// duration: Duration(seconds: 3),
circleGradient: LinearGradient(
colors: [
Colors.purpleAccent,
Expand All @@ -62,7 +50,53 @@ class _BottomBarPageState extends State<BottomBarPage> {
begin: Alignment.bottomLeft,
end: Alignment.topRight,
),
items: iconList,
items: [
TabItemIcon(
buildWidget: (_, color) => Container(
color: color.value,
child: Text("1"),
),
startColor: Colors.red,
endColor: Colors.green,
curveColor: Colors.yellow,
),
TabItemIcon(iconData: Icons.healing, curveColor: Colors.orange),
TabItemIcon(iconData: Icons.location_on, curveColor: Colors.green),
TabItemIcon(
buildWidget: (_, color) => Stack(
children: <Widget>[
new Icon(
Icons.notifications,
size: 30,
),
new Positioned(
top: 1.0,
right: 0.0,
child: new Stack(
children: <Widget>[
new Icon(
Icons.brightness_1,
size: 18.0,
color: Colors.green[800],
),
new Positioned(
top: 1.0,
right: 4.0,
child: new Text("2",
style: new TextStyle(
color: Colors.white,
fontSize: 15.0,
fontWeight: FontWeight.w500,
)),
)
],
),
)
],
),
),
TabItemIcon(iconData: Icons.supervised_user_circle),
],
selectedIndex: selectedIndex,
),
),
Expand Down
25 changes: 18 additions & 7 deletions lib/src/tab_bar.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,20 @@ class JumpingTabBar extends StatefulWidget {
final void Function(int index) onChangeTab;
final int selectedIndex;
final TabController controller;
final List<TabItemIcon> items;
final Duration duration;
final Color backgroundColor;

final List<TabItemIcon> items;

final Gradient circleGradient;
JumpingTabBar({
Key key,
this.backgroundColor,
this.duration = const Duration(milliseconds: 700),
this.circleGradient = const LinearGradient(
colors: [
Color(0xff630141),
Color(0xffB83F7D),
const Color(0xff630141),
const Color(0xffB83F7D),
],
begin: Alignment.bottomLeft,
end: Alignment.topRight,
Expand Down Expand Up @@ -146,6 +149,10 @@ class _JumpingTabBarState extends State<JumpingTabBar>
return Stack(
overflow: Overflow.visible,
children: [
Container(
height: 75,
color: widget.backgroundColor,
),
SizedBox(
height: 75,
child: AnimatedBuilder(
Expand Down Expand Up @@ -179,10 +186,14 @@ class _JumpingTabBarState extends State<JumpingTabBar>
),
SizedBox(
height: 75,
child: Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
for (var i = 0; i < widget.items.length; i++) getTabItem(i),
]),
)
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: List.generate(
widget.items.length,
(index) => getTabItem(index),
),
),
),
],
);
}
Expand Down
15 changes: 10 additions & 5 deletions lib/src/tab_item.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,11 @@ class TabItem extends StatefulWidget {
final bool isSelected;
final int index;
final Duration duration;

final void Function(int index) onTabChange;
TabItem({
@required this.duration,
@required this.tabItemIcon,
this.tabItemIcon,
@required this.onTabChange,
@required this.index,
@required this.isSelected,
Expand Down Expand Up @@ -54,7 +55,7 @@ class TabItemState extends State<TabItem> with SingleTickerProviderStateMixin {

transAnim = Tween(
begin: Offset(0, 0),
end: Offset(0, -25),
end: Offset(0, -28),
).animate(animationController);
colorAnim = ColorTween(
begin: widget.tabItemIcon.startColor ?? Colors.black,
Expand All @@ -74,9 +75,13 @@ class TabItemState extends State<TabItem> with SingleTickerProviderStateMixin {
alignment: Alignment.center,
child: Transform.translate(
offset: transAnim.value,
// decoration: BoxDecoration(color: Colors.white, border: Border.all()),
child: Icon(widget.tabItemIcon.iconData,
size: 30, color: colorAnim.value),
child: widget.tabItemIcon.buildWidget != null
? widget.tabItemIcon.buildWidget(context, colorAnim)
: Icon(
widget.tabItemIcon.iconData,
size: 30,
color: colorAnim.value,
),
),
),
),
Expand Down
5 changes: 4 additions & 1 deletion lib/src/tab_item_icon.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,14 @@ class TabItemIcon {
final Color endColor;
final IconData iconData;
final Color curveColor;
final Widget Function(BuildContext context, Animation<Color> color)
buildWidget;

TabItemIcon({
this.curveColor = const Color(0xff2A0835),
this.startColor = Colors.black,
this.endColor = Colors.white,
@required this.iconData,
this.iconData,
this.buildWidget,
});
}

0 comments on commit 554de42

Please sign in to comment.