Как сделать нижнюю навигационную панель для изменения страниц по onSelected?

Question

Я использую bottom_navy_bar 5.3.2 для создания нижней панели навигации, но проблема в том, что когда я выбрал значок, он не меняет страницы.

import 'package:bottom_navy_bar/bottom_navy_bar.dart';

Работает нормально, когда я провожу пальцем влево и вправо, но не при выборе.

Как этого добиться?

Код:

body: SizedBox.expand(
        child: PageView(
          controller: _pageController,
          children: <Widget>[
            Home(),
            Center(child:Text("data")),
            Center(child:Text("data")),
            Center(child:Text("data")),
          ],
          onPageChanged: (int index){
            setState(() {
              _currentIndex = index;
            });
          },
        ),
      ),
      bottomNavigationBar: BottomNavyBar(
        selectedIndex: _currentIndex,
        showElevation: true, // use this to remove appBar's elevation 
        onItemSelected: (index) {
          setState(() => _currentIndex = index);
          _pageController.jumpToPage(index);
        },
        items: [
          BottomNavyBarItem(
            icon: Icon(Icons.apps),
            title: Text('Challenges'),
            activeColor: Colors.red,
          ),
          BottomNavyBarItem(
              icon: Icon(Icons.people),
              title: Text('Users'),
              activeColor: Colors.purpleAccent
          ),
          BottomNavyBarItem(
              icon: Icon(Icons.message),
              title: Text('Messages'),
              activeColor: Colors.pink
          ),
          BottomNavyBarItem(
              icon: Icon(Icons.settings),
              title: Text('Settings'),
              activeColor: Colors.blue
          ),
        ],
      )

Answer 1

Ваш код работает нормально. Я думаю, что вы не замечаете изменений, потому что ваши PageView одинаковые для всех выбранных элементов панели навигации. Попробуйте следующий код:

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;
  PageController _pageController = PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text(widget.title),), 
        body: SizedBox.expand(
          child: PageView(
            controller: _pageController,
            children: List.generate(4, (index) {
              return Container(child: Center(child:Text("data $index"),),
                color: Colors.primaries.elementAt(index),
              );
            }),
            onPageChanged: (int index) {
              setState(() => _currentIndex = index);
            },
          ),
        ),
        bottomNavigationBar: BottomNavyBar(
          selectedIndex: _currentIndex,
          showElevation: true, // use this to remove appBar's elevation
          onItemSelected: (index) {
            setState(() => _currentIndex = index);
            _pageController.jumpToPage(index);
          },
          items: [
            BottomNavyBarItem(
              icon: Icon(Icons.apps),
              title: Text('Challenges'),
              activeColor: Colors.red,
            ),
            BottomNavyBarItem(
                icon: Icon(Icons.people),
                title: Text('Users'),
                activeColor: Colors.purpleAccent
            ),
            BottomNavyBarItem(
                icon: Icon(Icons.message),
                title: Text('Messages'),
                activeColor: Colors.pink
            ),
            BottomNavyBarItem(
                icon: Icon(Icons.settings),
                title: Text('Settings'),
                activeColor: Colors.blue
            ),
          ],
        )
    );
  }
}

Обратите внимание, что я только что обновил ваш код, чтобы при выборе BottomNavyBarItem отображался Container с другим цветом на PageView вашей страницы. .