FR: BottomNavigationBar fixed with no titles

Would love to be able to use BottomNaviationBar fixed but without titles.

See Twitter for an example.

@lukepighetti

@lukepighetti Got PR for you.

@willlarche

I don't believe material bottom navigation bars are spec'd for not having a title, nor would those meet a11y requirements without them. cc @willlarche

Not that there couldn't be a bottom navigation without titles, but I don't think it belongs in the material library if it's not part of the spec.

How do we do a PR on the spec? 😇

It's definitely encouraged to have the Material library be a superset of features in the guidelines! But we should not add this particular feature as we believe it creates a worse a11y experience.

This request is not outside the mainstream for app design and I believe it is quite reasonable even though it is omitted from Material spec. I would argue that the shifting icons are less accessible because they break procedural knowledge when they move position and they require localization.

@jonahwilliams

Best thing you can do is write to [email protected] and state your case. CC me: [email protected]. If you sway them then we’d def intend to have this feature.

If they don’t, then @jonahwilliams will need his a11y concerns allayed.

I don't think I should be the arbiter of whether or not this meets the guidelines for a11y. We can provide caveats and documentation but ultimately we're not the arbiters of how users develop apps. I also don't want to create a situation where we have a lot of customizations supported in the framework which have to be documented with "Don't use this if ...".

Some potential action items:

Can we abstract the concept of the bottom nav into widgets?
Though detangling the material specific properties might be difficult. Then we could have a more generic view which just took a Widget for the tabs.
Can a bottom nav bar without titles (material or not) be accessible via other properties or sufficient labels?

I was imagining a scenario where this collapsed the padding under the icon.

      BottomNavigationBarItem(
        title: null,
        icon: Icon(Icons.notifications),
      ),

Or maybe

       BottomNavigationBar(
          type: BottomNavigationBarType.fixedWithoutTitles
          /// ...
        ),

Allowing people to still give the buttons a title and if that can be read through other means (such as speech) that might work? I'm not too familiar with a11y and will look into it more.

Actually, looking over the spec I think Flutter's BottomNavigationBar gratuitously moves outside the Material Design specification.

https://material.io/design/components/bottom-navigation.html#specs

The Specification shows examples of buttons that show and reveal their text, but they do not shift side to side. This is the major issue that I am trying to resolve (along with gaining height on the screen).

The shifting side to side animation on Flutters BNB is distracting, not specified by MD, and confusing for users. (And by users, I mean me. It's not like I've tested it or anything!)

Ah! Well that’s different. The fastest way for that to be solved is for you to put in a PR. Otherwise this will be triaged and prioritized for a later date.

@willlarche

@willlarche I've done the PR for this #22956. I needed this feature either. Thanks.

@lukepighetti

@dooboolab , I think @lukepighetti is describing a motion issue. Should probably be in another issue.

@lukepighetti Could you write up a new issue since you understand it?

@lukepighetti

Ok! We have plan that we believe will satisfy our requirements:

Keep the title strings mandatory for the Semantics system to read.
Make titles something that's shown by default but hideable.
- When hidden, the layout responds as if they are not there at all (as opposed to now where you pass "" and still have room for titles.)

@dooboolab , I'll add this feedback to your PR too.

@lukepighetti , please create a new ticket, if you haven't already, for the layout problems

Thanks Will, feel free to close this issue whenever you feel it is necessary

@lukepighetti

You guys can also use this as

BottomNavigationBarItem( icon: Icon( Icons.card_giftcard, ), title: SizedBox.shrink(), )

i.e set title to

SizedBox.shrink()

And you can get rid of those titles.

Hope this helps @lukepighetti

@lukepighetti

You guys can also use this as

BottomNavigationBarItem( icon: Icon( Icons.card_giftcard, ), title: SizedBox.shrink(), )

i.e set title to

SizedBox.shrink()

And you can get rid of those titles.

Hope this helps @lukepighetti

Great job!! :D

@lukepighetti

try showSelectedLabels: false, showUnselectedLabels: false instead of unused title widget
@lukepighetti

You guys can also use this as
BottomNavigationBarItem( icon: Icon( Icons.card_giftcard, ), title: SizedBox.shrink(), )
i.e set title to

SizedBox.shrink()

And you can get rid of those titles.
Hope this helps @lukepighetti

Great job!! :D

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

FR: BottomNavigationBar fixed with no titles #22882

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

FR: BottomNavigationBar fixed with no titles #22882

Description

Activity

hyochan commented on Oct 11, 2018

jonahwilliams commented on Oct 11, 2018

lukepighetti commented on Oct 11, 2018

willlarche commented on Oct 11, 2018

lukepighetti commented on Oct 12, 2018

willlarche commented on Oct 12, 2018

jonahwilliams commented on Oct 12, 2018

lukepighetti commented on Oct 12, 2018

lukepighetti commented on Oct 12, 2018

willlarche commented on Oct 12, 2018

hyochan commented on Oct 12, 2018

willlarche commented on Oct 12, 2018

willlarche commented on Oct 16, 2018

lukepighetti commented on Oct 16, 2018

ankitchouhan commented on Apr 8, 2019

ranggadev commented on May 22, 2019

AtillaPehlivan commented on Oct 2, 2019

github-actions commented on Aug 15, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions