Как заставить Flutter BottomNavigationBar иметь одинаковую ширину на всех вкладках? - PullRequest
Новая
       83

Как заставить Flutter BottomNavigationBar иметь одинаковую ширину на всех вкладках?

1 голос
/ 19 марта 2020

Это мой код, но я не нашел, как заставить все элементы иметь одинаковую ширину в сети. Основная проблема заключается в том, что во флаттере этот виджет распределяет ширину и назначает больший объем пространства выбранной вкладке, но мне нужно в целях дизайна заставить все элементы иметь одинаковое количество пространства.

Дополнительные сомнения, моя выбранная вкладка не меняет свой цвет, даже если она настроена на это 

BottomNavigationBar(
            showUnselectedLabels: true,
            backgroundColor: Color(0xff22273d).withOpacity(.4),
            selectedItemColor: Color(0xffffd156),
            selectedIconTheme: IconThemeData(
              color: Color(0xffffd156),
            ),
            selectedLabelStyle: GoogleFonts.openSans(color: Color(0xffffd156)),
            currentIndex: _currentIndex,
            onTap: (int index) {
              setState(() {

                _currentIndex = index;
                print("Current index"+_currentIndex.toString());
              });
            },
            items: [
              BottomNavigationBarItem(
                  icon: Icon(Icons.home, color: Color(0xff99ffffff),),
                  backgroundColor: Color(0xff22273d).withOpacity(.9),
                  title: Text("Home", style: GoogleFonts.openSans(fontSize: 10, color:Color(0xff99ffffff)),)
              ),
              BottomNavigationBarItem(
                  icon: ImageIcon(AssetImage("images/soccer_24_px.png"), color: Colors.white,),
                  backgroundColor: Color(0xff22273d).withOpacity(.9),
                  title: Text("La porra", style: GoogleFonts.openSans(fontSize: 10, color:Color(0xff99ffffff)),)
              ),
              BottomNavigationBarItem(
                  icon: Icon(Icons.calendar_today, color: Color(0xff99ffffff),),
                  backgroundColor: Color(0xff22273d).withOpacity(.9),
                  title: Text("Calendario", style: GoogleFonts.openSans(fontSize: 10, color:Color(0xff99ffffff)),)
              ),
              BottomNavigationBarItem(
                  icon: ImageIcon(AssetImage("images/classification_24_px.png"), color: Color(0xff99ffffff),),
                  backgroundColor: Color(0xff22273d).withOpacity(.9),
                  title: Text("Clasificacion", style: GoogleFonts.openSans(fontSize: 10, color:Colors.white),)
              ),
              BottomNavigationBarItem(
                  icon: Icon(Icons.more_horiz, color: Color(0xff99ffffff),),
                  backgroundColor: Color(0xff22273d).withOpacity(.9),
                  title: Text("Más", style: GoogleFonts.openSans(fontSize: 10, color:Color(0xff99ffffff)),)
              ),
            ]
          )```

1 Ответ

1 голос
/ 19 марта 2020

ответ по ширине. Попробуйте добавить в BottomNavigationBar 

type: BottomNavigationBarType.fixed,

Это должно сделать всю ширину одинаковой ... Я не пробовал это в Интернете, хотя, так что дайте мне знать, если это работает.

Ответьте на ваш дополнительное сомнение заключается в том, что вы перезаписали выбранный цвет цветом Icon и AssetImages. Удалите все свойства цвета в значках и изображениях активов, расположенных во всех элементах BottomNavigationBarItem, и установите значение 

unselectedItemColor: Color(0xff99ffffff),

в BottomNavigationBar, и оно должно работать. Также убедитесь, что ваш _currentIndex расположен над классом состояний, как этот 

...
int _currentIndex = 0;

class _YourScreenState extends State<YourScreen> {
@override
...

, и последний фоновый цвет в BottomNavigationBarItem не работает, когда BottomNavigationBarType установлен на фиксированный, так что вы также можете удалить их все

ВЫХОД enter image description here

...