flutter_tab_sync

Description:

flutter tab sync

A Flutter package that simplifies scrolling to a specific index within a list of widgets that have different heights

Usage #
The package provides 3 widgets with different customizations for each
LabeledTabViewSync
use this widget to provide a label tab bar

LabeledTabViewSync<DepartmentModel>(
items: departments,
itemBuilder: (department, isSelected) => Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(department.name,
style: TextStyle(
fontSize: 20,
color: isSelected ? Colors.white : Colors.black38,
)),
const SizedBox(
height: 8,
),
...department.employees.map((employee) => ListTile(
title: Text(
employee,
style: TextStyle(
color: isSelected ? Colors.white : Colors.black38,
),
),
))
],
),
tabBuilder: (DepartmentModel item, bool isSelected) => SizedBox(
height: 24,
child: Text(
item.name,
style: TextStyle(
fontSize: 12,
color: isSelected ? Colors.white : Colors.black38,
),
),
),
labelStyle: LabelStyle(
color: Colors.deepPurple,
height: 24,
),
barStyle: const BarStyle(height: 32, padding: EdgeInsets.zero),
)
copied to clipboard
IndicatedTabViewSync
use this widget to provide a tab bar with indicator

IndicatedTabViewSync<DepartmentModel>(
items: departments,
itemBuilder: (department, isSelected) => Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(department.name,
style: TextStyle(
fontSize: 20,
color: isSelected ? Colors.white : Colors.black38,
)),
const SizedBox(
height: 8,
),
...department.employees.map((employee) => ListTile(
title: Text(
employee,
style: TextStyle(
color: isSelected ? Colors.white : Colors.black38,
),
),
))
],
),
tabBuilder: (DepartmentModel item, bool isSelected) => SizedBox(
height: 24,
child: Text(
item.name,
style: TextStyle(
fontSize: 12,
color: isSelected ? Colors.white : Colors.black38,
),
),
),
indicatorStyle: IndicatorStyle(
indicatorColor: Colors.deepPurple,
overlayColor: Colors.deepPurple.shade200,
indicatorThickness: 2,
indicatorPadding: const EdgeInsets.symmetric(horizontal: 4),
indicatorSize: TabBarIndicatorSize.label),
barStyle: const BarStyle(height: 32, padding: EdgeInsets.zero),
)
copied to clipboard
IndexedListSync
Also , you can use IndexedListSync to scroll to specific index by passing the selected index

ValueNotifier<int>selectedIndex=ValueNotifier(0);

ValueListenableBuilder<int>(
valueListenable: selectedIndex,
builder: (_,value,__) => IndexedListSync<DepartmentModel>(
selectedIndex: value,
items: departments,
itemBuilder: (department, isSelected) => Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(department.name,style: TextStyle(
fontSize: 20,color: isSelected ? Colors.white : Colors.black38,
)),
const SizedBox(
height: 8,
),
...department.employees.map((employee) => ListTile(
title: Text(
employee,
style: TextStyle(
color: isSelected ? Colors.white : Colors.black38,
),
),
))],
),);
copied to clipboard