Merge pull request #947 from HansMuller/bottom_sheet_demo

Added BottomSheet demos to the Material Gallery

examples/material_gallery/flutter.yaml

@@ -9,3 +9,4 @@ material-design-icons:
   - name: action/alarm
   - name: action/face
   - name: action/language
+  - name: content/add

examples/material_gallery/lib/demo/modal_bottom_sheet_demo.dart

+// 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()
+);

examples/material_gallery/lib/demo/persistent_bottom_sheet_demo.dart

+// 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]
+    );
+  }
+);

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;
 }

examples/material_gallery/lib/gallery_page.dart

@@ -49,6 +49,11 @@ class _GalleryPageState extends State<GalleryPage> {
     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<GalleryPage> {
         tabBar: _buildTabBar()
       ),
       drawer: _buildDrawer(),
+      floatingActionButton: _buildFloatingActionButton(),
       body: _buildBody()
     );
   }

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<WidgetDemo> _kDemos = <WidgetDemo>[
   kTabsDemo,
   kTimePickerDemo,
   kDropDownDemo,
+  kModalBottomSheetDemo,
+  kPersistentBottomSheetDemo,
 ];
 
 class _MaterialGallery extends StatefulComponent {