polar_tab_bar

Description:

polar tab bar

Polar Tab Bar #
A decent & customizable rounded tabbar with built-in PageView that can save UI state.
There are two types of Polar Tab Bar, the Pill annd the Step



Pill (PolarTabType.Pill)
Step (PolarTabType.Step)









Get Started #
Add the polar_tab_bar in your pubspec.yaml
dependencies:
...
polar_tab_bar: ^0.0.2
copied to clipboard
Basic Usage #
First create the tab items
final List<PolarTabItem> tabs = [
PolarTabItem(
index: 0,
title: "Home",
page: const PolarTabPage(
child: HomePage(),
),
),
PolarTabItem(
index: 1,
title: "Category",
page: const PolarTabPage(child: CategoryPage()),
),
PolarTabItem(
index: 2,
title: "Profile",
page: const PolarTabPage(child: ProfilePage()),
),
];
copied to clipboard
Note: Wrap your child widget with PolarTabPage to save UI state on each navigation
Then you can use PolarTabBar on your widget
Scaffold(
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.indigoAccent,
title: const Text(
"Polar Tabbar",
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
),
),
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(16),
child: PolarTabBar(
type: PolarTabType.pill, // Default Type
tabs: tabs
),
),
),
)
copied to clipboard
Customization #

type (Default: PolarTabType.pill) - Type of tab bar
pageController (Optional) - Provide if you want full control of the internal PageView
height (Optional) - Provide height if you use PolarTabBar inside Scrolling parent (ListView, SingleChildScrollView, or else)
contentSpacing - Spacing on each tab items
innerPadding - Spacing inside tab's pill
radius - Tab item's border radius
background (Optional) - Inactive background color of tab's pill
activeBackground (Optional) - Active background color of tab's pill
titleStyle (Optional) - TextStyle of inactive title
activeTitleStyle (Optional) - TextStyle of active title
isDense () - Make the tab more compact
curve - Animation's curve
duration (Default: 300ms) - Animation's duration
swipable (Default: true) - Make PageView swipable

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter