injectTabPageView static method

InjectedTabPageView injectTabPageView({ required int length, int initialIndex = 0, Duration duration = kTabScrollDuration, Curve curve = Curves.ease, bool keepPage = true, double viewportFraction = 1.0, })

Inject a TabController and PageController and sync them to work together to get the most benefit of them.

This injected state abstracts the best practices to come out with a simple, clean, and testable approach to control tab and page views.

If you don't use OnTabPageViewBuilder to listen the state, it is highly recommended to manually dispose the state using Injected.dispose method.

Example: of controlling TabBarView, PageView, and TabBar with the same InjectedTabPageView

 final injectedTab = RM.injectTabPageView(
   initialIndex: 2,
   length: 5,
 );

 //In the widget tree;
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     home: Scaffold(
       appBar: AppBar(
         title: OnTabViewBuilder(
           listenTo: injectedTab,
           builder: (index) => Text('$index'),
         ),
       ),
       body: Column(
         children: [
           Expanded(
             child: OnTabViewBuilder(
               builder: (index) {
                 print(index);
                 return TabBarView(
                   controller: injectedTab.tabController,
                   children: views,
                 );
               },
             ),
           ),
           Expanded(
             child: OnTabViewBuilder(
               builder: (index) {
                 return PageView(
                   controller: injectedTab.pageController,
                   children: pages,
                 );
               },
             ),
           )
         ],
       ),
       bottomNavigationBar: OnTabPageViewBuilder(
          listenTo: injectedTab,
          builder: (index) => BottomNavigationBar(
            currentIndex: index,
            onTap: (int index) {
              injectedTab.index = index;
            },
            selectedItemColor: Colors.blue,
            unselectedItemColor: Colors.blue[100],
            items: tabs
                .map(
                  (e) => BottomNavigationBarItem(
                    icon: e,
                    label: '$index',
                  ),
                )
                .toList(),
          ),
      ),
   );
 }

Parameters:

length: Required int.

The number of tabs / pages to display. It can be dynamically changes later. Example:

   // We start with 2 tabs
   final myInjectedTabPageView = RM.injectedTabPageView(length: 2);

  // Later on, we can extend or shrink the length of tab views.

  // Tab/page views are updated to display three views
  myInjectedTabPageView.length = 3

  // Tab/page views are updated to display one view
  myInjectedTabPageView.length = 1

initialIndex: Optional int. Defaults to 0.

The index of the tab / page to start with.

duration: Optional Duration. Defaults to Duration(milliseconds: 300).

The duration the tab / page transition takes.

curve: Optional Curve. Defaults to Curves.ease.

The duration the tab / page transition takes.

keepPage: Optional bool. Defaults to true.

Save the current page with PageStorage and restore it if this controller's scrollable is recreated. See PageController.keepPage

viewportFraction: Optional double. Defaults to 1.0.

The fraction of the viewport that each page should occupy. See PageController.viewportFraction

Implementation

static InjectedTabPageView injectTabPageView({
  required int length,
  int initialIndex = 0,
  Duration duration = kTabScrollDuration,
  Curve curve = Curves.ease,
  bool keepPage = true,
  double viewportFraction = 1.0,
}) {
  return InjectedPageTabImp(
    initialIndex: initialIndex,
    length: length,
    curve: curve,
    duration: duration,
    keepPage: keepPage,
    viewportFraction: viewportFraction,
  );
}