Блог

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

Вот код, который я создал до сих пор.

 import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

  Widget myBottomBar(){
  return BottomNavigationBar(
      backgroundColor: Colors.black.withOpacity(0.9),
      selectedItemColor: Colors.pink[300],
      unselectedItemColor: Colors.white,
      elevation: 0.5,
      onTap: (int index) {
        setState(
          () {
            currentIndex = index;
          },
        );
      },
      currentIndex: currentIndex,
      type: BottomNavigationBarType.fixed,
      items: <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: SizedBox.shrink(),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.search),
          title: SizedBox.shrink(),
        ),
        BottomNavigationBarItem(
         icon: Icon(Icons.favorite),
          title: SizedBox.shrink(),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.indeterminate_check_box),
          title: SizedBox.shrink(),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.favorite),
          title: SizedBox.shrink(),
        ),
      ],
    );


}
  

Я работаю над приведенным ниже кодом:

   onTap: (int index) {
    setState(
      () {
        currentIndex = index;
      },
    );
  },
  

На вкладке элементов мне нужно перейти на страницы. Нужно ли мне определять его на всех страницах или есть какой-либо другой способ?

Нижняя панель

 class BottomNavigationTabBarView extends StatelessWidget {
  var _currentIndex = 0;
  Function onTabChange;

  BottomNavigationTabBarView(this._currentIndex, {this.onTabChange});

  @override
  Widget build(BuildContext context) {
    return bottomNavigationTabBarView();
  }

  var selectedTabs = [  // when user Select icon/tab  (Active tab)
    IconNames.homeActiveIcon,
    IconNames.secondActiveIcon,
    IconNames.thirdActiveIcon,
    IconNames.fourthActiveIcon,
  ];
  var unSelectedTabs = [ // when user does not Select icon/tab  (InActive tab)
    IconNames.homeNotActiveIcon,
    IconNames.secondNotActiveIcon,
    IconNames.thirdNotActiveIcon,
    IconNames.fourthNotActiveIcon,
  ];

  BottomNavigationBar bottomNavigationTabBarView() {
    const iconSize = 25.0;
    return BottomNavigationBar(
      currentIndex: _currentIndex,
      showSelectedLabels: true,
      showUnselectedLabels: true,
      onTap: onTabTapped,
      items: [
        BottomNavigationBarItem(
          title: Padding(
            padding: const EdgeInsets.only(top: 5.0),
            child: Text("Home", style: AppTheme.bottomBarTextStyle()),
          ),
          icon: Image.asset(
            unSelectedTabs[0],
            width: iconSize,
            height: iconSize,
          ),
          activeIcon: Image.asset(
            selectedTabs[0],
            width: iconSize,
            height: iconSize,
          ),
        ),
        BottomNavigationBarItem(
          title: Padding(
            padding: const EdgeInsets.only(top: 5.0),
            child: Text("Second tab", style: AppTheme.bottomBarTextStyle()),
          ),
          icon: Image.asset(
            unSelectedTabs[1],
            width: iconSize,
            height: iconSize,
          ),
          activeIcon: Image.asset(
            selectedTabs[1],
            width: iconSize,
            height: iconSize,
          ),
        ),
        BottomNavigationBarItem(
          title: Padding(
            padding: const EdgeInsets.only(top: 5.0),
            child: Text("Third tab", style: AppTheme.bottomBarTextStyle()),
          ),
          icon: Image.asset(
            unSelectedTabs[2],
            width: iconSize,
            height: iconSize,
          ),
          activeIcon: Image.asset(
            selectedTabs[2],
            width: iconSize,
            height: iconSize,
          ),
        ),
        BottomNavigationBarItem(
          title: Padding(
            padding: const EdgeInsets.only(top: 5.0),
            child: Text("Fourth Tab", style: AppTheme.bottomBarTextStyle()),
          ),
          icon: Image.asset(
            unSelectedTabs[3],
            width: iconSize,
            height: iconSize,
          ),
          activeIcon: Image.asset(
            selectedTabs[3],
            width: iconSize,
            height: iconSize,
          ),
        )
      ],
    );
  }

  void onTabTapped(int index) {
    _currentIndex = index;
    onTabChange(index);
  }
}
  

И используется на главном экране

 class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
  int _currentIndex = 0;
  var lastIndex;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      body: Stack(
        children: <Widget>[
          getCurrentPage(_currentIndex),
        ],
      ),
      bottomNavigationBar:
      BottomNavigationTabBarView(_currentIndex, onTabChange: (index) {
        _currentIndex = index;
        setState(() {});
        if (_currentIndex == 3 amp;amp; _currentIndex == lastIndex) {}
        lastIndex = index;
      }),
    );
  }

  getCurrentPage(int index) {
    if (index == 0) {
      return HomeScreen();
    } else if (index == 1) {
      return SecondScreen/Tab();
    } else if (index == 2) {
      return ThirdScreen/Tab();
    } else if (index == 3) {
      return FourthScreen/Tab();
    } else {}
  }
}