Flutter PageView remove page Indicator

Question

Does anyone know if there is a way to remove the PageView indicator which is shown for a couple of seconds after I change the Page?

    return Scaffold(
      bottomNavigationBar: CubertoBottomBar(
        tabStyle: CubertoTabStyle.STYLE_FADED_BACKGROUND,
        selectedTab: _selectedIndex, 
        tabs: [
          TabData(
            iconData: Icons.assignment,
            title: "Logbuch",
            tabColor: Colors.deepPurple,
          ),
         ....
        ],
        onTabChangedListener: (position, title, color) {
          setState(() {
            _selectedIndex = position;
          });
        },
      ),
      body: PageView(
        controller: _pageController,
        pageSnapping: true,
        onPageChanged: (index) {
          setState(() {
            _selectedIndex = index;
          });
        },
        // physics: NeverScrollableScrollPhysics(),
        children: <Widget>[
          LogBookView(),
         ...
        ],
      ),
    );

I couldn't find anything about it in the documentation of the PageView widget and the BottomNav widget.

MEHEDI HASAN · Answer 1 · 2019-12-18T16:45:22.853

I think you need to provide a little context to your code since there are loads of ways to implement PageView and indicator. I think you are using TabBarView as parent to the PageView because By default PageView doesn't have indicator itself, TabBarView has.

assuming I am right you really don't need to use TabBarView unless you want to use different tabs, and each tab has different PageView or other widgets. Judging your UI i think PageView with controller can satisfy your UI need.

Class XYZ extends StatefullWidget{
.......
}
Class _XYZ extends State<XYZ>
    with SingleTickerProviderStateMixin{

PageController _pageController;
int pageNumber = 0;

void initState() {
  super.initState();

    _pageController = PageController();
  }
..................
//inside build PageView
PageView(
  controller: _pageController,
  onPageChanged: (pageIndex) {
     setState(() {
       pageNumber = pageIndex;
     });
   },
   children: <Widget>[
         Notes(), // scaffold or widget or other class
         Wochenplan(), scaffold or widget or other class
         ETC(), // scaffold or widget or other class
   ],
),
..................
//inside build bottom nav icons
Row(
   children: <Widget>[
         buildTabButton(int currentIndex, int pageNumber, String image), 
         buildTabButton2...., 
         buildTabButton3...,
   ],
)
.......

buildTabButton1........

buildTabButton2(int currentIndex, int pageNumber, String image) {
    return AnimatedContainer(
      height: _height,
      width: currentIndex == pageNumber ? 100 : 30,
      padding: EdgeInsets.all(10),
      duration: Duration(milliseconds: 300),
      decoration: BoxDecoration(),// use currentIndex == pageNumber to decorate current widget and others
      child: ../*ClickableWidget*/, //onClckWochenplan() // and so on  
    );
}

buildTabButton3........


........................
//onPressed or onTap functions which you can implement inside widgets as well.. 
void ABC() {
    _pageController.animateToPage(0,
        duration: Duration(milliseconds: 500), curve: Curves.decelerate);
}

void onClckWochenplan() {
    _pageController.animateToPage(1,
        duration: Duration(milliseconds: 500), curve: Curves.decelerate);
}

void DEF() {
    _pageController.animateToPage(2,
        duration: Duration(milliseconds: 500), curve: Curves.decelerate);
}

I hope It helps.. else provide some code to get help from the community.. cheers

i edited my post with the code how i done it. Thanks for the great awnser but i think its not the solution for my problem. — F0rce, Dec 19 '19 at 18:24

score 1 · Answer 2 · answered Dec 20 '19 at 03:45

I see you are using library CubertoBottomBar which is not default TabBarView that flutter provides. So I looked into the library. The thing is, it should not suppose to show the indicator at all. So i am going to take 2 wild guesses here and 1 suggestion.. 1. You might have another parents with TabBarView wrapping up this scaffold (may be from previous class/widget where this scaffold is being wrapped)..

 Scaffold(
      bottomNavigationBar: CubertoBottomBar(
        tabStyle: CubertoTabStyle.STYLE_FADED_BACKGROUND,
        selectedTab: _selectedIndex, 
        tabs: [
..............

if you are building it on IOS it might not rendering the library widget correctly. (this is since i tried to build this app in the same way you did and i did not get any indicator at all with 3 of my devices). So,if you are currently building it on IOS, Try to build on android device then you might know whats really going on and report an issue to the library owner.
Apart from my inability to help you, i suggest you to try to replace the PageView with TabBar then you can control the indicator (Though the PageView should not give you indicator either but just a suggestion)..

TabBar(
  indicatorWeight: 0.0, // then you can control height of indicator
  indicatorColor: Colors.transparent, // then you can control color with transparent value
  tabs: <Widget>[
       tab();
       tab2();
  ],            
),

//**TODO ----------------------

My bet is on my 1st Point.. check your widget tree thoroughly...

Flutter PageView remove page Indicator

2 Answers2