https://github.com/wjlee611/custom_tabbarview
Flutter TabBarView, but with enhanced customization capabilities.
https://github.com/wjlee611/custom_tabbarview
animation custom flutter tabbarview
Last synced: 5 months ago
JSON representation
Flutter TabBarView, but with enhanced customization capabilities.
- Host: GitHub
- URL: https://github.com/wjlee611/custom_tabbarview
- Owner: wjlee611
- License: other
- Created: 2025-06-10T05:05:08.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-11T03:33:02.000Z (about 1 year ago)
- Last Synced: 2025-10-23T00:07:56.206Z (9 months ago)
- Topics: animation, custom, flutter, tabbarview
- Language: Dart
- Homepage: https://pub.dev/packages/custom_tabbarview
- Size: 4.34 MB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# custom_tabbarview
This package is almost identical to the TabBarView API in the Flutter SDK, but with enhanced customization capabilities.
## Presets
fade
stack
carousel
toss1
toss2
## Features
1. It's a direct clone of TabBarView from the Flutter SDK, so more than 95% of the codebase is identical and reliable.
2. The widgets in children(tabs) are all built lazily, with keepAlive behavior as needed.
3. Transition animations are 100% customizable based on transition rate.
4. There are plenty of presets to get you started quickly, and hints for customization.
## Migration guide
### from TabBarView to CustomTabBarView
If you were previously using TabBarView, you can follow these steps to migrate.
1. Change from `TabBarView` to `CustomTabBarView`.
If you want to use the main feature -- `.builder` in addition, you can follow the steps below.
2. Rename `chindren` to `tabs`.
3. Implement `builder` type of `CustomTabBarViewBuilder` or just use other named constructor.
### from v0.x to v1.x
If you were previously using CustomTabBarView.builder, you can follow these steps to migrate.
1. Change from `builder` constructor to `custom`.
2. Change from `builder` parameter to `builderDelegate` and put previous builder function into builderDelegate class.
```dart
// AS-IS
CustomTabBarView.builder(
controller: controller,
tabs: tabs,
builder: (context, pageController, childrenWithKey, index) {
return childrenWithKey[index];
}
)
// TO-BE
CustomTabBarView.custom(
controller: controller,
tabs: tabs,
builderDelegate: CustomTabBarViewCustomBuilderDelegate(
(context, pageController, childrenWithKey, index) {
return childrenWithKey[index];
},
),
)
```
## Types (new API)
### CustomTabBarViewBuilder
The type of builder method used globally in CustomTabBarView.
It returns a Widget and takes the following arguments:
- `context`: `BuildContext` for the widget.
- `offset`: The offset value for each widget in the TabBarView.
1: left / 0: center / -1: right
- `widget`: Each child widget of tabs.
### CustomTabBarViewCustomBuilder
The type of custom builder method used globally in CustomTabBarView.
It returns a Widget and takes the following arguments:
- `context`: `BuildContext` for the widget.
- `pageController`: A `PageController` for PageView that internally implements TabBarView.
- `childrenWithKey`: The children or tabs passed in.
However, the implementation of TabBarView temporarily changes the order of the child widgets on transition.
- `index`: The index of the widget currently being displayed in the TabBarView.
> [!IMPORTANT]
> You can get the child that match the TabController with `childrenWithKey[index]`.
## Example
Except for the default constructor, the code snippet below performs the same behavior.
### default constructor
```dart
CustomTabBarView(
controller: _tabController,
children: _children,
)
```
### builder
```dart
CustomTabBarView.builder(
controller: _tabController,
tabs: _children,
builder: (context, offset, child) {
final dx = offset * width * 0.8;
final scale = 1 - offset.abs() * 0.1;
final opacity = 1 - offset.abs() * 2;
return Opacity(
opacity: opacity.clamp(0.0, 1.0),
child: Transform.scale(
scale: scale,
child: Transform.translate(offset: Offset(dx, 0), child: child),
),
);
},
)
```
### custom 1
```dart
CustomTabBarView.custom(
controller: _tabController,
physics: const PageScrollPhysics(),
dragStartBehavior: DragStartBehavior.down,
tabs: _children,
builderDelegate: CustomTabBarViewBuilderDelegate(
(context, offset, child) {
final dx = offset * width * 0.8;
final scale = 1 - offset.abs() * 0.1;
final opacity = 1 - offset.abs() * 2;
return Opacity(
opacity: opacity.clamp(0.0, 1.0),
child: Transform.scale(
scale: scale,
child: Transform.translate(offset: Offset(dx, 0), child: child),
),
);
},
),
)
```
### custom 2
```dart
CustomTabBarView.custom(
controller: _tabController,
tabs: _children,
builderDelegate: CustomTabBarViewCustomBuilderDelegate(
(context, pageController, childrenWithKey, index) {
return AnimatedBuilder(
animation: pageController,
builder: (context, child) {
final page = pageController.page ??
pageController.initialPage.toDouble();
final offset = (page - index) * pageController.viewportFraction;
final dx = offset * width * 0.8;
final scale = 1 - offset.abs() * 0.1;
final opacity = 1 - offset.abs() * 2;
return Opacity(
opacity: opacity.clamp(0.0, 1.0),
child: Transform.scale(
scale: scale,
child: Transform.translate(
offset: Offset(dx, 0), child: child),
),
);
},
child: childrenWithKey[index],
);
},
),
)
```
### preset
```dart
CustomTabBarView.carousel(
controller: _tabController,
physics: const PageScrollPhysics(),
dragStartBehavior: DragStartBehavior.down,
tabs: _children,
)
```