Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter Bottom Navigation Bar with PageView

I want to build bottom navigation bar with a pageview. It will be 3 pages and you can transition left or right. I can slide but my navigation bar selected items color doesn't change. Can you help me?

class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int _selectedIndex = 0;
final PageController _pageController = PageController();

@override
Widget build(BuildContext context) {
return Scaffold(
  bottomNavigationBar: BottomNavigationBar(
    items: [
      BottomNavigationBarItem(
          icon: Icon(Icons.portrait), title: Text('Profile')),
      BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
      BottomNavigationBarItem(
          icon: Icon(Icons.shopping_cart), title: Text('Shop'))
    ],
    onTap: _onTappedBar,
    selectedItemColor: Colors.orange,
    currentIndex: _selectedIndex,
  ),
  body: PageView(
    controller: _pageController,
    children: <Widget>[
      ProfilePage(),
      HomeTables(),
      ShoppingPage(),
    ],
  ),
);
}

void _onTappedBar(int value) {
setState(() {
  _selectedIndex = value;
});
_pageController.jumpToPage(value);
}
}
like image 455
Osman Kaya Erdoğan Avatar asked Apr 17 '20 10:04

Osman Kaya Erdoğan


People also ask

How do you use PageView with bottom navigation in flutter?

You just need to use onPageChanged property of the PageView to catch the current page number. Show activity on this post. Just add onPageChanged property of PageView and assign the pageIndex to _selectedIndex property, then reload the widget using setState() method.

How do you customize the bottom navigation bar in flutter?

Now let's create our bottom navigation bar. In the HomePage class let's define the bottomNavigationBar attribute and assign a Container to it. Give it a height of 60 with some BoxDecoration (Pixels) add a Row as the child of the Container. Set the main axis alignment to space around.


1 Answers

You just need to use onPageChanged property of the PageView to catch the current page number.

PageView(
        controller: _pageController,
        children: <Widget>[
          ProfilePage(),
          HomeTables(),
          ShoppingPage(),
        ],
        onPageChanged: (page) {
          setState(() {
            _selectedIndex = page;
          });
        },
    );
like image 135
jarekbutek Avatar answered Oct 21 '22 03:10

jarekbutek