CODEWITHSUNDEEP
flutter
Nikcio
Nikcio

Reputation: 457

bottomNavigationBar is showing labels when showSelectedLabels and showUnselectedLabels is set to false (Flutter)

Was messing around with the bottomNavigationBarTheme and noticed that the label was showing on the selected item even though showSelectedLabels was set to false. Is this a bug or am I missing something? This behavior only holds true as long as the property is declared in the ThemeData when moved to the bottomNavigationBar it behaves as expected.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'app',
      themeMode: ThemeMode.dark,
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.blueGrey,
        canvasColor: Color.fromRGBO(52, 58, 70, 1),
        bottomNavigationBarTheme: BottomNavigationBarThemeData(
          selectedIconTheme: IconThemeData(
           color: Color.fromRGBO(113, 124, 152, 1),
           size: 28,
          ),
          unselectedIconTheme: IconThemeData(
            color: Color.fromRGBO(196, 201, 212, 1),
            size: 28,
          ),
          type: BottomNavigationBarType.fixed,
          showSelectedLabels: false,
          showUnselectedLabels: false,
        ),
        cardColor: Color.fromRGBO(52, 58, 70, 1)
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('appbar'),
      ),
      body: Center(
        child: Text('Text here'),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.access_time),
            title: Text('a'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.view_day),
            title: Text('a'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.equalizer),
            title: Text('a'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.notifications_active),
            title: Text('a'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_circle),
            title: Text('a'),
          ),

        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
  }
}

Screenshot of app

Upvotes: 8

Views: 6774

Answers (6)

Rohit Mandiwal
Rohit Mandiwal

Reputation: 10462

This is the right way and worked for me and that too with type BottomNavigationBarType.shifting

showUnselectedLabels: true, unselectedItemColor: Colors.black,

enter image description here

Upvotes: 2

touch
touch

Reputation: 1

when you new the BottomNavigationBarItem, add the "tooltip:''"

Upvotes: 0

Maryam Azhdari
Maryam Azhdari

Reputation: 1319

U should use this code :

bottomNavigationBar: BottomNavigationBar(
   //use both properties
      type: BottomNavigationBarType.fixed,
      showUnselectedLabels: true,
  //-----------
      items: const <BottomNavigationBarItem>[
      BottomNavigationBarItem(
        icon: Icon(Icons.icon1),
        label:'item 1',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.icon2),
        label: 'item 2',
      ),
    ],
  )

Upvotes: 0

korchix
korchix

Reputation: 1700

That has to do with the BottomNavigationBarType. if you are using more than 3 Items in BottonNavigationBar, you have to set the type to BottomNavigationBarType.fixed

bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,

this has been already discussed on the Flutter github issue page: https://github.com/flutter/flutter/issues/13642#issuecomment-353945439

Upvotes: 14

Joe. L
Joe. L

Reputation: 407

You should not be using title, instead of that you should use label without Text() as shown below:

bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.access_time),
            label:'a',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.view_day),
            label: 'a',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.equalizer),
            label: 'a',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.notifications_active),
            label: 'a',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_circle),
            label: 'a',
          ),

        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),

Upvotes: 0

Johny Saini
Johny Saini

Reputation: 909

you can do this by multiple way

  1. use Text("");
  2. remove title

Upvotes: 0

Related Questions