Skip to content

[Material] Expand BottomNavigationBar API (reprise) #28159

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
HansMuller merged 4 commits into from
Feb 22, 2019
Merged

[Material] Expand BottomNavigationBar API (reprise) #28159

HansMuller merged 4 commits into from
Feb 22, 2019

Conversation

@HansMuller
Copy link
Contributor

@HansMuller HansMuller commented Feb 19, 2019

These changes come from @johnsonmh in #27698.
This PR also incorporates work done by @hyochan in #22956.

Expand the BottomNavigationBar API.

Add the ability to customize the following fields on BottomNavigationBars:

  • backgroundColor
  • elevation
  • selectedItemColor
  • unselectedItemColor
  • selectedFontSize
  • unselectedFontSize
  • showSelectedLabels
  • showUnselectedLabels

Combining these fields allows users to create BottomNavigationBars that match the current Material Design specifications, as well as support other requested features.

The default behavior of BottomNavigationBar is still the same:

Fixed Shifting
default_fixed giphy

Custom font size

Using custom selectedFontSize and unselectedFontSize, the BottomNavigationBar now still animates properly.

Fixed Shifting
giphy-1 giphy-2

Custom Coloring

Using custom backgroundColor,selectedItemColor, and unselectedItemColor, the BottomNavigationBar can be customized.

Note: shifting BottomNavigationBars respect the color of their BottomNavigationBarItems rather than use the BottomNavigationBar's backgroundColor, this preserves the "ripple" behavior.

Fixed Shifting
giphy-3 giphy-4

Hide/Show labels

Being able to optionally hide/show selected and unselected labels on fixed BottomNavigationBars allows us to get behavior described in the Material spec.
showSelectedLabels && showUnselectedLabels giphy
showSelectedLabels && !showUnselectedLabels giphy-1
!showSelectedLabels && !showUnselectedLabels giphy-2

Closes #23178
Closes #27414
Closes #17099
Closes #25895
Closes #22882
Closes #27739
Closes #27651

@googlebot
Copy link

googlebot commented Feb 19, 2019

So there's good news and bad news.

👍 The good news is that everyone that needs to sign a CLA (the pull request submitter and all commit authors) have done so. Everything is all good there.

😕 The bad news is that it appears that one or more commits were authored or co-authored by someone other than the pull request submitter. We need to confirm that all authors are ok with their commits being contributed to this project. Please have them confirm that here in the pull request.

Note to project maintainer: This is a terminal state, meaning the cla/google commit status will not change from this state. It's up to you to confirm consent of all the commit author(s), set the cla label to yes (if enabled on your project), and then merge this pull request when appropriate.

Googlers can find more info about SignCLA and this PR by following this link.

This was referenced Feb 19, 2019
Closed
Closed
@hyochan hyochan mentioned this pull request Feb 19, 2019
Closed
gspencergoog
gspencergoog requested changes Feb 19, 2019
View reviewed changes
packages/flutter/lib/src/material/bottom_navigation_bar.dart Outdated
Copy link
Contributor

@gspencergoog gspencergoog Feb 19, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Couldn't you wrap this in a ReverseAnimation instead?

Copy link
Contributor Author

@HansMuller HansMuller Feb 19, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think so, however I find this (I didn't write this) easier to understand.

Copy link
Contributor

@gspencergoog gspencergoog Feb 20, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Really? Because this seems a lot clearer to me (at least it would be to a newbie):

Suggested change
opacity: Tween<double>(begin: 1.0, end: 0.0).animate(animation),
opacity: ReverseAnimation(animation),

Copy link
Contributor Author

@HansMuller HansMuller Feb 20, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The documentation for ReverseAnimation says:

Using a ReverseAnimation is different from simply using a Tween with a begin of 1.0 and an end of 0.0 because the tween does not change the status or direction of the animation.

So what are the implications of changing the animation's direction or status (he asked rhetorically). While I'm scratching my head the person reading Tween<double>(begin: 1.0, end: 0.0) has already moved on.

Copy link
Contributor

@gspencergoog gspencergoog Feb 20, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well, but you could just as well scratch your head about what the .animate on the Tween does. Or the fact that a Tween isn't an animation, but you're assigning to one.

It's OK to keep it as a Tween, it's not a big deal, but I disagree that it's clearer.

@zoechi zoechi added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Feb 20, 2019
@HansMuller HansMuller force-pushed the mh_bottom_navigation_bar branch from f23b7ad to a1de2f4 Compare February 21, 2019 00:10
@HansMuller HansMuller merged commit 617ca62 into flutter:master Feb 22, 2019
@HansMuller HansMuller deleted the mh_bottom_navigation_bar branch February 22, 2019 00:05
johnsonmh added a commit to flutter/goldens that referenced this pull request Mar 4, 2019
@johnsonmh
Remove old goldens after flutter/flutter#28159
154ee90
@DeRealMorgan
Copy link

DeRealMorgan commented Mar 7, 2019

How can I get this update to my flutter regularly ? I am running the newest version of the flutter plugin.

@gisinator
Copy link

gisinator commented May 15, 2019

Thank you guys for these new features, they look very promising. According to the docs:
https://docs.flutter.io/flutter/material/BottomNavigationBar-class.html
I can already use those, e.g. showSelectedLabels.

But when I try them in my AndroidStudio, I get "isnt defined" error. So, to me it looks like I cannot use them yet.

What am I missing? :)

@frey1esm
Copy link

frey1esm commented May 16, 2019

Thank you guys for these new features, they look very promising. According to the docs:
https://docs.flutter.io/flutter/material/BottomNavigationBar-class.html
I can already use those, e.g. showSelectedLabels.

But when I try them in my AndroidStudio, I get "isnt defined" error. So, to me it looks like I cannot use them yet.

What am I missing? :)

@gisinator Make sure your settings are under BottomNavigationBar and not BottomNavigationBarItem.

@gisinator
Copy link

gisinator commented May 16, 2019

thank you, @frey1esm , but I am afraid that's exactly what I did:

BottomNavbar

Or did I do anything wrong? :)

@frey1esm
Copy link

frey1esm commented May 16, 2019 •
edited
Loading

Or did I do anything wrong? :)

Looks good from here. What is your Flutter version?

Also, this won't work with the CupertinoTabBar theme AFAIK.

@gisinator
Copy link

gisinator commented May 16, 2019

Thank you sir, looks like this was the issue :)

Until now I thought that Android Studio took care of updating the whole stuff. Every now and then I agreed on upating AndroidStudio, Dart, Emulator and so on.

Didnt know I had to update Flutter version by myself and just went from 1.21 to 1.54-hotfix.2
Now those parameters work as expected.

Thank you @frey1esm , your help was appreciated :)

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Aug 6, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@gspencergoog gspencergoog gspencergoog approved these changes

Assignees

No one assigned

Labels

f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels.

Projects

None yet

Milestone

No milestone

7 participants

@HansMuller @googlebot @DeRealMorgan @gisinator @frey1esm @gspencergoog @zoechi