A powerful official extension library of Tab/TabBar/TabView, which support to scroll ancestor or child Tabs when current is overscroll, and set scroll direction and cache extent.
dependencies:
flutter:
sdk: flutter
extended_tabs: any
Show tab indicator as Carousel style
CarouselIndicator(
controller: _controller,
selectedColor: Colors.white,
unselectedColor: Colors.grey,
strokeCap: StrokeCap.round,
indicatorPadding: const EdgeInsets.all(5),
),
Show tab indicator with color fill
TabBar(
indicator: ColorTabIndicator(Colors.blue),
labelColor: Colors.black,
tabs: [
Tab(text: "Tab0"),
Tab(text: "Tab1"),
],
controller: tabController,
)
/// if link is true and current tabbarview over scroll,
/// it will check and scroll ancestor or child tabbarView.
/// default is true
final bool link;
ExtendedTabBarView(
children: <Widget>[
List("Tab000"),
List("Tab001"),
List("Tab002"),
List("Tab003"),
],
controller: tabController2,
link: true,
)
/// The axis along which the tab bar and tab view scrolls.
///
/// Defaults to [Axis.horizontal].
final Axis scrollDirection;
Row(
children: <Widget>[
ExtendedTabBar(
indicator: const ColorTabIndicator(Colors.blue),
labelColor: Colors.black,
scrollDirection: Axis.vertical,
tabs: const <ExtendedTab>[
ExtendedTab(
text: 'Tab0',
scrollDirection: Axis.vertical,
),
ExtendedTab(
text: 'Tab1',
scrollDirection: Axis.vertical,
),
],
controller: tabController,
),
Expanded(
child: ExtendedTabBarView(
children: <Widget>[
const ListWidget(
'Tab1',
scrollDirection: Axis.horizontal,
),
const ListWidget(
'Tab1',
scrollDirection: Axis.horizontal,
),
],
controller: tabController,
scrollDirection: Axis.vertical,
),
)
],
)
/// cache page count
/// default is 0.
/// if cacheExtent is 1, it has two pages in cache
final int cacheExtent;
ExtendedTabBarView(
children: <Widget>[
List("Tab000"),
List("Tab001"),
List("Tab002"),
List("Tab003"),
],
controller: tabController2,
link: true,
cacheExtent: 1,
)
/// Whether the contents of the widget should ignore [PointerEvent] inputs.
///
/// Setting this value to true prevents the use from interacting with the
/// contents of the widget with pointer events. The widget itself is still
/// interactive.
///
/// For example, if the scroll position is being driven by an animation, it
/// might be appropriate to set this value to ignore pointer events to
/// prevent the user from accidentally interacting with the contents of the
/// widget as it animates. The user will still be able to touch the widget,
/// potentially stopping the animation.
///
///
/// if true, child can't accept event before [ExtendedPageView],[ExtendedScrollable] stop scroll.
///
///
/// if false, child can accept event before [ExtendedPageView],[ExtendedScrollable] stop scroll.
/// notice: we don't know there are any issues if we don't ignore [PointerEvent] inputs when it's scrolling.
///
///
/// Two way to solve issue that child can't hittest before [PageView] stop scroll.
/// 1. set [shouldIgnorePointerWhenScrolling] false
/// 2. use LessSpringClampingScrollPhysics to make animation quickly
///
/// default is true.
final bool shouldIgnorePointerWhenScrolling;
ExtendedTabBarView(
children: <Widget>[
List("Tab000"),
List("Tab001"),
List("Tab002"),
List("Tab003"),
],
controller: tabController2,
shouldIgnorePointerWhenScrolling: false,
cacheExtent: 1,
)
Run this command:
With Flutter:
$ flutter pub add extended_tabs
This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get
):
dependencies:
extended_tabs: ^4.1.0
Alternatively, your editor might support flutter pub get
. Check the docs for your editor to learn more.
Now in your Dart code, you can use:
import 'package:extended_tabs/extended_tabs.dart';
import 'package:ff_annotation_route_library/ff_annotation_route_library.dart';
import 'package:flutter/material.dart';
import 'example_route.dart';
import 'example_routes.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'extended_tabs demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
initialRoute: Routes.fluttercandiesMainpage,
onGenerateRoute: (RouteSettings settings) {
return onGenerateRoute(
settings: settings,
getRouteSettings: getRouteSettings,
routeSettingsWrapper: (FFRouteSettings ffRouteSettings) {
if (ffRouteSettings.name == Routes.fluttercandiesMainpage ||
ffRouteSettings.name == Routes.fluttercandiesDemogrouppage) {
return ffRouteSettings;
}
return ffRouteSettings.copyWith(
builder: () => CommonWidget(
child: ffRouteSettings.builder(),
title: ffRouteSettings.routeName,
));
},
);
},
);
}
}
class CommonWidget extends StatelessWidget {
const CommonWidget({
this.child,
this.title,
});
final Widget? child;
final String? title;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
title!,
),
),
body: child,
);
}
}
Download details:
Author: fluttercandies.com
Source: https://github.com/fluttercandies/extended_tabs