From 04162cffeeabb60b3442b41f6dbdc92fabe3a2dd Mon Sep 17 00:00:00 2001 From: Hans Muller Date: Tue, 15 Dec 2015 15:47:04 -0800 Subject: [PATCH] Added bottom sheet demos to the Material gallery --- examples/material_gallery/flutter.yaml | 1 + .../lib/demo/modal_bottom_sheet_demo.dart | 45 +++++++++++++++ .../demo/persistent_bottom_sheet_demo.dart | 55 +++++++++++++++++++ .../lib/demo/widget_demo.dart | 3 +- .../material_gallery/lib/gallery_page.dart | 6 ++ examples/material_gallery/lib/main.dart | 4 ++ 6 files changed, 113 insertions(+), 1 deletion(-) create mode 100644 examples/material_gallery/lib/demo/modal_bottom_sheet_demo.dart create mode 100644 examples/material_gallery/lib/demo/persistent_bottom_sheet_demo.dart diff --git a/examples/material_gallery/flutter.yaml b/examples/material_gallery/flutter.yaml index bfe9151df78..c4fb1dc140a 100644 --- a/examples/material_gallery/flutter.yaml +++ b/examples/material_gallery/flutter.yaml @@ -9,3 +9,4 @@ material-design-icons: - name: action/alarm - name: action/face - name: action/language + - name: content/add diff --git a/examples/material_gallery/lib/demo/modal_bottom_sheet_demo.dart b/examples/material_gallery/lib/demo/modal_bottom_sheet_demo.dart new file mode 100644 index 00000000000..11a43d2829d --- /dev/null +++ b/examples/material_gallery/lib/demo/modal_bottom_sheet_demo.dart @@ -0,0 +1,45 @@ +// Copyright 2015 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/material.dart'; + +import 'widget_demo.dart'; + +class ModalBottomSheetDemo extends StatelessComponent { + final TextStyle textStyle = new TextStyle( + color: Colors.indigo[400], + fontSize: 24.0, + textAlign: TextAlign.center + ); + + void _showModalBottomSheet(BuildContext context) { + showModalBottomSheet(context: context, builder: (_) { + return new Container( + child: new Padding( + padding: const EdgeDims.all(32.0), + child: new Text("This is the modal bottom sheet. Click anywhere to dismiss.", style: textStyle) + ) + ); + }); + } + + Widget build(BuildContext context) { + return new Center( + child: new Container( + width: 200.0, + height: 200.0, + child: new RaisedButton( + onPressed: () { _showModalBottomSheet(context); }, + child: new Text('Show the modal bottom sheet', style: textStyle) + ) + ) + ); + } +} + +final WidgetDemo kModalBottomSheetDemo = new WidgetDemo( + title: 'Modal Bottom Sheet', + routeName: '/modalBottomSheet', + builder: (_) => new ModalBottomSheetDemo() +); diff --git a/examples/material_gallery/lib/demo/persistent_bottom_sheet_demo.dart b/examples/material_gallery/lib/demo/persistent_bottom_sheet_demo.dart new file mode 100644 index 00000000000..bc023fed902 --- /dev/null +++ b/examples/material_gallery/lib/demo/persistent_bottom_sheet_demo.dart @@ -0,0 +1,55 @@ +// Copyright 2015 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/material.dart'; + +import 'widget_demo.dart'; + +class PersistentBottomSheetDemo extends StatelessComponent { + + final TextStyle textStyle = new TextStyle( + color: Colors.indigo[400], + fontSize: 24.0, + textAlign: TextAlign.center + ); + + void _showBottomSheet(BuildContext context) { + Scaffold.of(context).showBottomSheet((_) { + return new Container( + decoration: new BoxDecoration( + border: new Border(top: new BorderSide(color: Colors.black26, width: 1.0)) + ), + child: new Padding( + padding: const EdgeDims.all(32.0), + child: new Text("This is a Material persistent bottom sheet. Drag downwards to dismiss it.", style: textStyle) + ) + ); + }); + } + + Widget build(BuildContext context) { + return new Center( + child: new Container( + width: 200.0, + height: 200.0, + child: new RaisedButton( + onPressed: () { _showBottomSheet(context); }, + child: new Text('Show the persistent bottom sheet', style: textStyle) + ) + ) + ); + } +} + +final WidgetDemo kPersistentBottomSheetDemo = new WidgetDemo( + title: 'Persistent Bottom Sheet', + routeName: '/persistentBottomSheet', + builder: (_) => new PersistentBottomSheetDemo(), + floatingActionButtonBuilder: (_) { + return new FloatingActionButton( + child: new Icon(icon: 'content/add'), + backgroundColor: Colors.redAccent[200] + ); + } +); diff --git a/examples/material_gallery/lib/demo/widget_demo.dart b/examples/material_gallery/lib/demo/widget_demo.dart index 7d4daf44a35..d22c6775bbe 100644 --- a/examples/material_gallery/lib/demo/widget_demo.dart +++ b/examples/material_gallery/lib/demo/widget_demo.dart @@ -5,10 +5,11 @@ import 'package:flutter/material.dart'; class WidgetDemo { - WidgetDemo({ this.title, this.routeName, this.tabBarBuilder, this.builder }); + WidgetDemo({ this.title, this.routeName, this.tabBarBuilder, this.floatingActionButtonBuilder, this.builder }); final String title; final String routeName; final WidgetBuilder tabBarBuilder; + final WidgetBuilder floatingActionButtonBuilder; final WidgetBuilder builder; } diff --git a/examples/material_gallery/lib/gallery_page.dart b/examples/material_gallery/lib/gallery_page.dart index 0d56461b01a..6c4a6116b8d 100644 --- a/examples/material_gallery/lib/gallery_page.dart +++ b/examples/material_gallery/lib/gallery_page.dart @@ -49,6 +49,11 @@ class _GalleryPageState extends State { return builder != null ? builder(context) : null; } + Widget _buildFloatingActionButton() { + final WidgetBuilder builder = config.active?.floatingActionButtonBuilder; + return builder != null ? builder(context) : null; + } + Widget build(BuildContext context) { return new Scaffold( toolBar: new ToolBar( @@ -56,6 +61,7 @@ class _GalleryPageState extends State { tabBar: _buildTabBar() ), drawer: _buildDrawer(), + floatingActionButton: _buildFloatingActionButton(), body: _buildBody() ); } diff --git a/examples/material_gallery/lib/main.dart b/examples/material_gallery/lib/main.dart index e80c5ce7279..8abd80274ec 100644 --- a/examples/material_gallery/lib/main.dart +++ b/examples/material_gallery/lib/main.dart @@ -7,6 +7,8 @@ import 'package:flutter/material.dart'; import 'demo/chip_demo.dart'; import 'demo/date_picker_demo.dart'; import 'demo/drop_down_demo.dart'; +import 'demo/modal_bottom_sheet_demo.dart'; +import 'demo/persistent_bottom_sheet_demo.dart'; import 'demo/selection_controls_demo.dart'; import 'demo/slider_demo.dart'; import 'demo/tabs_demo.dart'; @@ -22,6 +24,8 @@ final List _kDemos = [ kTabsDemo, kTimePickerDemo, kDropDownDemo, + kModalBottomSheetDemo, + kPersistentBottomSheetDemo, ]; class _MaterialGallery extends StatefulComponent {