Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

solve issue "the tab always starts from the first point on the left." #45

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

solve issue "the tab always starts from the first point on the left." #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions example/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
title: Text(widget.title!),
),
bottomNavigationBar: MotionTabBar(
isArabic: true,
controller: _motionTabBarController, // Add this controller if you need to change your tab programmatically
initialSelectedTab: "Home",
useSafeArea: true, // default: true, apply safe area wrapper
Expand Down
83 changes: 52 additions & 31 deletions lib/MotionTabBar.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,15 @@ import 'helpers/HalfPainter.dart';
typedef MotionTabBuilder = Widget Function();

class MotionTabBar extends StatefulWidget {
final Color? tabIconColor, tabIconSelectedColor, tabSelectedColor, tabBarColor;
final Color? tabIconColor,
tabIconSelectedColor,
tabSelectedColor,
tabBarColor;
final double? tabIconSize, tabIconSelectedSize, tabBarHeight, tabSize;
final TextStyle? textStyle;
final Function? onTabItemSelected;
final String initialSelectedTab;

bool isArabic;
final List<String?> labels;
final List<IconData>? icons;
final bool useSafeArea;
Expand All @@ -24,6 +27,7 @@ class MotionTabBar extends StatefulWidget {
final List<Widget?>? badges;

MotionTabBar({
required this.isArabic,
this.textStyle,
this.tabIconColor = Colors.black,
this.tabIconSize = 24,
Expand All @@ -42,13 +46,16 @@ class MotionTabBar extends StatefulWidget {
this.controller,
}) : assert(labels.contains(initialSelectedTab)),
assert(icons != null && icons.length == labels.length),
assert((badges != null && badges.length > 0) ? badges.length == labels.length : true);
assert((badges != null && badges.length > 0)
? badges.length == labels.length
: true);

@override
_MotionTabBarState createState() => _MotionTabBarState();
}

class _MotionTabBarState extends State<MotionTabBar> with TickerProviderStateMixin {
class _MotionTabBarState extends State<MotionTabBar>
with TickerProviderStateMixin {
late AnimationController _animationController;
late Tween<double> _positionTween;
late Animation<double> _positionAnimation;
Expand All @@ -67,15 +74,15 @@ class _MotionTabBarState extends State<MotionTabBar> with TickerProviderStateMix
IconData? activeIcon;
String? selectedTab;

bool isRtl = false;
List<Widget>? badges;
Widget? activeBadge;

double getPosition(bool isRTL) {
double getPosition(bool isArabic) {
print("print IrL in get position ${isArabic}");
double pace = 2 / (labels.length - 1);
double position = (pace * index) - 1;

if (isRTL) {
if (isArabic) {
// If RTL, reverse the position calculation
position = 1 - (pace * index);
}
Expand All @@ -88,16 +95,19 @@ class _MotionTabBarState extends State<MotionTabBar> with TickerProviderStateMix
super.initState();

WidgetsBinding.instance.addPostFrameCallback((_) async {
isRtl = Directionality.of(context).index == 0;
widget.isArabic = Directionality.of(context).index == 0;
print("print the dir${widget.isArabic}");
//Directionality.of(context) == TextDirection.rtl;
});

if(widget.controller != null) {
widget.controller!.onTabChange= (index) {
if (widget.controller != null) {
widget.controller!.onTabChange = (index) {
setState(() {
activeIcon = widget.icons![index];
selectedTab = widget.labels[index];
});
_initAnimationAndStart(_positionAnimation.value, getPosition(isRtl));
_initAnimationAndStart(
_positionAnimation.value, getPosition(widget.isArabic));
};
}
labels = widget.labels;
Expand All @@ -111,8 +121,11 @@ class _MotionTabBarState extends State<MotionTabBar> with TickerProviderStateMix
activeIcon = icons[selectedTab];

// init badge text
int selectedIndex = labels.indexWhere((element) => element == widget.initialSelectedTab);
activeBadge = (widget.badges != null && widget.badges!.length > 0) ? widget.badges![selectedIndex] : null;
int selectedIndex =
labels.indexWhere((element) => element == widget.initialSelectedTab);
activeBadge = (widget.badges != null && widget.badges!.length > 0)
? widget.badges![selectedIndex]
: null;

_animationController = AnimationController(
duration: Duration(milliseconds: ANIM_DURATION),
Expand All @@ -124,15 +137,15 @@ class _MotionTabBarState extends State<MotionTabBar> with TickerProviderStateMix
vsync: this,
);

_positionTween = Tween<double>(begin: getPosition(isRtl), end: 1);

_positionAnimation = _positionTween.animate(CurvedAnimation(parent: _animationController, curve: Curves.easeOut))
_positionTween = Tween<double>(begin: getPosition(widget.isArabic), end: 1);
_positionAnimation = _positionTween.animate(
CurvedAnimation(parent: _animationController, curve: Curves.easeOut))
..addListener(() {
setState(() {});
});

_fadeFabOutAnimation = Tween<double>(begin: 1, end: 0)
.animate(CurvedAnimation(parent: _fadeOutController, curve: Curves.easeOut))
_fadeFabOutAnimation = Tween<double>(begin: 1, end: 0).animate(
CurvedAnimation(parent: _fadeOutController, curve: Curves.easeOut))
..addListener(() {
setState(() {
fabIconAlpha = _fadeFabOutAnimation.value;
Expand All @@ -142,14 +155,19 @@ class _MotionTabBarState extends State<MotionTabBar> with TickerProviderStateMix
if (status == AnimationStatus.completed) {
setState(() {
activeIcon = icons[selectedTab];
int selectedIndex = labels.indexWhere((element) => element == selectedTab);
activeBadge = (widget.badges != null && widget.badges!.length > 0) ? widget.badges![selectedIndex] : null;
int selectedIndex =
labels.indexWhere((element) => element == selectedTab);
activeBadge = (widget.badges != null && widget.badges!.length > 0)
? widget.badges![selectedIndex]
: null;
});
}
});

_fadeFabInAnimation = Tween<double>(begin: 0, end: 1)
.animate(CurvedAnimation(parent: _animationController, curve: Interval(0.8, 1, curve: Curves.easeOut)))
_fadeFabInAnimation = Tween<double>(begin: 0, end: 1).animate(
CurvedAnimation(
parent: _animationController,
curve: Interval(0.8, 1, curve: Curves.easeOut)))
..addListener(() {
setState(() {
fabIconAlpha = _fadeFabInAnimation.value;
Expand Down Expand Up @@ -225,7 +243,8 @@ class _MotionTabBarState extends State<MotionTabBar> with TickerProviderStateMix
SizedBox(
height: widget.tabSize! + 15,
width: widget.tabSize! + 35,
child: CustomPaint(painter: HalfPainter(color: widget.tabBarColor)),
child: CustomPaint(
painter: HalfPainter(color: widget.tabBarColor)),
),
SizedBox(
height: widget.tabSize,
Expand All @@ -249,10 +268,10 @@ class _MotionTabBarState extends State<MotionTabBar> with TickerProviderStateMix
),
activeBadge != null
? Positioned(
top: 0,
right: 0,
child: activeBadge!,
)
top: 0,
right: 0,
child: activeBadge!,
)
: SizedBox(),
],
),
Expand All @@ -273,12 +292,13 @@ class _MotionTabBarState extends State<MotionTabBar> with TickerProviderStateMix
}

List<Widget> generateTabItems() {
bool isRtl = Directionality.of(context).index == 0;
bool isArabic = Directionality.of(context).index == 0;
return labels.map((tabLabel) {
IconData? icon = icons[tabLabel];

int selectedIndex = labels.indexWhere((element) => element == tabLabel);
Widget? badge = (widget.badges != null && widget.badges!.length > 0) ? widget.badges![selectedIndex] : null;
Widget? badge = (widget.badges != null && widget.badges!.length > 0)
? widget.badges![selectedIndex]
: null;

return MotionTabItem(
selected: selectedTab == tabLabel,
Expand All @@ -294,7 +314,8 @@ class _MotionTabBarState extends State<MotionTabBar> with TickerProviderStateMix
selectedTab = tabLabel;
widget.onTabItemSelected!(index);
});
_initAnimationAndStart(_positionAnimation.value, getPosition(isRtl));
_initAnimationAndStart(
_positionAnimation.value, getPosition(isArabic));
},
);
}).toList();
Expand Down
71 changes: 48 additions & 23 deletions pubspec.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,10 @@ packages:
dependency: transitive
description:
name: collection
sha256: "4a07be6cb69c84d677a6c3096fcf960cc3285a8330b4603e0d463d15d9bd934c"
sha256: ee67cb0715911d28db6bf4af1026078bd6f0128b07a5f66fb2ed94ec6783c09a
url: "https://pub.dev"
source: hosted
version: "1.17.1"
version: "1.18.0"
fake_async:
dependency: transitive
description:
Expand All @@ -59,46 +59,62 @@ packages:
description: flutter
source: sdk
version: "0.0.0"
js:
leak_tracker:
dependency: transitive
description:
name: js
sha256: f2c445dce49627136094980615a031419f7f3eb393237e4ecd97ac15dea343f3
name: leak_tracker
sha256: "3f87a60e8c63aecc975dda1ceedbc8f24de75f09e4856ea27daf8958f2f0ce05"
url: "https://pub.dev"
source: hosted
version: "0.6.7"
version: "10.0.5"
leak_tracker_flutter_testing:
dependency: transitive
description:
name: leak_tracker_flutter_testing
sha256: "932549fb305594d82d7183ecd9fa93463e9914e1b67cacc34bc40906594a1806"
url: "https://pub.dev"
source: hosted
version: "3.0.5"
leak_tracker_testing:
dependency: transitive
description:
name: leak_tracker_testing
sha256: "6ba465d5d76e67ddf503e1161d1f4a6bc42306f9d66ca1e8f079a47290fb06d3"
url: "https://pub.dev"
source: hosted
version: "3.0.1"
matcher:
dependency: transitive
description:
name: matcher
sha256: "6501fbd55da300384b768785b83e5ce66991266cec21af89ab9ae7f5ce1c4cbb"
sha256: d2323aa2060500f906aa31a895b4030b6da3ebdcc5619d14ce1aada65cd161cb
url: "https://pub.dev"
source: hosted
version: "0.12.15"
version: "0.12.16+1"
material_color_utilities:
dependency: transitive
description:
name: material_color_utilities
sha256: d92141dc6fe1dad30722f9aa826c7fbc896d021d792f80678280601aff8cf724
sha256: f7142bb1154231d7ea5f96bc7bde4bda2a0945d2806bb11670e30b850d56bdec
url: "https://pub.dev"
source: hosted
version: "0.2.0"
version: "0.11.1"
meta:
dependency: transitive
description:
name: meta
sha256: "3c74dbf8763d36539f114c799d8a2d87343b5067e9d796ca22b5eb8437090ee3"
sha256: bdb68674043280c3428e9ec998512fb681678676b3c54e773629ffe74419f8c7
url: "https://pub.dev"
source: hosted
version: "1.9.1"
version: "1.15.0"
path:
dependency: transitive
description:
name: path
sha256: "8829d8a55c13fc0e37127c29fedf290c102f4e40ae94ada574091fe0ff96c917"
sha256: "087ce49c3f0dc39180befefc60fdb4acd8f8620e5682fe2476afd0b3688bb4af"
url: "https://pub.dev"
source: hosted
version: "1.8.3"
version: "1.9.0"
sky_engine:
dependency: transitive
description: flutter
Expand All @@ -108,26 +124,26 @@ packages:
dependency: transitive
description:
name: source_span
sha256: dd904f795d4b4f3b870833847c461801f6750a9fa8e61ea5ac53f9422b31f250
sha256: "53e943d4206a5e30df338fd4c6e7a077e02254531b138a15aec3bd143c1a8b3c"
url: "https://pub.dev"
source: hosted
version: "1.9.1"
version: "1.10.0"
stack_trace:
dependency: transitive
description:
name: stack_trace
sha256: c3c7d8edb15bee7f0f74debd4b9c5f3c2ea86766fe4178eb2a18eb30a0bdaed5
sha256: "73713990125a6d93122541237550ee3352a2d84baad52d375a4cad2eb9b7ce0b"
url: "https://pub.dev"
source: hosted
version: "1.11.0"
version: "1.11.1"
stream_channel:
dependency: transitive
description:
name: stream_channel
sha256: "83615bee9045c1d322bbbd1ba209b7a749c2cbcdcb3fdd1df8eb488b3279c1c8"
sha256: ba2aa5d8cc609d96bbb2899c28934f9e1af5cddbd60a827822ea467161eb54e7
url: "https://pub.dev"
source: hosted
version: "2.1.1"
version: "2.1.2"
string_scanner:
dependency: transitive
description:
Expand All @@ -148,10 +164,10 @@ packages:
dependency: transitive
description:
name: test_api
sha256: eb6ac1540b26de412b3403a163d919ba86f6a973fe6cc50ae3541b80092fdcfb
sha256: "5b8a98dafc4d5c4c9c72d8b31ab2b23fc13422348d2997120294d3bac86b4ddb"
url: "https://pub.dev"
source: hosted
version: "0.5.1"
version: "0.7.2"
vector_math:
dependency: "direct main"
description:
Expand All @@ -160,5 +176,14 @@ packages:
url: "https://pub.dev"
source: hosted
version: "2.1.4"
vm_service:
dependency: transitive
description:
name: vm_service
sha256: "5c5f338a667b4c644744b661f309fb8080bb94b18a7e91ef1dbd343bed00ed6d"
url: "https://pub.dev"
source: hosted
version: "14.2.5"
sdks:
dart: ">=3.0.0-0 <4.0.0"
dart: ">=3.3.0 <4.0.0"
flutter: ">=3.18.0-18.0.pre.54"