zeba_academy_tab_system
A powerful and customizable Flutter tab system with animated switching, custom indicators, nested tabs, scrollable tabs, and seamless PageView synchronization.
✨ Features
✅ Scrollable tabs
✅ Custom indicators
✅ Animated tab switching
✅ Nested tabs support
✅ PageView synchronization
✅ Easy customization
✅ Clean architecture
✅ Production-ready components
✅ Lightweight and fast
📦 Installation
Add this to your pubspec.yaml:
dependencies:
zeba_academy_tab_system: ^0.0.1
Then run:
flutter pub get
🚀 Import
import 'package:zeba_academy_tab_system/zeba_academy_tab_system.dart';
🔥 Basic Usage
import 'package:flutter/material.dart';
import 'package:zeba_academy_tab_system/zeba_academy_tab_system.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: const HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage>
with TickerProviderStateMixin {
late ZebaTabController controller;
final tabs = [
ZebaTabModel(
title: 'Home',
icon: Icons.home,
child: const Center(
child: Text('Home Page'),
),
),
ZebaTabModel(
title: 'Courses',
icon: Icons.book,
child: const Center(
child: Text('Courses Page'),
),
),
ZebaTabModel(
title: 'Profile',
icon: Icons.person,
child: const Center(
child: Text('Profile Page'),
),
),
];
@override
void initState() {
super.initState();
controller = ZebaTabController();
controller.init(
vsync: this,
length: tabs.length,
);
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Zeba Academy Tabs'),
bottom: PreferredSize(
preferredSize: const Size.fromHeight(50),
child: ZebaTabBar(
tabs: tabs,
controller: controller,
indicatorColor: Colors.deepPurple,
),
),
),
body: ZebaTabView(
tabs: tabs,
controller: controller,
),
);
}
}
🎨 Custom Indicator
ZebaTabBar(
tabs: tabs,
controller: controller,
indicatorColor: Colors.red,
)
📜 Scrollable Tabs
ZebaTabBar(
tabs: tabs,
controller: controller,
isScrollable: true,
)
🔄 PageView Sync
The package automatically synchronizes:
- TabBar
- PageView
- Swipe gestures
- Animated transitions
No extra setup required.
🧩 Nested Tabs Example
DefaultTabController(
length: 2,
child: Column(
children: [
TabBar(
tabs: const [
Tab(text: 'Tab 1'),
Tab(text: 'Tab 2'),
],
),
Expanded(
child: TabBarView(
children: [
Center(child: Text('Tab 1')),
Center(child: Text('Tab 2')),
],
),
),
],
),
)
📚 API Reference
| Widget | Description |
|---|---|
ZebaTabBar |
Customizable tab bar |
ZebaTabView |
Animated PageView synced tab view |
ZebaTabController |
Controls tabs and pages |
ZebaNestedTabView |
Nested tabs support |
ZebaTabModel |
Tab model class |
⚙️ Properties
ZebaTabBar
| Property | Type | Default |
|---|---|---|
tabs |
List<ZebaTabModel> |
required |
controller |
ZebaTabController |
required |
isScrollable |
bool |
true |
indicatorColor |
Color |
Colors.blue |
selectedColor |
Color |
Colors.black |
unselectedColor |
Color |
Colors.grey |
🧪 Testing
Run tests:
flutter test
📁 Project Structure
lib/
│
├── zeba_academy_tab_system.dart
│
├── src/
│ ├── controllers/
│ ├── models/
│ └── widgets/
🚀 Future Improvements
- Badge tabs
- Gradient indicators
- Vertical tabs
- Cupertino tabs
- RTL support
- Lazy loading
- Blur animations
- Tab persistence
🤝 Contributing
Contributions are welcome!
Feel free to:
- Open issues
- Submit pull requests
- Suggest improvements
📄 License
This project is licensed under the MIT License.
## About Me
✨ I’m Sufyan bin Uzayr, an open-source developer passionate about building and sharing meaningful projects.
You can learn more about me and my work at sufyanism.com or connect with me on Linkedin
## Your all-in-one learning hub!
🚀 Explore courses and resources in coding, tech, and development at zeba.academy and code.zeba.academy. Empower yourself with practical skills through curated tutorials, real-world projects, and hands-on experience. Level up your tech game today! 💻✨
Zeba Academy is a learning platform dedicated to coding, technology, and development.
➡ Visit our main site: https://zeba.academy
➡ Explore hands-on courses and resources at: https://code.zeba.academy
➡ Check out our YouTube for more tutorials: https://www.youtube.com/@zeba.academy
➡ Follow us on Instagram: https://www.instagram.com/zeba.academy/
❤️ Support
If you like this package, please give it a ⭐ on GitHub and share it with the Flutter community!
Thank you for visiting!