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

[Feacture] Add custom Builder for the Tabbar and TabView #13

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

[Feacture] Add custom Builder for the Tabbar and TabView #13

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
630c190
[Sugestion] Add custom Builder for the Tabbar and TabView
rodolfogoulart Jul 25, 2024
3fa0d26
Add Vertical TabBar
rodolfogoulart Oct 30, 2024
955b327
update the NavigationRail selectedIndex
rodolfogoulart Oct 30, 2024
36f4e78
Add Scroll to NavigationRail
rodolfogoulart Oct 30, 2024
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
255 changes: 180 additions & 75 deletions lib/dynamic_tabbar.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,19 @@ enum MoveToTab {
last,
}

///Alignment of the vertical Tab
enum AlignmentVertical {
top,
center,
bottom;

const AlignmentVertical();

get value {
return (index - 1).toDouble();
}
}

/// Dynamic Tabs.
class DynamicTabBarWidget extends TabBar {
/// List of Tabs.
Expand Down Expand Up @@ -104,6 +117,31 @@ class DynamicTabBarWidget extends TabBar {
/// By default [clipBehavior] is Clip.hardEdge.
final Clip clipBehaviorTabBarView;

/// Custom Builder Widget for the Tab
final Widget Function(Widget widget)? customBuilderTab;

/// Custom builder Widget for the tabView
final Widget Function(Widget widget)? customBuilderTabView;

/// Set the tab on Vertical or Horizontal
///
/// default value = Horizontal
///
/// When Vertical, it will use the NavigationRail, so most of the custom properties of the Tab will not work only the basic
final Axis? axisTab;

/// Direction of the Tab
///
/// can be used on both, vertical of horizontal tab
///
/// up, left, right, down
final AxisDirection? axisDirectionTab;

/// only used when axisTab = Axis.vertical
///
/// Alignment of the vertical Tab
final AlignmentVertical? alignmentVertical;

DynamicTabBarWidget({
super.key,
required this.dynamicTabs,
Expand Down Expand Up @@ -146,15 +184,20 @@ class DynamicTabBarWidget extends TabBar {
this.dragStartBehaviorTabBarView = DragStartBehavior.start,
this.viewportFractionTabBarView = 1.0,
this.clipBehaviorTabBarView = Clip.hardEdge,
// Custom builder
this.customBuilderTab,
this.customBuilderTabView,
this.axisTab,
this.axisDirectionTab,
this.alignmentVertical,
}) : super(tabs: []);

@override
// ignore: library_private_types_in_public_api
_DynamicTabBarWidgetState createState() => _DynamicTabBarWidgetState();
}

class _DynamicTabBarWidgetState extends State<DynamicTabBarWidget>
with TickerProviderStateMixin {
class _DynamicTabBarWidgetState extends State<DynamicTabBarWidget> with TickerProviderStateMixin {
// Tab Controller
TabController? _tabController;

Expand All @@ -170,8 +213,7 @@ class _DynamicTabBarWidgetState extends State<DynamicTabBarWidget>
void didChangeDependencies() {
super.didChangeDependencies();

_tabController =
getTabController(initialIndex: widget.dynamicTabs.length - 1);
_tabController = getTabController(initialIndex: widget.dynamicTabs.length - 1);
widget.onTabControllerUpdated(_tabController = getTabController());
}

Expand Down Expand Up @@ -264,9 +306,139 @@ class _DynamicTabBarWidgetState extends State<DynamicTabBarWidget>
super.dispose();
}

final ValueNotifier selectedIndex = ValueNotifier(0);
@override
Widget build(BuildContext context) {
List<Widget> childrenTab = [
if (widget.leading != null) widget.leading!,
if (widget.isScrollable == true && widget.showBackIcon == true)
IconButton(
icon: widget.backIcon ??
Icon(
widget.axisTab == Axis.vertical ? Icons.keyboard_arrow_up : Icons.arrow_back_ios,
),
onPressed: _moveToPreviousTab,
),
Expanded(
child: widget.axisTab == Axis.vertical
? ValueListenableBuilder(
valueListenable: selectedIndex,
builder: (context, value, child) {
return LayoutBuilder(builder: (context, constraint) {
return SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(minHeight: constraint.maxHeight),
child: IntrinsicHeight(
child: NavigationRail(
destinations: widget.dynamicTabs.map((tab) {
return NavigationRailDestination(
icon: tab.title.icon ?? tab.title.child ?? Text(tab.title.text ?? ''),
label: Text(tab.title.text ?? ''),
);
}).toList(),
onDestinationSelected: (value) {
_tabController = getTabController(initialIndex: value);
_tabController?.animateTo(value);
selectedIndex.value = value;
widget.onTap?.call(value);
setState(() {
activeTab = value;
if (_tabController?.indexIsChanging == true) {
widget.onTabChanged!(_tabController?.index);
}
});
},
selectedIndex: selectedIndex.value,
indicatorColor: widget.indicatorColor,
useIndicator: true,
groupAlignment: widget.alignmentVertical?.value ?? AlignmentVertical.top.value,
backgroundColor: Colors.transparent,
),
),
),
);
});
})
: TabBar(
isScrollable: widget.isScrollable,
controller: _tabController,
tabs: widget.dynamicTabs.map((tab) => tab.title).toList(),
// Default Tab properties :---------------------------------------
padding: widget.padding,
indicatorColor: widget.indicatorColor,
automaticIndicatorColorAdjustment: widget.automaticIndicatorColorAdjustment,
indicatorWeight: widget.indicatorWeight,
indicatorPadding: widget.indicatorPadding,
indicator: widget.indicator,
indicatorSize: widget.indicatorSize,
dividerColor: widget.dividerColor,
dividerHeight: widget.dividerHeight,
labelColor: widget.labelColor,
labelStyle: widget.labelStyle,
labelPadding: widget.labelPadding,
unselectedLabelColor: widget.unselectedLabelColor,
unselectedLabelStyle: widget.unselectedLabelStyle,
dragStartBehavior: widget.dragStartBehavior,
overlayColor: widget.overlayColor,
mouseCursor: widget.mouseCursor,
enableFeedback: widget.enableFeedback,
onTap: widget.onTap,
physics: widget.physics,
splashFactory: widget.splashFactory,
splashBorderRadius: widget.splashBorderRadius,
tabAlignment: widget.tabAlignment,
),
),
if (widget.isScrollable == true && widget.showNextIcon == true)
IconButton(
icon: widget.nextIcon ??
Icon(
widget.axisTab == Axis.vertical ? Icons.keyboard_arrow_down : Icons.arrow_forward_ios,
),
onPressed: _moveToNextTab,
),
if (widget.trailing != null) widget.trailing!,
];
//
Widget tabBar = widget.axisTab == Axis.vertical
? Column(children: childrenTab)
: Row(mainAxisSize: MainAxisSize.min, children: childrenTab);
//
Widget tabView = TabBarView(
controller: _tabController,
physics: widget.physicsTabBarView,
dragStartBehavior: widget.dragStartBehaviorTabBarView,
viewportFraction: widget.viewportFractionTabBarView,
clipBehavior: widget.clipBehaviorTabBarView,
children: widget.dynamicTabs.map((tab) => tab.content).toList(),
);
// _tabController = getTabController(initialIndex: widget.dynamicTabs.length - 1);

Widget child;
if (widget.axisTab == Axis.vertical) {
child = Row(
mainAxisSize: MainAxisSize.max,
children: [
//custom render the tab on left
if (widget.axisDirectionTab == AxisDirection.left) widget.customBuilderTab?.call(tabBar) ?? tabBar,
Expanded(child: widget.customBuilderTabView?.call(tabView) ?? tabView),
//normal render the tab on right
if (widget.axisDirectionTab != AxisDirection.left) widget.customBuilderTab?.call(tabBar) ?? tabBar,
],
);
} else {
child = Column(
mainAxisSize: MainAxisSize.max,
children: [
// normal render the tab on top
if (widget.axisDirectionTab != AxisDirection.down) widget.customBuilderTab?.call(tabBar) ?? tabBar,
Expanded(child: widget.customBuilderTabView?.call(tabView) ?? tabView),
//if want to render the tab on bottom
if (widget.axisDirectionTab == AxisDirection.down) widget.customBuilderTab?.call(tabBar) ?? tabBar,
],
);
}

return ScrollConfiguration(
behavior: ScrollConfiguration.of(context).copyWith(
dragDevices: {
Expand All @@ -276,83 +448,15 @@ class _DynamicTabBarWidgetState extends State<DynamicTabBarWidget>
),
child: DefaultTabController(
length: widget.dynamicTabs.length,
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Row(
children: [
if (widget.leading != null) widget.leading!,
if (widget.isScrollable == true && widget.showBackIcon == true)
IconButton(
icon: widget.backIcon ??
const Icon(
Icons.arrow_back_ios,
),
onPressed: _moveToPreviousTab,
),
Expanded(
child: TabBar(
isScrollable: widget.isScrollable,
controller: _tabController,
tabs: widget.dynamicTabs.map((tab) => tab.title).toList(),
// Default Tab properties :---------------------------------------
padding: widget.padding,
indicatorColor: widget.indicatorColor,
automaticIndicatorColorAdjustment:
widget.automaticIndicatorColorAdjustment,
indicatorWeight: widget.indicatorWeight,
indicatorPadding: widget.indicatorPadding,
indicator: widget.indicator,
indicatorSize: widget.indicatorSize,
dividerColor: widget.dividerColor,
dividerHeight: widget.dividerHeight,
labelColor: widget.labelColor,
labelStyle: widget.labelStyle,
labelPadding: widget.labelPadding,
unselectedLabelColor: widget.unselectedLabelColor,
unselectedLabelStyle: widget.unselectedLabelStyle,
dragStartBehavior: widget.dragStartBehavior,
overlayColor: widget.overlayColor,
mouseCursor: widget.mouseCursor,
enableFeedback: widget.enableFeedback,
onTap: widget.onTap,
physics: widget.physics,
splashFactory: widget.splashFactory,
splashBorderRadius: widget.splashBorderRadius,
tabAlignment: widget.tabAlignment,
),
),
if (widget.isScrollable == true && widget.showNextIcon == true)
IconButton(
icon: widget.nextIcon ??
const Icon(
Icons.arrow_forward_ios,
),
onPressed: _moveToNextTab,
),
if (widget.trailing != null) widget.trailing!,
],
),
Expanded(
child: TabBarView(
controller: _tabController,
physics: widget.physicsTabBarView,
dragStartBehavior: widget.dragStartBehaviorTabBarView,
viewportFraction: widget.viewportFractionTabBarView,
clipBehavior: widget.clipBehaviorTabBarView,
children: widget.dynamicTabs.map((tab) => tab.content).toList(),
),
),
],
),
child: child,
),
);
}

_moveToNextTab() {
if (_tabController != null &&
_tabController!.index + 1 < _tabController!.length) {
if (_tabController != null && _tabController!.index + 1 < _tabController!.length) {
_tabController!.animateTo(_tabController!.index + 1);
selectedIndex.value = _tabController?.index;
} else {
// ScaffoldMessenger.of(context).showSnackBar(SnackBar(
// content: Text("Can't move forward"),
Expand All @@ -363,6 +467,7 @@ class _DynamicTabBarWidgetState extends State<DynamicTabBarWidget>
_moveToPreviousTab() {
if (_tabController != null && _tabController!.index > 0) {
_tabController!.animateTo(_tabController!.index - 1);
selectedIndex.value = _tabController?.index;
} else {
// ScaffoldMessenger.of(context).showSnackBar(SnackBar(
// content: Text("Can't go back"),
Expand Down