dart/lib/components/slideshow.dart - release.projects.syncslides - Git at Google

 // Copyright 2015 The Vanadium 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/material.dart';
 import 'package:logging/logging.dart';

 import '../stores/store.dart';
 import '../styles/common.dart' as style;
 import '../utils/image_provider.dart' as imageProvider;
 import 'askquestion.dart';
 import 'questionlist.dart';
 import 'slideshow_fullscreen.dart';
 import 'syncslides_page.dart';

 final GlobalKey _scaffoldKey = new GlobalKey();

 final Logger log = new Logger('components/slideshow');

 class SlideshowPage extends SyncSlidesPage {
   final String _deckId;

   SlideshowPage(this._deckId);

   Widget build(BuildContext context, AppState appState, AppActions appActions) {
     if (!appState.decks.containsKey(_deckId)) {
       // TODO(aghassemi): Proper error page with navigation back to main view.
       return new Text('Deck no longer exists.');
     }

     return new Scaffold(
         key: _scaffoldKey,
         body: new Material(
             child:
                 new SlideShow(appActions, appState, appState.decks[_deckId])));
   }
 }

 class SlideShow extends StatelessComponent {
   AppActions _appActions;
   AppState _appState;
   DeckState _deckState;
   int _currSlideNum;

   SlideShow(this._appActions, this._appState, this._deckState);

   Widget build(BuildContext context) {
     if (_deckState.slides.length == 0) {
       // TODO(aghassemi): Proper error page with navigation back to main view.
       return new Text('No slide to show.');
     }

     if (_deckState.presentation != null &&
         _deckState.presentation.isFollowingPresentation) {
       _currSlideNum = _deckState.presentation.currSlideNum;
     } else {
       _currSlideNum = _deckState.currSlideNum;
     }

     if (_currSlideNum >= _deckState.slides.length) {
       // TODO(aghassemi): Can this ever happen?
       //  -What if slide number set by another peer is synced before the actual slides?
       //  -What if we have navigated to a particular slide on our own and peer deletes that slide?
       // I think without careful batching and consuming watch events as batches, this could happen
       // maybe for a split second until rest of data syncs up.
       // UI needs to be bullet-roof, a flicker in the UI is better than an exception and crash.
       log.shout(
           'Current slide number $_currSlideNum is greater than the number of slides ${_deckState.slides.length}.');

       // TODO(aghassemi): Proper error page with navigation back to main view.
       return new Text('Slide does not exist.');
     }

     if (MediaQuery.of(context).orientation == Orientation.landscape) {
       return _buildLandscapeLayout(context);
     } else {
       return _buildPortraitLayout(context);
     }
   }

   Widget _buildPortraitLayout(BuildContext context) {
     var image = new Flexible(child: _buildImage(context), flex: 5);
     var actions = new Flexible(child: _buildActions(context), flex: 0);
     var notes = new Flexible(child: _buildNotes(), flex: 3);
     var nav = new Flexible(child: new Row(_buildThumbnailNavs()), flex: 3);

     var items = [image, actions, notes, nav];

     var footer = _buildFooter();
     if (footer != null) {
       items.add(footer);
     }

     var layout = new Column(items, alignItems: FlexAlignItems.stretch);

     return layout;
   }

   Widget _buildLandscapeLayout(BuildContext context) {
     var notes = new Flexible(child: _buildNotes(), flex: 5);
     var nav = new Flexible(child: new Column(_buildThumbnailNavs()), flex: 8);

     var image = new Flexible(child: _buildImage(context), flex: 11);
     var actions = new Flexible(child: _buildActions(context), flex: 0);

     var notesAndNavColumn = new Flexible(
         child: new Column([notes, nav], alignItems: FlexAlignItems.stretch),
         flex: 4);
     var imageAndActionsColumn = new Flexible(
         child: new Column([image, actions], alignItems: FlexAlignItems.stretch),
         flex: 16);

     var layout = new Row([notesAndNavColumn, imageAndActionsColumn],
         alignItems: FlexAlignItems.stretch);

     var footer = _buildFooter();
     if (footer != null) {
       layout = new Column([new Flexible(child: layout, flex: 8), footer],
           alignItems: FlexAlignItems.stretch);
     }

     return layout;
   }

   List<Widget> _buildThumbnailNavs() {
     return <Widget>[
       _buildThumbnailNav(_currSlideNum - 1, 'Previous'),
       _buildThumbnailNav(_currSlideNum + 1, 'Next')
     ];
   }

   Widget _buildImage(BuildContext context) {
     var provider = imageProvider.getSlideImage(
         _deckState.deck.key, _deckState.slides[_currSlideNum]);

     var image = new AsyncImage(provider: provider, fit: ImageFit.scaleDown);

     // If not driving the presentation, tapping the image navigates to fullscreen mode.
     if (_deckState.presentation == null ||
         !_deckState.presentation.isDriving(_appState.user)) {
       image = new InkWell(child: image, onTap: () {
         Navigator.push(
             context,
             new MaterialPageRoute(
                 builder: (context) =>
                     new SlideshowFullscreenPage(_deckState.deck.key)));
       });
     }

     var counter = _buildBubbleOverlay(
         '${_currSlideNum + 1} of ${_deckState.slides.length}', 0.5, 0.98);
     image = new Stack([image, counter]);

     return new ClipRect(child: image);
   }

   Widget _buildNotes() {
     var notes =
         new Text('Notes (only you see these)', style: style.Text.subtitleStyle);
     var container = new Container(
         child: notes,
         padding: style.Spacing.normalPadding,
         decoration: new BoxDecoration(
             border: new Border(
                 bottom: new BorderSide(color: style.theme.dividerColor))));
     return container;
   }

   Widget _buildThumbnailNav(int slideNum, String label) {
     var container;

     if (slideNum >= 0 && slideNum < _deckState.slides.length) {
       var thumbnail = new AsyncImage(
           provider: imageProvider.getSlideImage(
               _deckState.deck.key, _deckState.slides[slideNum]),
           height: style.Size.thumbnailNavHeight,
           fit: ImageFit.scaleDown);

       container = new InkWell(child: thumbnail, onTap: () {
         _appActions.setCurrSlideNum(_deckState.deck.key, slideNum);
       });
     } else {
       // Empty grey placeholder.
       container = new Container(
           decoration: new BoxDecoration(
               backgroundColor: style.theme.primarySwatch[100]));
     }

     var nextPreviousBubble = _buildBubbleOverlay(label, 0.5, 0.05);
     container = new Stack([container, nextPreviousBubble]);
     container = new ClipRect(child: container);

     return new Flexible(child: container, flex: 1);
   }

   Widget _buildActions(BuildContext context) {
     // It collects a list of action widgets for the action bar and fabs.
     // Left contains items that are in-line on the left side of the UI.
     // Right contains the FABs that hover over the right side of the UI.
     List<Widget> left = [];
     List<Widget> right = [];

     _buildActions_prev(left, right);
     _buildActions_slidelist(left, right, context);
     _buildActions_question(left, right, context);
     _buildActions_next(left, right);
     _buildActions_followPresentation(left, right);

     return new ToolBar(
         left: new Row(_buildActions_addMargin(left)), right: right);
   }

   void _buildActions_prev(List<Widget> left, List<Widget> right) {
     if (_currSlideNum == 0) {
       return;
     }
     var prev =
         new InkWell(child: new Icon(icon: 'navigation/arrow_back'), onTap: () {
       _appActions.setCurrSlideNum(_deckState.deck.key, _currSlideNum - 1);
     });
     left.add(prev);
   }

   void _buildActions_slidelist(
       List<Widget> left, List<Widget> right, BuildContext context) {
     var slideList =
         new InkWell(child: new Icon(icon: 'maps/layers'), onTap: () {
       Navigator.pop(context);
     });
     left.add(slideList);
   }

   void _buildActions_question(
       List<Widget> left, List<Widget> right, BuildContext context) {
     if (_deckState.presentation == null) {
       return;
     }

     // Presentation over is taken to a list of questions view.
     if (_deckState.presentation.isOwner) {
       var numQuestions = new FloatingActionButton(
           child: new Text(_deckState.presentation.questions.length.toString(),
               style: style.theme.primaryTextTheme.title));
       // TODO(aghassemi): Find a better way. Scaling down a FAB and
       // using transform to position it does not seem to be the best approach.
       final Matrix4 moveUp = new Matrix4.identity().translate(-95.0, 25.0);
       final Matrix4 scaleDown = new Matrix4.identity().scale(0.3);
       numQuestions = new Transform(child: numQuestions, transform: moveUp);
       numQuestions = new Transform(child: numQuestions, transform: scaleDown);

       var questions = new InkWell(
           child: new Icon(icon: 'communication/live_help'), onTap: () {
         Navigator.push(
             context,
             new MaterialPageRoute(
                 builder: (context) =>
                     new QuestionListPage(_deckState.deck.key)));
       });

       left.add(questions);
       left.add(numQuestions);
     } else {
       // Audience is taken to ask a question view.
       var route = new MaterialPageRoute(
           builder: (context) =>
               new AskQuestionPage(_deckState.deck.key, _currSlideNum));

       var askQuestion = new InkWell(
           child: new Icon(icon: 'communication/live_help'), onTap: () {
         Navigator.push(context, route);
       });
       left.add(askQuestion);
     }
   }

   final Matrix4 moveUpFabTransform =
       new Matrix4.identity().translate(0.0, -27.5);

   void _buildActions_next(List<Widget> left, List<Widget> right) {
     if (_currSlideNum >= (_deckState.slides.length - 1)) {
       return;
     }

     var nextOnTap = () {
       _appActions.setCurrSlideNum(_deckState.deck.key, _currSlideNum + 1);
     };

     // If driving the presentation, show a bigger FAB next button on the right side,
     // otherwise a regular next button on the left side.
     if (_deckState.presentation != null &&
         _deckState.presentation.isDriving(_appState.user)) {
       var next = new FloatingActionButton(
           child: new Icon(icon: 'navigation/arrow_forward'),
           onPressed: nextOnTap);

       var container =
           new Container(child: next, margin: style.Spacing.fabMargin);
       next = new Transform(transform: moveUpFabTransform, child: container);

       right.add(next);
     } else {
       var next = new InkWell(
           child: new Icon(icon: 'navigation/arrow_forward'), onTap: nextOnTap);
       left.add(next);
     }
   }

   void _buildActions_followPresentation(List<Widget> left, List<Widget> right) {
     if (_deckState.presentation == null ||
         _deckState.presentation.isFollowingPresentation) {
       return;
     }

     var syncNav = new FloatingActionButton(
         child: new Icon(icon: 'notification/sync'), onPressed: () async {
       _appActions.followPresentation(_deckState.deck.key);
     });

     syncNav =
         new Container(child: syncNav, margin: style.Spacing.actionsMargin);
     syncNav = new Transform(transform: moveUpFabTransform, child: syncNav);

     right.add(syncNav);
   }

   Widget _buildFooter() {
     if (_deckState.presentation == null) {
       return null;
     }

     // Owner and not driving?
     if (_deckState.presentation.isOwner &&
         !_deckState.presentation.isDriving(_appState.user)) {
       SnackBarAction resume =
           new SnackBarAction(label: 'RESUME', onPressed: () {
         _appActions.setDriver(_deckState.deck.key, _appState.user);
       });

       return _buildSnackbarFooter('You have handed off control.',
           action: resume);
     }

     // Driving but not the owner?
     if (!_deckState.presentation.isOwner &&
         _deckState.presentation.isDriving(_appState.user)) {
       return _buildSnackbarFooter('You are now driving the presentation.');
     }

     return null;
   }

   _buildActions_addMargin(List<Widget> actions) {
     return actions
         .map(
             (w) => new Container(child: w, margin: style.Spacing.actionsMargin))
         .toList();
   }

   Widget _buildBubbleOverlay(String text, double xOffset, double yOffset) {
     return new Align(
         child: new Container(
             child: new DefaultTextStyle(
                 child: new Text(text), style: Typography.white.body1),
             decoration: new BoxDecoration(
                 borderRadius: 50.0, // Make the bubble round.
                 backgroundColor:
                     style.Box.bubbleOverlayBackground), // Transparent gray.
             padding: new EdgeDims.symmetric(horizontal: 5.0, vertical: 2.0)),
         alignment: new FractionalOffset(xOffset, yOffset));
   }

   _buildSnackbarFooter(String lable, {SnackBarAction action}) {
     var text = new Text(lable);
     text = new DefaultTextStyle(style: Typography.white.subhead, child: text);
     List<Widget> children = <Widget>[
       new Flexible(
           child: new Container(
               margin: style.Spacing.footerVerticalMargin,
               child: new DefaultTextStyle(
                   style: Typography.white.subhead, child: text)))
     ];

     if (action != null) {
       children.add(action);
     }

     var clipper = new ClipRect(
         child: new Material(
             elevation: 6,
             color: style.Box.footerBackground,
             child: new Container(
                 margin: style.Spacing.footerHorizontalMargin,
                 child: new DefaultTextStyle(
                     style: new TextStyle(color: style.theme.accentColor),
                     child: new Row(children)))));

     return new Flexible(child: clipper, flex: 1);
   }
 }
	// Copyright 2015 The Vanadium 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/material.dart';
	import 'package:logging/logging.dart';

	import '../stores/store.dart';
	import '../styles/common.dart' as style;
	import '../utils/image_provider.dart' as imageProvider;
	import 'askquestion.dart';
	import 'questionlist.dart';
	import 'slideshow_fullscreen.dart';
	import 'syncslides_page.dart';

	final GlobalKey _scaffoldKey = new GlobalKey();

	final Logger log = new Logger('components/slideshow');

	class SlideshowPage extends SyncSlidesPage {
	final String _deckId;

	SlideshowPage(this._deckId);

	Widget build(BuildContext context, AppState appState, AppActions appActions) {
	if (!appState.decks.containsKey(_deckId)) {
	// TODO(aghassemi): Proper error page with navigation back to main view.
	return new Text('Deck no longer exists.');
	}

	return new Scaffold(
	key: _scaffoldKey,
	body: new Material(
	child:
	new SlideShow(appActions, appState, appState.decks[_deckId])));
	}
	}

	class SlideShow extends StatelessComponent {
	AppActions _appActions;
	AppState _appState;
	DeckState _deckState;
	int _currSlideNum;

	SlideShow(this._appActions, this._appState, this._deckState);

	Widget build(BuildContext context) {
	if (_deckState.slides.length == 0) {
	// TODO(aghassemi): Proper error page with navigation back to main view.
	return new Text('No slide to show.');
	}

	if (_deckState.presentation != null &&
	_deckState.presentation.isFollowingPresentation) {
	_currSlideNum = _deckState.presentation.currSlideNum;
	} else {
	_currSlideNum = _deckState.currSlideNum;
	}

	if (_currSlideNum >= _deckState.slides.length) {
	// TODO(aghassemi): Can this ever happen?
	// -What if slide number set by another peer is synced before the actual slides?
	// -What if we have navigated to a particular slide on our own and peer deletes that slide?
	// I think without careful batching and consuming watch events as batches, this could happen
	// maybe for a split second until rest of data syncs up.
	// UI needs to be bullet-roof, a flicker in the UI is better than an exception and crash.
	log.shout(
	'Current slide number $_currSlideNum is greater than the number of slides ${_deckState.slides.length}.');

	// TODO(aghassemi): Proper error page with navigation back to main view.
	return new Text('Slide does not exist.');
	}

	if (MediaQuery.of(context).orientation == Orientation.landscape) {
	return _buildLandscapeLayout(context);
	} else {
	return _buildPortraitLayout(context);
	}
	}

	Widget _buildPortraitLayout(BuildContext context) {
	var image = new Flexible(child: _buildImage(context), flex: 5);
	var actions = new Flexible(child: _buildActions(context), flex: 0);
	var notes = new Flexible(child: _buildNotes(), flex: 3);
	var nav = new Flexible(child: new Row(_buildThumbnailNavs()), flex: 3);

	var items = [image, actions, notes, nav];

	var footer = _buildFooter();
	if (footer != null) {
	items.add(footer);
	}

	var layout = new Column(items, alignItems: FlexAlignItems.stretch);

	return layout;
	}

	Widget _buildLandscapeLayout(BuildContext context) {
	var notes = new Flexible(child: _buildNotes(), flex: 5);
	var nav = new Flexible(child: new Column(_buildThumbnailNavs()), flex: 8);

	var image = new Flexible(child: _buildImage(context), flex: 11);
	var actions = new Flexible(child: _buildActions(context), flex: 0);

	var notesAndNavColumn = new Flexible(
	child: new Column([notes, nav], alignItems: FlexAlignItems.stretch),
	flex: 4);
	var imageAndActionsColumn = new Flexible(
	child: new Column([image, actions], alignItems: FlexAlignItems.stretch),
	flex: 16);

	var layout = new Row([notesAndNavColumn, imageAndActionsColumn],
	alignItems: FlexAlignItems.stretch);

	var footer = _buildFooter();
	if (footer != null) {
	layout = new Column([new Flexible(child: layout, flex: 8), footer],
	alignItems: FlexAlignItems.stretch);
	}

	return layout;
	}

	List<Widget> _buildThumbnailNavs() {
	return <Widget>[
	_buildThumbnailNav(_currSlideNum - 1, 'Previous'),
	_buildThumbnailNav(_currSlideNum + 1, 'Next')
	];
	}

	Widget _buildImage(BuildContext context) {
	var provider = imageProvider.getSlideImage(
	_deckState.deck.key, _deckState.slides[_currSlideNum]);

	var image = new AsyncImage(provider: provider, fit: ImageFit.scaleDown);

	// If not driving the presentation, tapping the image navigates to fullscreen mode.
	if (_deckState.presentation == null \|\|
	!_deckState.presentation.isDriving(_appState.user)) {
	image = new InkWell(child: image, onTap: () {
	Navigator.push(
	context,
	new MaterialPageRoute(
	builder: (context) =>
	new SlideshowFullscreenPage(_deckState.deck.key)));
	});
	}

	var counter = _buildBubbleOverlay(
	'${_currSlideNum + 1} of ${_deckState.slides.length}', 0.5, 0.98);
	image = new Stack([image, counter]);

	return new ClipRect(child: image);
	}

	Widget _buildNotes() {
	var notes =
	new Text('Notes (only you see these)', style: style.Text.subtitleStyle);
	var container = new Container(
	child: notes,
	padding: style.Spacing.normalPadding,
	decoration: new BoxDecoration(
	border: new Border(
	bottom: new BorderSide(color: style.theme.dividerColor))));
	return container;
	}

	Widget _buildThumbnailNav(int slideNum, String label) {
	var container;

	if (slideNum >= 0 && slideNum < _deckState.slides.length) {
	var thumbnail = new AsyncImage(
	provider: imageProvider.getSlideImage(
	_deckState.deck.key, _deckState.slides[slideNum]),
	height: style.Size.thumbnailNavHeight,
	fit: ImageFit.scaleDown);

	container = new InkWell(child: thumbnail, onTap: () {
	_appActions.setCurrSlideNum(_deckState.deck.key, slideNum);
	});
	} else {
	// Empty grey placeholder.
	container = new Container(
	decoration: new BoxDecoration(
	backgroundColor: style.theme.primarySwatch[100]));
	}

	var nextPreviousBubble = _buildBubbleOverlay(label, 0.5, 0.05);
	container = new Stack([container, nextPreviousBubble]);
	container = new ClipRect(child: container);

	return new Flexible(child: container, flex: 1);
	}

	Widget _buildActions(BuildContext context) {
	// It collects a list of action widgets for the action bar and fabs.
	// Left contains items that are in-line on the left side of the UI.
	// Right contains the FABs that hover over the right side of the UI.
	List<Widget> left = [];
	List<Widget> right = [];

	_buildActions_prev(left, right);
	_buildActions_slidelist(left, right, context);
	_buildActions_question(left, right, context);
	_buildActions_next(left, right);
	_buildActions_followPresentation(left, right);

	return new ToolBar(
	left: new Row(_buildActions_addMargin(left)), right: right);
	}

	void _buildActions_prev(List<Widget> left, List<Widget> right) {
	if (_currSlideNum == 0) {
	return;
	}
	var prev =
	new InkWell(child: new Icon(icon: 'navigation/arrow_back'), onTap: () {
	_appActions.setCurrSlideNum(_deckState.deck.key, _currSlideNum - 1);
	});
	left.add(prev);
	}

	void _buildActions_slidelist(
	List<Widget> left, List<Widget> right, BuildContext context) {
	var slideList =
	new InkWell(child: new Icon(icon: 'maps/layers'), onTap: () {
	Navigator.pop(context);
	});
	left.add(slideList);
	}

	void _buildActions_question(
	List<Widget> left, List<Widget> right, BuildContext context) {
	if (_deckState.presentation == null) {
	return;
	}

	// Presentation over is taken to a list of questions view.
	if (_deckState.presentation.isOwner) {
	var numQuestions = new FloatingActionButton(
	child: new Text(_deckState.presentation.questions.length.toString(),
	style: style.theme.primaryTextTheme.title));
	// TODO(aghassemi): Find a better way. Scaling down a FAB and
	// using transform to position it does not seem to be the best approach.
	final Matrix4 moveUp = new Matrix4.identity().translate(-95.0, 25.0);
	final Matrix4 scaleDown = new Matrix4.identity().scale(0.3);
	numQuestions = new Transform(child: numQuestions, transform: moveUp);
	numQuestions = new Transform(child: numQuestions, transform: scaleDown);

	var questions = new InkWell(
	child: new Icon(icon: 'communication/live_help'), onTap: () {
	Navigator.push(
	context,
	new MaterialPageRoute(
	builder: (context) =>
	new QuestionListPage(_deckState.deck.key)));
	});

	left.add(questions);
	left.add(numQuestions);
	} else {
	// Audience is taken to ask a question view.
	var route = new MaterialPageRoute(
	builder: (context) =>
	new AskQuestionPage(_deckState.deck.key, _currSlideNum));

	var askQuestion = new InkWell(
	child: new Icon(icon: 'communication/live_help'), onTap: () {
	Navigator.push(context, route);
	});
	left.add(askQuestion);
	}
	}

	final Matrix4 moveUpFabTransform =
	new Matrix4.identity().translate(0.0, -27.5);

	void _buildActions_next(List<Widget> left, List<Widget> right) {
	if (_currSlideNum >= (_deckState.slides.length - 1)) {
	return;
	}

	var nextOnTap = () {
	_appActions.setCurrSlideNum(_deckState.deck.key, _currSlideNum + 1);
	};

	// If driving the presentation, show a bigger FAB next button on the right side,
	// otherwise a regular next button on the left side.
	if (_deckState.presentation != null &&
	_deckState.presentation.isDriving(_appState.user)) {
	var next = new FloatingActionButton(
	child: new Icon(icon: 'navigation/arrow_forward'),
	onPressed: nextOnTap);

	var container =
	new Container(child: next, margin: style.Spacing.fabMargin);
	next = new Transform(transform: moveUpFabTransform, child: container);

	right.add(next);
	} else {
	var next = new InkWell(
	child: new Icon(icon: 'navigation/arrow_forward'), onTap: nextOnTap);
	left.add(next);
	}
	}

	void _buildActions_followPresentation(List<Widget> left, List<Widget> right) {
	if (_deckState.presentation == null \|\|
	_deckState.presentation.isFollowingPresentation) {
	return;
	}

	var syncNav = new FloatingActionButton(
	child: new Icon(icon: 'notification/sync'), onPressed: () async {
	_appActions.followPresentation(_deckState.deck.key);
	});

	syncNav =
	new Container(child: syncNav, margin: style.Spacing.actionsMargin);
	syncNav = new Transform(transform: moveUpFabTransform, child: syncNav);

	right.add(syncNav);
	}

	Widget _buildFooter() {
	if (_deckState.presentation == null) {
	return null;
	}

	// Owner and not driving?
	if (_deckState.presentation.isOwner &&
	!_deckState.presentation.isDriving(_appState.user)) {
	SnackBarAction resume =
	new SnackBarAction(label: 'RESUME', onPressed: () {
	_appActions.setDriver(_deckState.deck.key, _appState.user);
	});

	return _buildSnackbarFooter('You have handed off control.',
	action: resume);
	}

	// Driving but not the owner?
	if (!_deckState.presentation.isOwner &&
	_deckState.presentation.isDriving(_appState.user)) {
	return _buildSnackbarFooter('You are now driving the presentation.');
	}

	return null;
	}

	_buildActions_addMargin(List<Widget> actions) {
	return actions
	.map(
	(w) => new Container(child: w, margin: style.Spacing.actionsMargin))
	.toList();
	}

	Widget _buildBubbleOverlay(String text, double xOffset, double yOffset) {
	return new Align(
	child: new Container(
	child: new DefaultTextStyle(
	child: new Text(text), style: Typography.white.body1),
	decoration: new BoxDecoration(
	borderRadius: 50.0, // Make the bubble round.
	backgroundColor:
	style.Box.bubbleOverlayBackground), // Transparent gray.
	padding: new EdgeDims.symmetric(horizontal: 5.0, vertical: 2.0)),
	alignment: new FractionalOffset(xOffset, yOffset));
	}

	_buildSnackbarFooter(String lable, {SnackBarAction action}) {
	var text = new Text(lable);
	text = new DefaultTextStyle(style: Typography.white.subhead, child: text);
	List<Widget> children = <Widget>[
	new Flexible(
	child: new Container(
	margin: style.Spacing.footerVerticalMargin,
	child: new DefaultTextStyle(
	style: Typography.white.subhead, child: text)))
	];

	if (action != null) {
	children.add(action);
	}

	var clipper = new ClipRect(
	child: new Material(
	elevation: 6,
	color: style.Box.footerBackground,
	child: new Container(
	margin: style.Spacing.footerHorizontalMargin,
	child: new DefaultTextStyle(
	style: new TextStyle(color: style.theme.accentColor),
	child: new Row(children)))));

	return new Flexible(child: clipper, flex: 1);
	}
	}