flutter_tabbar_page

Description:

flutter tabbar page

Features #

Smooth animations and gestures
Scrollable tabs
Fully Customized TabBar Cell
Highly customizable

Installation #
Add dependency to pubspec.yaml
dependencies:
flutter_tabbar_page : 0.0.3
copied to clipboard
Import the packages
import 'package:flutter_tabbar_page/flutter_tabbar_page.dart';
copied to clipboard
Usage #
To start using TabBarPage you have to create first page list and create instance of TabPageController.
List<PageTabItemModel> lstPages = <PageTabItemModel>[];
final TabPageController _controller = TabPageController();

@override
void initState() {
super.initState();
lstPages.add(PageTabItemModel(title: "Tab1", page: const Center(child: Text("Item 1"))));
lstPages.add(PageTabItemModel(title: "Tab2", page: const Center(child: Text("Item 2"))));
lstPages.add(PageTabItemModel(title: "Tab3", page: const Center(child: Text("Item 3"))));
}
copied to clipboard
After that add TabBarPage Widget
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Sample"),
),
body: Column(
children: <Widget>[
Flexible(
child: TabBarPage(
controller: _controller,
pages: lstPages,
isSwipable: true,
tabBackgroundColor: Colors.white,
tabitemBuilder: (context, index) {
return InkWell(
onTap: () {
_controller.onTabTap(index);
},
child: SizedBox(
width: MediaQuery.of(context).size.width / lstPages.length,
child: Stack(
alignment: Alignment.bottomCenter,
children: [
Center(
child: Text(
lstPages[index].title ?? "",
style: TextStyle(
fontWeight: _controller.currentIndex == index ? FontWeight.w700 : FontWeight.w400,
color: _controller.currentIndex == index ? Colors.indigoAccent : Colors.black26,
fontSize: 16),
),
),
Container(
height: 3,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: _controller.currentIndex == index ? Colors.indigoAccent : Colors.transparent)),
],
),
),
);
},
),
)
],
),
);
}
copied to clipboard



Parameter
Type
Description




pages
List<PageTabItemModel>
Required. List of title and page widgets


tabitemBuilder
IndexedWidgetBuilder
Required. Builder for tab widget


controller
TabPageController
Required. Get and Update Current Index of Tab


isSwipable
bool
Default : false


tabHeight
double
Default : 50


distributeTabEvenly
bool
Default : true, Manages the tab assigning to full width or to left/right by providing tabAlignment


tabBackgroundColor
Color
Default : White


tabAlignment
Alignment
Default : Alignment.center



Preview #

License #
MIT