examples/flutter_gallery/lib/demo/material/bottom_app_bar_demo.dart - mirrors/flutter - Git at Google

 // Copyright 2018 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.

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

 class BottomAppBarDemo extends StatefulWidget {
   static const String routeName = '/material/bottom_app_bar';

   @override
   State createState() => new _BottomAppBarDemoState();
 }

 class _BottomAppBarDemoState extends State<BottomAppBarDemo> {
   // The key given to the Scaffold so that _showSnackbar can find it.
   static final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

   // The index of the currently-selected _FabLocationConfiguration.
   int fabLocationIndex = 1;

   static const List<_FabLocationConfiguration> _fabLocationConfigurations = const <_FabLocationConfiguration>[
     const _FabLocationConfiguration('End, undocked above the bottom app bar', _BabMode.END_FAB, FloatingActionButtonLocation.endFloat),
     const _FabLocationConfiguration('End, docked to the bottom app bar', _BabMode.END_FAB, FloatingActionButtonLocation.endDocked),
     const _FabLocationConfiguration('Center, docked to the bottom app bar', _BabMode.CENTER_FAB, FloatingActionButtonLocation.centerDocked),
     const _FabLocationConfiguration('Center, undocked above the bottom app bar', _BabMode.CENTER_FAB, FloatingActionButtonLocation.centerFloat),
     // This configuration uses a custom FloatingActionButtonLocation.
     const _FabLocationConfiguration('Start, docked to the top app bar', _BabMode.CENTER_FAB, const _StartTopFloatingActionButtonLocation()),
   ];

   // The index of the currently-selected _FabShapeConfiguration.
   int fabShapeIndex = 1;

   static const List<_FabShapeConfiguration> _fabShapeConfigurations = const <_FabShapeConfiguration>[
       const _FabShapeConfiguration('None', null),
       const _FabShapeConfiguration('Circular',
         const FloatingActionButton(
           onPressed: _showSnackbar,
           child: const Icon(Icons.add),
           backgroundColor: Colors.orange,
         ),
       ),
       const _FabShapeConfiguration('Diamond',
         const _DiamondFab(
           onPressed: _showSnackbar,
           child: const Icon(Icons.add),
         ),
       ),
     ];

   // The currently-selected Color for the Bottom App Bar.
   Color babColor;

   // Accessible names for the colors that a Screen Reader can use to
   // identify them.
   static final Map<Color, String> colorToName = <Color, String> {
     null: 'White',
     Colors.orange: 'Orange',
     Colors.green: 'Green',
     Colors.lightBlue: 'Light blue',
   };
   static const List<Color> babColors = const <Color> [
     null,
     Colors.orange,
     Colors.green,
     Colors.lightBlue,
   ];

   // Whether or not to show a notch in the Bottom App Bar around the
   // Floating Action Button when it is docked.
   bool notchEnabled = true;

   @override
   Widget build(BuildContext context) {
     return new Scaffold(
       key: _scaffoldKey,
       appBar: new AppBar(
         title: const Text('Bottom App Bar with FAB location'),
         // Add 48dp of space onto the bottom of the appbar.
         // This gives space for the top-start location to attach to without
         // blocking the 'back' button.
         bottom: const PreferredSize(
           preferredSize: const Size.fromHeight(48.0),
           child: const SizedBox(),
         ),
       ),
       body: new SingleChildScrollView(
         padding: const EdgeInsets.all(16.0),
         child: buildControls(context),
       ),
       bottomNavigationBar: new _DemoBottomAppBar(_fabLocationConfigurations[fabLocationIndex].babMode, babColor, notchEnabled),
       floatingActionButton: _fabShapeConfigurations[fabShapeIndex].fab,
       floatingActionButtonLocation: _fabLocationConfigurations[fabLocationIndex].fabLocation,
     );
   }

   Widget buildControls(BuildContext context) {
     return new Column(
       children: <Widget> [
         new Text(
           'Floating action button',
           style: Theme.of(context).textTheme.title,
         ),
         buildFabShapePicker(),
         buildFabLocationPicker(),
         const Divider(),
         new Text(
           'Bottom app bar options',
           style: Theme.of(context).textTheme.title,
         ),
         buildBabColorPicker(),
         new CheckboxListTile(
           title: const Text('Enable notch'),
           value: notchEnabled,
           onChanged: (bool value) {
             setState(() {
               notchEnabled = value;
             });
           },
           controlAffinity: ListTileControlAffinity.leading,
         ),
       ],
     );
   }

   Widget buildFabShapePicker() {
     return new Row(
       mainAxisAlignment: MainAxisAlignment.spaceBetween,
       children: <Widget>[
         const SizedBox(width: 96.0,
           child: const Text('Shape: '),
         ),
         new Expanded(
           child: new Padding(
             padding: const EdgeInsets.all(8.0),
             child: new RaisedButton(
               child: const Text('Change shape'),
               onPressed: () {
                 setState(() {
                   fabShapeIndex = (fabShapeIndex + 1) % _fabShapeConfigurations.length;
                 });
               },
             ),
           ),
         ),
       ],
     );
   }

   Widget buildFabLocationPicker() {
     return new Row(
       mainAxisAlignment: MainAxisAlignment.spaceBetween,
       children: <Widget>[
         const SizedBox(
           width: 96.0,
           child: const Text('Location: '),
         ),
         new Expanded(
           child: new Padding(
             padding: const EdgeInsets.all(8.0),
             child: new RaisedButton(
               child: const Text('Move'),
               onPressed: () {
                 setState(() {
                   fabLocationIndex = (fabLocationIndex + 1) % _fabLocationConfigurations.length;
                 });
               },
             ),
           ),
         ),
       ],
     );
   }

   Widget buildBabColorPicker() {
     final List<Widget> colors = <Widget> [
       const Text('Color:'),
     ];
     for (Color color in babColors) {
       colors.add(
         new Semantics(
           label: 'Set Bottom App Bar color to ${colorToName[color]}',
           container: true,
           child: new Row(children: <Widget> [
             new Radio<Color>(
               value: color,
               groupValue: babColor,
               onChanged: (Color color) {
                 setState(() {
                   babColor = color;
                 });
               },
             ),
             new Container(
               decoration: new BoxDecoration(
                 color: color,
                 border: new Border.all(width:2.0, color: Colors.black),
               ),
               child: const SizedBox(width: 20.0, height: 20.0),
             ),
             const Padding(padding: const EdgeInsets.only(left: 12.0)),
           ]),
         ),
       );
     }
     return new SingleChildScrollView(
       scrollDirection: Axis.horizontal,
       child: new Row(
         children: colors,
         mainAxisAlignment: MainAxisAlignment.center,
       ),
     );
   }

   static void _showSnackbar() {
     _scaffoldKey.currentState.showSnackBar(
       const SnackBar(content: const Text(_explanatoryText)),
     );
   }
 }

 const String _explanatoryText =
   "When the Scaffold's floating action button location changes, "
   'the floating action button animates to its new position.'
   'The BottomAppBar adapts its shape appropriately.';

 // Whether the Bottom App Bar's menu should keep icons away from the center or from the end of the screen.
 //
 // When the Floating Action Button is positioned at the end of the screen,
 // it would cover icons at the end of the screen, so the END_FAB mode tells
 // the MyBottomAppBar to place icons away from the end.
 //
 // Similar logic applies to the CENTER_FAB mode.
 enum _BabMode {
   END_FAB,
   CENTER_FAB,
 }

 // Pairs the Bottom App Bar's menu mode with a Floating Action Button Location.
 class _FabLocationConfiguration {
   const _FabLocationConfiguration(this.name, this.babMode, this.fabLocation);

   // The name of this configuration.
   final String name;

   // The _BabMode to place the menu in the bab with.
   final _BabMode babMode;

   // The location for the Floating Action Button.
   final FloatingActionButtonLocation fabLocation;
 }

 // Map of names to the different shapes of Floating Action Button in this demo.
 class _FabShapeConfiguration {
   const _FabShapeConfiguration(this.name, this.fab);

   final String name;
   final Widget fab;
 }

 // A bottom app bar with a menu inside it.
 class _DemoBottomAppBar extends StatelessWidget {
   const _DemoBottomAppBar(this.babMode, this.color, this.enableNotch);

   final _BabMode babMode;
   final Color color;
   final bool enableNotch;

   final Curve fadeOutCurve = const Interval(0.0, 0.3333);
   final Curve fadeInCurve = const Interval(0.3333, 1.0);

   @override
   Widget build(BuildContext context) {
     return new BottomAppBar(
       color: color,
       hasNotch: enableNotch,
       // TODO: Use an AnimatedCrossFade to build contents for centered FAB performantly.
       // Using AnimatedCrossFade here previously was causing https://github.com/flutter/flutter/issues/16377.
       child: buildBabContents(context, _BabMode.END_FAB),
     );
   }

   Widget buildBabContents(BuildContext context, _BabMode babMode) {
     final List<Widget> rowContents = <Widget> [
       new IconButton(
         icon: const Icon(Icons.menu),
         onPressed: () {
           showModalBottomSheet<Null>(context: context, builder: (BuildContext context) => const _DemoDrawer());
         },
       ),
     ];
     if (babMode == _BabMode.CENTER_FAB) {
       rowContents.add(
         new Expanded(
           child: new ConstrainedBox(
             constraints: const BoxConstraints(maxHeight: 0.0),
           ),
         ),
       );
     }
     rowContents.addAll(<Widget> [
       new IconButton(
         icon: const Icon(Icons.search),
         onPressed: () {
           Scaffold.of(context).showSnackBar(
             const SnackBar(content: const Text('This is a dummy search action.')),
           );
         },
       ),
       new IconButton(
         icon: const Icon(Icons.more_vert),
         onPressed: () {
           Scaffold.of(context).showSnackBar(
             const SnackBar(content: const Text('This is a dummy menu action.')),
           );
         },
       ),
     ]);
     return new Row(
       children: rowContents,
     );
   }
 }

 // A drawer that pops up from the bottom of the screen.
 class _DemoDrawer extends StatelessWidget {
   const _DemoDrawer();

   @override
   Widget build(BuildContext context) {
     return new Drawer(
       child: new Column(
         children: const <Widget>[
           const ListTile(
             leading: const Icon(Icons.search),
             title: const Text('Search'),
           ),
           const ListTile(
             leading: const Icon(Icons.threed_rotation),
             title: const Text('3D'),
           ),
         ],
       ),
     );
   }
 }

 // A diamond-shaped floating action button.
 class _DiamondFab extends StatefulWidget {
   const _DiamondFab({
     this.child,
     this.notchMargin: 6.0,
     this.onPressed,
   });

   final Widget child;
   final double notchMargin;
   final VoidCallback onPressed;

   @override
   State createState() => new _DiamondFabState();
 }

 class _DiamondFabState extends State<_DiamondFab> {

   VoidCallback _clearComputeNotch;

   @override
   Widget build(BuildContext context) {
     return new Material(
       shape: const _DiamondBorder(),
       color: Colors.orange,
       child: new InkWell(
         onTap: widget.onPressed,
         child: new Container(
           width: 56.0,
           height: 56.0,
           child: IconTheme.merge(
             data: new IconThemeData(color: Theme.of(context).accentIconTheme.color),
             child: widget.child,
           ),
         ),
       ),
       elevation: 6.0,
     );
   }

   @override
   void didChangeDependencies() {
     super.didChangeDependencies();
     _clearComputeNotch = Scaffold.setFloatingActionButtonNotchFor(context, _computeNotch);
   }

   @override
   void deactivate() {
     if (_clearComputeNotch != null)
       _clearComputeNotch();
     super.deactivate();
   }

   Path _computeNotch(Rect host, Rect guest, Offset start, Offset end) {
     final Rect marginedGuest = guest.inflate(widget.notchMargin);
     if (!host.overlaps(marginedGuest))
       return new Path()..lineTo(end.dx, end.dy);

     final Rect intersection = marginedGuest.intersect(host);
     // We are computing a "V" shaped notch, as in this diagram:
     //    -----\****   /-----
     //          \     /
     //           \   /
     //            \ /
     //
     //  "-" marks the top edge of the bottom app bar.
     //  "\" and "/" marks the notch outline
     //
     //  notchToCenter is the horizontal distance between the guest's center and
     //  the host's top edge where the notch starts (marked with "*").
     //  We compute notchToCenter by similar triangles:
     final double notchToCenter =
       intersection.height * (marginedGuest.height / 2.0)
       / (marginedGuest.width / 2.0);

     return new Path()
       ..lineTo(marginedGuest.center.dx - notchToCenter, host.top)
       ..lineTo(marginedGuest.left + marginedGuest.width / 2.0, marginedGuest.bottom)
       ..lineTo(marginedGuest.center.dx + notchToCenter, host.top)
       ..lineTo(end.dx, end.dy);
   }
 }

 class _DiamondBorder extends ShapeBorder {
   const _DiamondBorder();

   @override
   EdgeInsetsGeometry get dimensions {
     return const EdgeInsets.only();
   }

   @override
   Path getInnerPath(Rect rect, { TextDirection textDirection }) {
     return getOuterPath(rect, textDirection: textDirection);
   }

   @override
   Path getOuterPath(Rect rect, { TextDirection textDirection }) {
     return new Path()
       ..moveTo(rect.left + rect.width / 2.0, rect.top)
       ..lineTo(rect.right, rect.top + rect.height / 2.0)
       ..lineTo(rect.left + rect.width  / 2.0, rect.bottom)
       ..lineTo(rect.left, rect.top + rect.height / 2.0)
       ..close();
   }

   @override
   void paint(Canvas canvas, Rect rect, { TextDirection textDirection }) {}

   // This border doesn't support scaling.
   @override
   ShapeBorder scale(double t) {
     return null;
   }
 }

 // Places the Floating Action Button at the top of the content area of the
 // app, on the border between the body and the app bar.
 class _StartTopFloatingActionButtonLocation extends FloatingActionButtonLocation {
   const _StartTopFloatingActionButtonLocation();

   @override
   Offset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry) {
     // First, we'll place the X coordinate for the Floating Action Button
     // at the start of the screen, based on the text direction.
     double fabX;
     assert(scaffoldGeometry.textDirection != null);
     switch (scaffoldGeometry.textDirection) {
       case TextDirection.rtl:
         // In RTL layouts, the start of the screen is on the right side,
         // and the end of the screen is on the left.
         //
         // We need to align the right edge of the floating action button with
         // the right edge of the screen, then move it inwards by the designated padding.
         //
         // The Scaffold's origin is at its top-left, so we need to offset fabX
         // by the Scaffold's width to get the right edge of the screen.
         //
         // The Floating Action Button's origin is at its top-left, so we also need
         // to subtract the Floating Action Button's width to align the right edge
         // of the Floating Action Button instead of the left edge.
         final double startPadding = kFloatingActionButtonMargin + scaffoldGeometry.minInsets.right;
         fabX = scaffoldGeometry.scaffoldSize.width - scaffoldGeometry.floatingActionButtonSize.width - startPadding;
         break;
       case TextDirection.ltr:
         // In LTR layouts, the start of the screen is on the left side,
         // and the end of the screen is on the right.
         //
         // Placing the fabX at 0.0 will align the left edge of the
         // Floating Action Button with the left edge of the screen, so all
         // we need to do is offset fabX by the designated padding.
         final double startPadding = kFloatingActionButtonMargin + scaffoldGeometry.minInsets.left;
         fabX = startPadding;
         break;
     }
     // Finally, we'll place the Y coordinate for the Floating Action Button
     // at the top of the content body.
     //
     // We want to place the middle of the Floating Action Button on the
     // border between the Scaffold's app bar and its body. To do this,
     // we place fabY at the scaffold geometry's contentTop, then subtract
     // half of the Floating Action Button's height to place the center
     // over the contentTop.
     //
     // We don't have to worry about which way is the top like we did
     // for left and right, so we place fabY in this one-liner.
     final double fabY = scaffoldGeometry.contentTop - (scaffoldGeometry.floatingActionButtonSize.height / 2.0);
     return new Offset(fabX, fabY);
   }
 }
	// Copyright 2018 The Chromium Authors. All rights reserved.
	// Use of this source code is governed by a BSD-style license that can be
	// found in the LICENSE file.

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

	class BottomAppBarDemo extends StatefulWidget {
	static const String routeName = '/material/bottom_app_bar';

	@override
	State createState() => new _BottomAppBarDemoState();
	}

	class _BottomAppBarDemoState extends State<BottomAppBarDemo> {
	// The key given to the Scaffold so that _showSnackbar can find it.
	static final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

	// The index of the currently-selected _FabLocationConfiguration.
	int fabLocationIndex = 1;

	static const List<_FabLocationConfiguration> _fabLocationConfigurations = const <_FabLocationConfiguration>[
	const _FabLocationConfiguration('End, undocked above the bottom app bar', _BabMode.END_FAB, FloatingActionButtonLocation.endFloat),
	const _FabLocationConfiguration('End, docked to the bottom app bar', _BabMode.END_FAB, FloatingActionButtonLocation.endDocked),
	const _FabLocationConfiguration('Center, docked to the bottom app bar', _BabMode.CENTER_FAB, FloatingActionButtonLocation.centerDocked),
	const _FabLocationConfiguration('Center, undocked above the bottom app bar', _BabMode.CENTER_FAB, FloatingActionButtonLocation.centerFloat),
	// This configuration uses a custom FloatingActionButtonLocation.
	const _FabLocationConfiguration('Start, docked to the top app bar', _BabMode.CENTER_FAB, const _StartTopFloatingActionButtonLocation()),
	];

	// The index of the currently-selected _FabShapeConfiguration.
	int fabShapeIndex = 1;

	static const List<_FabShapeConfiguration> _fabShapeConfigurations = const <_FabShapeConfiguration>[
	const _FabShapeConfiguration('None', null),
	const _FabShapeConfiguration('Circular',
	const FloatingActionButton(
	onPressed: _showSnackbar,
	child: const Icon(Icons.add),
	backgroundColor: Colors.orange,
	),
	),
	const _FabShapeConfiguration('Diamond',
	const _DiamondFab(
	onPressed: _showSnackbar,
	child: const Icon(Icons.add),
	),
	),
	];

	// The currently-selected Color for the Bottom App Bar.
	Color babColor;

	// Accessible names for the colors that a Screen Reader can use to
	// identify them.
	static final Map<Color, String> colorToName = <Color, String> {
	null: 'White',
	Colors.orange: 'Orange',
	Colors.green: 'Green',
	Colors.lightBlue: 'Light blue',
	};
	static const List<Color> babColors = const <Color> [
	null,
	Colors.orange,
	Colors.green,
	Colors.lightBlue,
	];

	// Whether or not to show a notch in the Bottom App Bar around the
	// Floating Action Button when it is docked.
	bool notchEnabled = true;

	@override
	Widget build(BuildContext context) {
	return new Scaffold(
	key: _scaffoldKey,
	appBar: new AppBar(
	title: const Text('Bottom App Bar with FAB location'),
	// Add 48dp of space onto the bottom of the appbar.
	// This gives space for the top-start location to attach to without
	// blocking the 'back' button.
	bottom: const PreferredSize(
	preferredSize: const Size.fromHeight(48.0),
	child: const SizedBox(),
	),
	),
	body: new SingleChildScrollView(
	padding: const EdgeInsets.all(16.0),
	child: buildControls(context),
	),
	bottomNavigationBar: new _DemoBottomAppBar(_fabLocationConfigurations[fabLocationIndex].babMode, babColor, notchEnabled),
	floatingActionButton: _fabShapeConfigurations[fabShapeIndex].fab,
	floatingActionButtonLocation: _fabLocationConfigurations[fabLocationIndex].fabLocation,
	);
	}

	Widget buildControls(BuildContext context) {
	return new Column(
	children: <Widget> [
	new Text(
	'Floating action button',
	style: Theme.of(context).textTheme.title,
	),
	buildFabShapePicker(),
	buildFabLocationPicker(),
	const Divider(),
	new Text(
	'Bottom app bar options',
	style: Theme.of(context).textTheme.title,
	),
	buildBabColorPicker(),
	new CheckboxListTile(
	title: const Text('Enable notch'),
	value: notchEnabled,
	onChanged: (bool value) {
	setState(() {
	notchEnabled = value;
	});
	},
	controlAffinity: ListTileControlAffinity.leading,
	),
	],
	);
	}

	Widget buildFabShapePicker() {
	return new Row(
	mainAxisAlignment: MainAxisAlignment.spaceBetween,
	children: <Widget>[
	const SizedBox(width: 96.0,
	child: const Text('Shape: '),
	),
	new Expanded(
	child: new Padding(
	padding: const EdgeInsets.all(8.0),
	child: new RaisedButton(
	child: const Text('Change shape'),
	onPressed: () {
	setState(() {
	fabShapeIndex = (fabShapeIndex + 1) % _fabShapeConfigurations.length;
	});
	},
	),
	),
	),
	],
	);
	}

	Widget buildFabLocationPicker() {
	return new Row(
	mainAxisAlignment: MainAxisAlignment.spaceBetween,
	children: <Widget>[
	const SizedBox(
	width: 96.0,
	child: const Text('Location: '),
	),
	new Expanded(
	child: new Padding(
	padding: const EdgeInsets.all(8.0),
	child: new RaisedButton(
	child: const Text('Move'),
	onPressed: () {
	setState(() {
	fabLocationIndex = (fabLocationIndex + 1) % _fabLocationConfigurations.length;
	});
	},
	),
	),
	),
	],
	);
	}

	Widget buildBabColorPicker() {
	final List<Widget> colors = <Widget> [
	const Text('Color:'),
	];
	for (Color color in babColors) {
	colors.add(
	new Semantics(
	label: 'Set Bottom App Bar color to ${colorToName[color]}',
	container: true,
	child: new Row(children: <Widget> [
	new Radio<Color>(
	value: color,
	groupValue: babColor,
	onChanged: (Color color) {
	setState(() {
	babColor = color;
	});
	},
	),
	new Container(
	decoration: new BoxDecoration(
	color: color,
	border: new Border.all(width:2.0, color: Colors.black),
	),
	child: const SizedBox(width: 20.0, height: 20.0),
	),
	const Padding(padding: const EdgeInsets.only(left: 12.0)),
	]),
	),
	);
	}
	return new SingleChildScrollView(
	scrollDirection: Axis.horizontal,
	child: new Row(
	children: colors,
	mainAxisAlignment: MainAxisAlignment.center,
	),
	);
	}

	static void _showSnackbar() {
	_scaffoldKey.currentState.showSnackBar(
	const SnackBar(content: const Text(_explanatoryText)),
	);
	}
	}

	const String _explanatoryText =
	"When the Scaffold's floating action button location changes, "
	'the floating action button animates to its new position.'
	'The BottomAppBar adapts its shape appropriately.';

	// Whether the Bottom App Bar's menu should keep icons away from the center or from the end of the screen.
	//
	// When the Floating Action Button is positioned at the end of the screen,
	// it would cover icons at the end of the screen, so the END_FAB mode tells
	// the MyBottomAppBar to place icons away from the end.
	//
	// Similar logic applies to the CENTER_FAB mode.
	enum _BabMode {
	END_FAB,
	CENTER_FAB,
	}

	// Pairs the Bottom App Bar's menu mode with a Floating Action Button Location.
	class _FabLocationConfiguration {
	const _FabLocationConfiguration(this.name, this.babMode, this.fabLocation);

	// The name of this configuration.
	final String name;

	// The _BabMode to place the menu in the bab with.
	final _BabMode babMode;

	// The location for the Floating Action Button.
	final FloatingActionButtonLocation fabLocation;
	}

	// Map of names to the different shapes of Floating Action Button in this demo.
	class _FabShapeConfiguration {
	const _FabShapeConfiguration(this.name, this.fab);

	final String name;
	final Widget fab;
	}

	// A bottom app bar with a menu inside it.
	class _DemoBottomAppBar extends StatelessWidget {
	const _DemoBottomAppBar(this.babMode, this.color, this.enableNotch);

	final _BabMode babMode;
	final Color color;
	final bool enableNotch;

	final Curve fadeOutCurve = const Interval(0.0, 0.3333);
	final Curve fadeInCurve = const Interval(0.3333, 1.0);

	@override
	Widget build(BuildContext context) {
	return new BottomAppBar(
	color: color,
	hasNotch: enableNotch,
	// TODO: Use an AnimatedCrossFade to build contents for centered FAB performantly.
	// Using AnimatedCrossFade here previously was causing https://github.com/flutter/flutter/issues/16377.
	child: buildBabContents(context, _BabMode.END_FAB),
	);
	}

	Widget buildBabContents(BuildContext context, _BabMode babMode) {
	final List<Widget> rowContents = <Widget> [
	new IconButton(
	icon: const Icon(Icons.menu),
	onPressed: () {
	showModalBottomSheet<Null>(context: context, builder: (BuildContext context) => const _DemoDrawer());
	},
	),
	];
	if (babMode == _BabMode.CENTER_FAB) {
	rowContents.add(
	new Expanded(
	child: new ConstrainedBox(
	constraints: const BoxConstraints(maxHeight: 0.0),
	),
	),
	);
	}
	rowContents.addAll(<Widget> [
	new IconButton(
	icon: const Icon(Icons.search),
	onPressed: () {
	Scaffold.of(context).showSnackBar(
	const SnackBar(content: const Text('This is a dummy search action.')),
	);
	},
	),
	new IconButton(
	icon: const Icon(Icons.more_vert),
	onPressed: () {
	Scaffold.of(context).showSnackBar(
	const SnackBar(content: const Text('This is a dummy menu action.')),
	);
	},
	),
	]);
	return new Row(
	children: rowContents,
	);
	}
	}

	// A drawer that pops up from the bottom of the screen.
	class _DemoDrawer extends StatelessWidget {
	const _DemoDrawer();

	@override
	Widget build(BuildContext context) {
	return new Drawer(
	child: new Column(
	children: const <Widget>[
	const ListTile(
	leading: const Icon(Icons.search),
	title: const Text('Search'),
	),
	const ListTile(
	leading: const Icon(Icons.threed_rotation),
	title: const Text('3D'),
	),
	],
	),
	);
	}
	}

	// A diamond-shaped floating action button.
	class _DiamondFab extends StatefulWidget {
	const _DiamondFab({
	this.child,
	this.notchMargin: 6.0,
	this.onPressed,
	});

	final Widget child;
	final double notchMargin;
	final VoidCallback onPressed;

	@override
	State createState() => new _DiamondFabState();
	}

	class _DiamondFabState extends State<_DiamondFab> {

	VoidCallback _clearComputeNotch;

	@override
	Widget build(BuildContext context) {
	return new Material(
	shape: const _DiamondBorder(),
	color: Colors.orange,
	child: new InkWell(
	onTap: widget.onPressed,
	child: new Container(
	width: 56.0,
	height: 56.0,
	child: IconTheme.merge(
	data: new IconThemeData(color: Theme.of(context).accentIconTheme.color),
	child: widget.child,
	),
	),
	),
	elevation: 6.0,
	);
	}

	@override
	void didChangeDependencies() {
	super.didChangeDependencies();
	_clearComputeNotch = Scaffold.setFloatingActionButtonNotchFor(context, _computeNotch);
	}

	@override
	void deactivate() {
	if (_clearComputeNotch != null)
	_clearComputeNotch();
	super.deactivate();
	}

	Path _computeNotch(Rect host, Rect guest, Offset start, Offset end) {
	final Rect marginedGuest = guest.inflate(widget.notchMargin);
	if (!host.overlaps(marginedGuest))
	return new Path()..lineTo(end.dx, end.dy);

	final Rect intersection = marginedGuest.intersect(host);
	// We are computing a "V" shaped notch, as in this diagram:
	// -----\**** /-----
	// \ /
	// \ /
	// \ /
	//
	// "-" marks the top edge of the bottom app bar.
	// "\" and "/" marks the notch outline
	//
	// notchToCenter is the horizontal distance between the guest's center and
	// the host's top edge where the notch starts (marked with "*").
	// We compute notchToCenter by similar triangles:
	final double notchToCenter =
	intersection.height * (marginedGuest.height / 2.0)
	/ (marginedGuest.width / 2.0);

	return new Path()
	..lineTo(marginedGuest.center.dx - notchToCenter, host.top)
	..lineTo(marginedGuest.left + marginedGuest.width / 2.0, marginedGuest.bottom)
	..lineTo(marginedGuest.center.dx + notchToCenter, host.top)
	..lineTo(end.dx, end.dy);
	}
	}

	class _DiamondBorder extends ShapeBorder {
	const _DiamondBorder();

	@override
	EdgeInsetsGeometry get dimensions {
	return const EdgeInsets.only();
	}

	@override
	Path getInnerPath(Rect rect, { TextDirection textDirection }) {
	return getOuterPath(rect, textDirection: textDirection);
	}

	@override
	Path getOuterPath(Rect rect, { TextDirection textDirection }) {
	return new Path()
	..moveTo(rect.left + rect.width / 2.0, rect.top)
	..lineTo(rect.right, rect.top + rect.height / 2.0)
	..lineTo(rect.left + rect.width / 2.0, rect.bottom)
	..lineTo(rect.left, rect.top + rect.height / 2.0)
	..close();
	}

	@override
	void paint(Canvas canvas, Rect rect, { TextDirection textDirection }) {}

	// This border doesn't support scaling.
	@override
	ShapeBorder scale(double t) {
	return null;
	}
	}

	// Places the Floating Action Button at the top of the content area of the
	// app, on the border between the body and the app bar.
	class _StartTopFloatingActionButtonLocation extends FloatingActionButtonLocation {
	const _StartTopFloatingActionButtonLocation();

	@override
	Offset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry) {
	// First, we'll place the X coordinate for the Floating Action Button
	// at the start of the screen, based on the text direction.
	double fabX;
	assert(scaffoldGeometry.textDirection != null);
	switch (scaffoldGeometry.textDirection) {
	case TextDirection.rtl:
	// In RTL layouts, the start of the screen is on the right side,
	// and the end of the screen is on the left.
	//
	// We need to align the right edge of the floating action button with
	// the right edge of the screen, then move it inwards by the designated padding.
	//
	// The Scaffold's origin is at its top-left, so we need to offset fabX
	// by the Scaffold's width to get the right edge of the screen.
	//
	// The Floating Action Button's origin is at its top-left, so we also need
	// to subtract the Floating Action Button's width to align the right edge
	// of the Floating Action Button instead of the left edge.
	final double startPadding = kFloatingActionButtonMargin + scaffoldGeometry.minInsets.right;
	fabX = scaffoldGeometry.scaffoldSize.width - scaffoldGeometry.floatingActionButtonSize.width - startPadding;
	break;
	case TextDirection.ltr:
	// In LTR layouts, the start of the screen is on the left side,
	// and the end of the screen is on the right.
	//
	// Placing the fabX at 0.0 will align the left edge of the
	// Floating Action Button with the left edge of the screen, so all
	// we need to do is offset fabX by the designated padding.
	final double startPadding = kFloatingActionButtonMargin + scaffoldGeometry.minInsets.left;
	fabX = startPadding;
	break;
	}
	// Finally, we'll place the Y coordinate for the Floating Action Button
	// at the top of the content body.
	//
	// We want to place the middle of the Floating Action Button on the
	// border between the Scaffold's app bar and its body. To do this,
	// we place fabY at the scaffold geometry's contentTop, then subtract
	// half of the Floating Action Button's height to place the center
	// over the contentTop.
	//
	// We don't have to worry about which way is the top like we did
	// for left and right, so we place fabY in this one-liner.
	final double fabY = scaffoldGeometry.contentTop - (scaffoldGeometry.floatingActionButtonSize.height / 2.0);
	return new Offset(fabX, fabY);
	}
	}