Skip to content

Conversation

@johnsonmh
Copy link
Contributor

@johnsonmh johnsonmh commented Feb 8, 2019

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

@johnsonmh johnsonmh force-pushed the feature-newBottomNavBarApi branch from 86389b8 to 6f012c1 Compare February 8, 2019 23:30
@johnsonmh johnsonmh changed the title [WIP][Material] Expand BottomNavigationBar API [Material] Expand BottomNavigationBar API Feb 9, 2019
@zoechi zoechi added c: new feature Nothing broken; request for a new capability framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Feb 11, 2019
@johnsonmh johnsonmh requested a review from willlarche February 11, 2019 15:00
Copy link
Contributor

@rami-a rami-a left a comment

Choose a reason for hiding this comment

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

LGTM

/// [BottomNavigationBar]s. If [selectedItemColor] and [fixedColor] are
/// null, then the theme's primary color, [ThemeData.primaryColor] is used.
///
/// [iconSize] must be at least 8.0 for the [Icon]s to display properly.
Copy link
Contributor

Choose a reason for hiding this comment

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

Why do they need to be 8?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

To be honest, I don't exactly know why. Something to do with BoxConstraints somewhere in the tree. All I know that if the iconSize is less than 8, this happens:
screen shot 2019-02-12 at 10 31 45 pm

But maybe I should remove my assert because perhaps this is more informative to users?

Copy link
Contributor

Choose a reason for hiding this comment

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

Let Hans decide.

Copy link
Contributor

Choose a reason for hiding this comment

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

We should figure out the reason and include it in the documentation.

BTW, nit: see https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo#use-correct-grammar (avoid starting sentences with a lower case letter)

Copy link
Contributor

Choose a reason for hiding this comment

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

The iconSize >= 8 is just a feature (ha) of the gallery demo: https://github.com/flutter/flutter/blob/master/examples/flutter_gallery/lib/demo/material/bottom_navigation_demo.dart#L82

There's no need to constrain the iconSize parameter.

@jonahwilliams
Copy link
Contributor

I would prefer the approach of having a flag (from #22956) over setting font size to zero

/// of different types.
final BottomNavigationBarType type;

/// Deprecated, use [selectedItemColor].
Copy link
Contributor

Choose a reason for hiding this comment

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

Why is this deprecated?

I'm confused about the relationship between fixedColor, selectedItemColor, and ThemeData.primaryColor. If fixedColor is set, that is selected over selectedItemColor. If fixedColor is unset, than ThemeData.primaryColor is used?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

So, fixedColor used to determine the color of the selected items, but only in Fixed BottomNavBars. In the case of Shifting, the selected items were always white.

I'm updating this behavior so that you can customize the selected item color for both Fixed and Shifting bottom nav bars.

My options were:

  1. Have fixedColor apply to both Fixed and Shifting bottom nav bars.
  2. Rename fixedColor to selectedItemColor <-- breaking change
  3. Create a new field called selectedItemColor and "deprecate" fixedColor since the name no longer makes sense.

So, I opted for the 3rd, but for backwards compatibility sake I made it so that if you don't supply selectedItemColor but you do supply a fixedColor, fixedColor will still be used.

Then it's a question of the defaults if neither parameter is provided. Again to keep this backwards compatible, I kept the behavior as is. That means that Shifting nav bars have a default selected item color of Colors.White, and Fixed bottom nav bars have a default selected item color of ThemeData.primaryColor.

Copy link
Contributor

Choose a reason for hiding this comment

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

I don't think we should just comment on it as being deprecated unless we actually plan to remove it.

cc @Hixie @matthew-carroll @goderbauer

From #27753

It seems like this API is quite working as expected here. Do we take this as an opportunity to clean it up?

Copy link
Contributor

Choose a reason for hiding this comment

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

Edit: is NOT quite working as expected

Copy link
Contributor

Choose a reason for hiding this comment

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

I agree with Jonah here. There's a cost to having both colours now: the cognitive overhead of the API being more complicated, but also 8+ bytes per widget to store this field that we don't want people to use.

If you really wanted to keep it and not go through the deprecation process, you could have the constructor argument still exist and just have both it and selectedItemColor set the same field, and have the fixedColor field just return the same value.

But beyond that, we shouldn't say something is deprecated unless it's @deprecated and going to be removed.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Good point, if we do want to deprecate, I should have used @deprecated. I'm fine either way, would people prefer to officially deprecate or leave both fixedColor and selectedItemColor?

Copy link
Contributor

Choose a reason for hiding this comment

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

I think we should do any deprecations and removals outside of this PR to make it easier to land. I'm not sure what our policy is for the deprecated annotation, but an reasonable process might be:

  • Land this PR with fixedColor pointing to selectedColor (and maybe an assert if you assign both).
  • A breaking change request asking flutter dev about removing fixed color.
  • At some later point in time, removing fixedColor in a separate PR

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Sounds good, I will follow the steps that Jonah laid out. Thanks for the input everyone.

Jonah Williams and others added 5 commits February 15, 2019 14:02
/// The color of the [BottomNavigationBar] itself.
///
/// If [type] is [BottomNavigationBarType.shifting] and the
/// [items]s, have [BottomNavigationBarItem.backgroundColor] set, the [item]'s
Copy link
Contributor

Choose a reason for hiding this comment

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

[items]s, => [item]s

I think we get carried away with the links sometimes (they make the text a little harder to read). This could just be "items".

/// [BottomNavigationBar]s. If [selectedItemColor] and [fixedColor] are
/// null, then the theme's primary color, [ThemeData.primaryColor] is used.
///
/// [iconSize] must be at least 8.0 for the [Icon]s to display properly.
Copy link
Contributor

Choose a reason for hiding this comment

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

The iconSize >= 8 is just a feature (ha) of the gallery demo: https://github.com/flutter/flutter/blob/master/examples/flutter_gallery/lib/demo/material/bottom_navigation_demo.dart#L82

There's no need to constrain the iconSize parameter.

@HansMuller
Copy link
Contributor

I've moved the changes from this PR to: #28159. Will try and land that one soon, maybe today.

@HansMuller HansMuller closed this Feb 19, 2019
HansMuller added a commit to HansMuller/flutter that referenced this pull request Feb 21, 2019
Co-authored-by: MH Johnson <johnsonmh@google.com>
Co-authored-by: Hyo Chan Jang <dooboolab@gmail.com>
HansMuller added a commit to HansMuller/flutter that referenced this pull request Mar 11, 2019
Co-authored-by: masashi-sutou <sutou.masasi@gmail.com>
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Aug 7, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

c: new feature Nothing broken; request for a new capability f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels.

Projects

None yet

8 participants