firka/flutter
firka/flutter
5
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Rename DestinationLabel on BottomNavigationBar (#7281)

Browse Source 
* rename DestinationLabel and labels properties to BottomNavigationBarItem and items

* update/fix comments

* grammatical changes

* add myself to AUTHORS
This commit is contained in:
Luke 2016-12-17 18:14:37 -08:00 committed by Ian Hickson
parent 3e3d21926b
commit 1b9939af95
4 changed files with 78 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
AUTHORS
View File

@ -12,3 +12,4 @@ Günter Zöchbauer <guenter@gzoechbauer.com>
Raju Bitter <rajubitter@gmail.com> Raju Bitter <rajubitter@gmail.com>
Michael Beckler <mcbeckler@gmail.com> Michael Beckler <mcbeckler@gmail.com>
Alexandre Ardhuin <alexandre.ardhuin@gmail.com> Alexandre Ardhuin <alexandre.ardhuin@gmail.com>
Luke Freeman <luke@goposse.com>

8
examples/flutter_gallery/lib/demo/bottom_navigation_demo.dart
View File

@ -12,7 +12,7 @@ class NavigationIconView {
TickerProvider vsync, TickerProvider vsync,
}) : _icon = icon, }) : _icon = icon,
_color = color, _color = color,
destinationLabel = new DestinationLabel( item = new BottomNavigationBarItem(
icon: icon, icon: icon,
title: title, title: title,
backgroundColor: color, backgroundColor: color,
@ -29,7 +29,7 @@ class NavigationIconView {
final Widget _icon; final Widget _icon;
final Color _color; final Color _color;
final DestinationLabel destinationLabel; final BottomNavigationBarItem item;
final AnimationController controller; final AnimationController controller;
CurvedAnimation _animation; CurvedAnimation _animation;
@ -165,8 +165,8 @@ class _BottomNavigationDemoState extends State<BottomNavigationDemo>
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final BottomNavigationBar botNavBar = new BottomNavigationBar( final BottomNavigationBar botNavBar = new BottomNavigationBar(
labels: _navigationViews items: _navigationViews
.map((NavigationIconView navigationView) => navigationView.destinationLabel) .map((NavigationIconView navigationView) => navigationView.item)
.toList(), .toList(),
currentIndex: _currentIndex, currentIndex: _currentIndex,
type: _type, type: _type,

86
packages/flutter/lib/src/material/bottom_navigation_bar.dart
View File

@ -26,13 +26,13 @@ const double _kInactiveMaxWidth = 96.0;
/// See also: /// See also:
/// ///
/// * [BottomNavigationBar] /// * [BottomNavigationBar]
/// * [DestinationLabel] /// * [BottomNavigationBarItem]
/// * <https://material.google.com/components/bottom-navigation.html#bottom-navigation-specs> /// * <https://material.google.com/components/bottom-navigation.html#bottom-navigation-specs>
enum BottomNavigationBarType { enum BottomNavigationBarType {
/// The [BottomNavigationBar]'s [DestinationLabel]s have fixed width. /// The [BottomNavigationBar]'s [BottomNavigationBarItem]s have fixed width.
fixed, fixed,
/// The location and size of the [BottomNavigationBar] [DestinationLabel]s /// The location and size of the [BottomNavigationBar] [BottomNavigationBarItem]s
/// animate larger when they are tapped. /// animate larger when they are tapped.
shifting, shifting,
} }
@ -44,11 +44,11 @@ enum BottomNavigationBarType {
/// ///
/// * [BottomNavigationBar] /// * [BottomNavigationBar]
/// * <https://material.google.com/components/bottom-navigation.html> /// * <https://material.google.com/components/bottom-navigation.html>
class DestinationLabel { class BottomNavigationBarItem {
/// Creates a label that is used with [BottomNavigationBar.labels]. /// Creates an item that is used with [BottomNavigationBar.items].
/// ///
/// The arguments [icon] and [title] should not be null. /// The arguments [icon] and [title] should not be null.
DestinationLabel({ BottomNavigationBarItem({
@required this.icon, @required this.icon,
@required this.title, @required this.title,
this.backgroundColor this.backgroundColor
@ -57,20 +57,20 @@ class DestinationLabel {
assert(this.title != null); assert(this.title != null);
} }
/// The icon of the label. /// The icon of the item.
/// ///
/// Typically the icon is an [Icon] or an [IconImage] widget. If another type /// Typically the icon is an [Icon] or an [IconImage] widget. If another type
/// of widget is provided then it should configure itself to match the current /// of widget is provided then it should configure itself to match the current
/// [IconTheme] size and color. /// [IconTheme] size and color.
final Widget icon; final Widget icon;
/// The title of the label. /// The title of the item.
final Widget title; final Widget title;
/// The color of the background radial animation. /// The color of the background radial animation.
/// ///
/// If the navigation bar's type is [BottomNavigationBarType.shifting], then /// If the navigation bar's type is [BottomNavigationBarType.shifting], then
/// the entire bar is flooded with the [backgroundColor] when this label is /// the entire bar is flooded with the [backgroundColor] when this item is
/// tapped. /// tapped.
final Color backgroundColor; final Color backgroundColor;
} }
@ -78,70 +78,70 @@ class DestinationLabel {
/// A material widget displayed at the bottom of an app for selecting among a /// A material widget displayed at the bottom of an app for selecting among a
/// small number of views. /// small number of views.
/// ///
/// The bottom navigation bar consists of multiple destinations in the form of /// The bottom navigation bar consists of multiple items in the form of
/// labels laid out on top of a piece of material. It provies quick navigation /// labels, icons, or both, laid out on top of a piece of material. It provides
/// between top-level views of an app and is typically used on mobile. For /// quick navigation between the top-level views of an app. For larger screens,
/// larger screens, side navigation may be a better fit. /// side navigation may be a better fit.
/// ///
/// A bottom navigation bar is usually used in conjunction with [Scaffold] where /// A bottom navigation bar is usually used in conjunction with [Scaffold] where
/// it is provided as the [Scaffold.bottomNavigationBar] argument. /// it is provided as the [Scaffold.bottomNavigationBar] argument.
/// ///
/// See also: /// See also:
/// ///
/// * [DestinationLabel] /// * [BottomNavigationBarItem]
/// * [Scaffold] /// * [Scaffold]
/// * <https://material.google.com/components/bottom-navigation.html> /// * <https://material.google.com/components/bottom-navigation.html>
class BottomNavigationBar extends StatefulWidget { class BottomNavigationBar extends StatefulWidget {
/// Creates a bottom navigation bar, typically used in a [Scaffold] where it /// Creates a bottom navigation bar, typically used in a [Scaffold] where it
/// is provided as the [Scaffold.bottomNavigationBar] argument. /// is provided as the [Scaffold.bottomNavigationBar] argument.
/// ///
/// The arguments [labels] and [type] should not be null. /// The arguments [items] and [type] should not be null.
/// ///
/// The number of labels passed should be equal or greater than 2. /// The number of items passed should be equal or greater than 2.
/// ///
/// Passing a null [fixedColor] will cause a fallback to the theme's primary /// Passing a null [fixedColor] will cause a fallback to the theme's primary
/// color. /// color.
BottomNavigationBar({ BottomNavigationBar({
Key key, Key key,
@required this.labels, @required this.items,
this.onTap, this.onTap,
this.currentIndex: 0, this.currentIndex: 0,
this.type: BottomNavigationBarType.fixed, this.type: BottomNavigationBarType.fixed,
this.fixedColor, this.fixedColor,
this.iconSize: 24.0, this.iconSize: 24.0,
}) : super(key: key) { }) : super(key: key) {
assert(labels != null); assert(items != null);
assert(labels.length >= 2); assert(items.length >= 2);
assert(0 <= currentIndex && currentIndex < labels.length); assert(0 <= currentIndex && currentIndex < items.length);
assert(type != null); assert(type != null);
assert(type == BottomNavigationBarType.fixed || fixedColor == null); assert(type == BottomNavigationBarType.fixed || fixedColor == null);
assert(iconSize != null); assert(iconSize != null);
} }
/// The interactive labels laid out within the bottom navigation bar. /// The interactive items laid out within the bottom navigation bar.
final List<DestinationLabel> labels; final List<BottomNavigationBarItem> items;
/// The callback that is called when a label is tapped. /// The callback that is called when a item is tapped.
/// ///
/// The widget creating the bottom navigation bar needs to keep track of the /// The widget creating the bottom navigation bar needs to keep track of the
/// current index and call `setState` to rebuild it with the newly provided /// current index and call `setState` to rebuild it with the newly provided
/// index. /// index.
final ValueChanged<int> onTap; final ValueChanged<int> onTap;
/// The index into [labels] of the current active label. /// The index into [items] of the current active item.
final int currentIndex; final int currentIndex;
/// Defines the layout and behavior of a [BottomNavigationBar]. /// Defines the layout and behavior of a [BottomNavigationBar].
final BottomNavigationBarType type; final BottomNavigationBarType type;
/// The color of the selected label when bottom navigation bar is /// The color of the selected item when bottom navigation bar is
/// [BottomNavigationBarType.fixed]. /// [BottomNavigationBarType.fixed].
final Color fixedColor; final Color fixedColor;
/// The size of all of the [DestinationLabel] icons. /// The size of all of the [BottomNavigationBarItem] icons.
/// ///
/// This value is used to to configure the [IconTheme] for the navigation /// This value is used to to configure the [IconTheme] for the navigation
/// bar. When a [DestinationLabel.icon] widget is not an [Icon] the widget /// bar. When a [BottomNavigationBarItem.icon] widget is not an [Icon] the widget
/// should configure itself to match the icon theme's size and color. /// should configure itself to match the icon theme's size and color.
final double iconSize; final double iconSize;
@ -164,13 +164,13 @@ class BottomNavigationBarState extends State<BottomNavigationBar> with TickerPro
@override @override
void initState() { void initState() {
super.initState(); super.initState();
_controllers = new List<AnimationController>.generate(config.labels.length, (int index) { _controllers = new List<AnimationController>.generate(config.items.length, (int index) {
return new AnimationController( return new AnimationController(
duration: kThemeAnimationDuration, duration: kThemeAnimationDuration,
vsync: this, vsync: this,
)..addListener(_rebuild); )..addListener(_rebuild);
}); });
animations = new List<CurvedAnimation>.generate(config.labels.length, (int index) { animations = new List<CurvedAnimation>.generate(config.items.length, (int index) {
return new CurvedAnimation( return new CurvedAnimation(
parent: _controllers[index], parent: _controllers[index],
curve: Curves.fastOutSlowIn, curve: Curves.fastOutSlowIn,
@ -178,7 +178,7 @@ class BottomNavigationBarState extends State<BottomNavigationBar> with TickerPro
); );
}); });
_controllers[config.currentIndex].value = 1.0; _controllers[config.currentIndex].value = 1.0;
_backgroundColor = config.labels[config.currentIndex].backgroundColor; _backgroundColor = config.items[config.currentIndex].backgroundColor;
} }
@override @override
@ -192,7 +192,7 @@ class BottomNavigationBarState extends State<BottomNavigationBar> with TickerPro
void _rebuild() { void _rebuild() {
setState(() { setState(() {
// Rebuilding when any of the controllers tick, i.e. when the labels are // Rebuilding when any of the controllers tick, i.e. when the items are
// animated. // animated.
}); });
} }
@ -201,9 +201,9 @@ class BottomNavigationBarState extends State<BottomNavigationBar> with TickerPro
assert(config.type != null); assert(config.type != null);
switch (config.type) { switch (config.type) {
case BottomNavigationBarType.fixed: case BottomNavigationBarType.fixed:
return config.labels.length * _kActiveMaxWidth; return config.items.length * _kActiveMaxWidth;
case BottomNavigationBarType.shifting: case BottomNavigationBarType.shifting:
return _kActiveMaxWidth + (config.labels.length - 1) * _kInactiveMaxWidth; return _kActiveMaxWidth + (config.items.length - 1) * _kInactiveMaxWidth;
} }
return null; return null;
} }
@ -216,7 +216,7 @@ class BottomNavigationBarState extends State<BottomNavigationBar> with TickerPro
// Because of non-linear nature of the animations, the animations that are // Because of non-linear nature of the animations, the animations that are
// currently animating might not add up to the flex weight we are expecting. // currently animating might not add up to the flex weight we are expecting.
// (1.5 + N - 1, since the max flex that the animating ones can have is 1.5) // (1.5 + N - 1, since the max flex that the animating ones can have is 1.5)
// This causes instability in the animation when multiple labels are tapped. // This causes instability in the animation when multiple items are tapped.
// To solves this, we always store a weight that normalizes animating // To solves this, we always store a weight that normalizes animating
// animations such that their resulting flex values will add up to the desired // animations such that their resulting flex values will add up to the desired
// value. // value.
@ -254,7 +254,7 @@ class BottomNavigationBarState extends State<BottomNavigationBar> with TickerPro
} }
final double allWeights = weightSum(animations); final double allWeights = weightSum(animations);
// This weight corresponds to the left edge of the indexed label. // This weight corresponds to the left edge of the indexed item.
final double leftWeights = weightSum(animations.sublist(0, index)); final double leftWeights = weightSum(animations.sublist(0, index));
// Add half of its flex value in order to get the center. // Add half of its flex value in order to get the center.
@ -275,12 +275,12 @@ class BottomNavigationBarState extends State<BottomNavigationBar> with TickerPro
} }
void _pushCircle(int index) { void _pushCircle(int index) {
if (config.labels[index].backgroundColor != null) if (config.items[index].backgroundColor != null)
_circles.add( _circles.add(
new _Circle( new _Circle(
state: this, state: this,
index: index, index: index,
color: config.labels[index].backgroundColor, color: config.items[index].backgroundColor,
vsync: this, vsync: this,
)..controller.addStatusListener((AnimationStatus status) { )..controller.addStatusListener((AnimationStatus status) {
if (status == AnimationStatus.completed) { if (status == AnimationStatus.completed) {
@ -319,7 +319,7 @@ class BottomNavigationBarState extends State<BottomNavigationBar> with TickerPro
themeData.primaryColor : themeData.accentColor themeData.primaryColor : themeData.accentColor
) )
); );
for (int i = 0; i < config.labels.length; i += 1) { for (int i = 0; i < config.items.length; i += 1) {
children.add( children.add(
new Expanded( new Expanded(
child: new InkResponse( child: new InkResponse(
@ -344,7 +344,7 @@ class BottomNavigationBarState extends State<BottomNavigationBar> with TickerPro
color: colorTween.evaluate(animations[i]), color: colorTween.evaluate(animations[i]),
size: config.iconSize, size: config.iconSize,
), ),
child: config.labels[i].icon, child: config.items[i].icon,
), ),
), ),
), ),
@ -366,7 +366,7 @@ class BottomNavigationBarState extends State<BottomNavigationBar> with TickerPro
).evaluate(animations[i]), ).evaluate(animations[i]),
)), )),
alignment: FractionalOffset.bottomCenter, alignment: FractionalOffset.bottomCenter,
child: config.labels[i].title, child: config.items[i].title,
), ),
), ),
), ),
@ -386,7 +386,7 @@ class BottomNavigationBarState extends State<BottomNavigationBar> with TickerPro
case BottomNavigationBarType.shifting: case BottomNavigationBarType.shifting:
final List<Widget> children = <Widget>[]; final List<Widget> children = <Widget>[];
_computeWeight(); _computeWeight();
for (int i = 0; i < config.labels.length; i += 1) { for (int i = 0; i < config.items.length; i += 1) {
children.add( children.add(
new Expanded( new Expanded(
// Since Flexible only supports integers, we're using large // Since Flexible only supports integers, we're using large
@ -414,7 +414,7 @@ class BottomNavigationBarState extends State<BottomNavigationBar> with TickerPro
color: Colors.white, color: Colors.white,
size: config.iconSize, size: config.iconSize,
), ),
child: config.labels[i].icon, child: config.items[i].icon,
), ),
), ),
), ),
@ -430,7 +430,7 @@ class BottomNavigationBarState extends State<BottomNavigationBar> with TickerPro
fontSize: 14.0, fontSize: 14.0,
color: Colors.white color: Colors.white
), ),
child: config.labels[i].title child: config.items[i].title
), ),
), ),
), ),

60
packages/flutter/test/material/bottom_navigation_bar_test.dart
View File

@ -12,12 +12,12 @@ void main() {
await tester.pumpWidget( await tester.pumpWidget(
new Scaffold( new Scaffold(
bottomNavigationBar: new BottomNavigationBar( bottomNavigationBar: new BottomNavigationBar(
labels: <DestinationLabel>[ items: <BottomNavigationBarItem>[
new DestinationLabel( new BottomNavigationBarItem(
icon: new Icon(Icons.ac_unit), icon: new Icon(Icons.ac_unit),
title: new Text('AC') title: new Text('AC')
), ),
new DestinationLabel( new BottomNavigationBarItem(
icon: new Icon(Icons.access_alarm), icon: new Icon(Icons.access_alarm),
title: new Text('Alarm') title: new Text('Alarm')
) )
@ -38,12 +38,12 @@ void main() {
await tester.pumpWidget( await tester.pumpWidget(
new Scaffold( new Scaffold(
bottomNavigationBar: new BottomNavigationBar( bottomNavigationBar: new BottomNavigationBar(
labels: <DestinationLabel>[ items: <BottomNavigationBarItem>[
new DestinationLabel( new BottomNavigationBarItem(
icon: new Icon(Icons.ac_unit), icon: new Icon(Icons.ac_unit),
title: new Text('AC') title: new Text('AC')
), ),
new DestinationLabel( new BottomNavigationBarItem(
icon: new Icon(Icons.access_alarm), icon: new Icon(Icons.access_alarm),
title: new Text('Alarm') title: new Text('Alarm')
) )
@ -63,12 +63,12 @@ void main() {
new Scaffold( new Scaffold(
bottomNavigationBar: new BottomNavigationBar( bottomNavigationBar: new BottomNavigationBar(
type: BottomNavigationBarType.shifting, type: BottomNavigationBarType.shifting,
labels: <DestinationLabel>[ items: <BottomNavigationBarItem>[
new DestinationLabel( new BottomNavigationBarItem(
icon: new Icon(Icons.ac_unit), icon: new Icon(Icons.ac_unit),
title: new Text('AC') title: new Text('AC')
), ),
new DestinationLabel( new BottomNavigationBarItem(
icon: new Icon(Icons.access_alarm), icon: new Icon(Icons.access_alarm),
title: new Text('Alarm') title: new Text('Alarm')
) )
@ -87,12 +87,12 @@ void main() {
bottomNavigationBar: new BottomNavigationBar( bottomNavigationBar: new BottomNavigationBar(
currentIndex: 1, currentIndex: 1,
type: BottomNavigationBarType.shifting, type: BottomNavigationBarType.shifting,
labels: <DestinationLabel>[ items: <BottomNavigationBarItem>[
new DestinationLabel( new BottomNavigationBarItem(
icon: new Icon(Icons.ac_unit), icon: new Icon(Icons.ac_unit),
title: new Text('AC') title: new Text('AC')
), ),
new DestinationLabel( new BottomNavigationBarItem(
icon: new Icon(Icons.access_alarm), icon: new Icon(Icons.access_alarm),
title: new Text('Alarm') title: new Text('Alarm')
) )
@ -114,20 +114,20 @@ void main() {
new Scaffold( new Scaffold(
bottomNavigationBar: new BottomNavigationBar( bottomNavigationBar: new BottomNavigationBar(
type: BottomNavigationBarType.shifting, type: BottomNavigationBarType.shifting,
labels: <DestinationLabel>[ items: <BottomNavigationBarItem>[
new DestinationLabel( new BottomNavigationBarItem(
icon: new Icon(Icons.ac_unit), icon: new Icon(Icons.ac_unit),
title: new Text('AC') title: new Text('AC')
), ),
new DestinationLabel( new BottomNavigationBarItem(
icon: new Icon(Icons.access_alarm), icon: new Icon(Icons.access_alarm),
title: new Text('Alarm') title: new Text('Alarm')
), ),
new DestinationLabel( new BottomNavigationBarItem(
icon: new Icon(Icons.access_time), icon: new Icon(Icons.access_time),
title: new Text('Time') title: new Text('Time')
), ),
new DestinationLabel( new BottomNavigationBarItem(
icon: new Icon(Icons.add), icon: new Icon(Icons.add),
title: new Text('Add') title: new Text('Add')
) )
@ -174,20 +174,20 @@ void main() {
child: new Scaffold( child: new Scaffold(
bottomNavigationBar: new BottomNavigationBar( bottomNavigationBar: new BottomNavigationBar(
type: BottomNavigationBarType.shifting, type: BottomNavigationBarType.shifting,
labels: <DestinationLabel>[ items: <BottomNavigationBarItem>[
new DestinationLabel( new BottomNavigationBarItem(
icon: new Icon(Icons.ac_unit), icon: new Icon(Icons.ac_unit),
title: new Text('AC') title: new Text('AC')
), ),
new DestinationLabel( new BottomNavigationBarItem(
icon: new Icon(Icons.access_alarm), icon: new Icon(Icons.access_alarm),
title: new Text('Alarm') title: new Text('Alarm')
), ),
new DestinationLabel( new BottomNavigationBarItem(
icon: new Icon(Icons.access_time), icon: new Icon(Icons.access_time),
title: new Text('Time') title: new Text('Time')
), ),
new DestinationLabel( new BottomNavigationBarItem(
icon: new Icon(Icons.add), icon: new Icon(Icons.add),
title: new Text('Add') title: new Text('Add')
) )
@ -212,20 +212,20 @@ void main() {
child: new Scaffold( child: new Scaffold(
bottomNavigationBar: new BottomNavigationBar( bottomNavigationBar: new BottomNavigationBar(
type: BottomNavigationBarType.fixed, type: BottomNavigationBarType.fixed,
labels: <DestinationLabel>[ items: <BottomNavigationBarItem>[
new DestinationLabel( new BottomNavigationBarItem(
icon: new Icon(Icons.ac_unit), icon: new Icon(Icons.ac_unit),
title: new Text('AC') title: new Text('AC')
), ),
new DestinationLabel( new BottomNavigationBarItem(
icon: new Icon(Icons.access_alarm), icon: new Icon(Icons.access_alarm),
title: new Text('Alarm') title: new Text('Alarm')
), ),
new DestinationLabel( new BottomNavigationBarItem(
icon: new Icon(Icons.access_time), icon: new Icon(Icons.access_time),
title: new Text('Time') title: new Text('Time')
), ),
new DestinationLabel( new BottomNavigationBarItem(
icon: new Icon(Icons.add), icon: new Icon(Icons.add),
title: new Text('Add') title: new Text('Add')
) )
@ -247,12 +247,12 @@ void main() {
new Scaffold( new Scaffold(
bottomNavigationBar: new BottomNavigationBar( bottomNavigationBar: new BottomNavigationBar(
iconSize: 12.0, iconSize: 12.0,
labels: <DestinationLabel>[ items: <BottomNavigationBarItem>[
new DestinationLabel( new BottomNavigationBarItem(
title: new Text('A'), title: new Text('A'),
icon: new Icon(Icons.ac_unit), icon: new Icon(Icons.ac_unit),
), ),
new DestinationLabel( new BottomNavigationBarItem(
title: new Text('B'), title: new Text('B'),
icon: new Builder( icon: new Builder(
builder: (BuildContext context) { builder: (BuildContext context) {