weekly_tab_pager

Description:

weekly tab pager

Weekly Tab Pager #
Customizable TabBar component with integrated TabView that displays weekdays and allows for infinite scrolling by week.
This component is used in the real-world application Homework Planner (iOS, Android).
Feel free to use this library if you find it useful!

Features #

TabBar and TabView connected together
Single controller for navigation
Smooth animiaton during scrolling
Infinite scrolling in both directions
Specified days of week in tabs
Callbacks for tab/page changes

Usage #
Add the following line to pubspec.yaml:
dependencies:
weekly_tab_pager: ^0.0.4
copied to clipboard
Import the package in your code:
import 'package:weekly_tab_pager/weekly_tab_pager.dart';
copied to clipboard
Declare a controller for navigation:
final controller = WeeklyTabController(position: DateTime.now());
copied to clipboard
Define how tabs will be built:
Widget _buildTab(BuildContext context, DateTime date) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(DateFormat('E').format(date).toUpperCase()),
const SizedBox(height: 4),
Text(date.day.toString()),
],
);
}
copied to clipboard
Define how pages will be built:
Widget _buildPage(BuildContext context, DateTime date) {
return Card(
margin: const EdgeInsets.all(24),
child: Center(
child: Text(
DateFormat.yMMMMd().format(date),
style: Theme.of(context).textTheme.titleLarge,
),
),
);
}
copied to clipboard
Add a navigator widget to your code:
WeeklyTabNavigator(
controller: controller,
weekdays: [1, 2, 3, 4, 5],
weekCount: 1000,
tabBuilder: (context, date) => _buildTab(context, date),
pageBuilder: (context, date) => _buildPage(context, date),
),
copied to clipboard
Use a controller to navigate to the specific date:
controller.animateTo(DateTime.now());
copied to clipboard
Provide callbacks to listen navigator events:
onTabScrolled: (date) => ...,
onTabChanged: (date) => ...,
onPageChanged: (date) => ...,
copied to clipboard
Make sure to check out example for more details.