Added bottom sheet demos to the Material gallery
This commit is contained in:
parent
fce3a244d3
commit
04162cffee
@ -9,3 +9,4 @@ material-design-icons:
|
|||||||
- name: action/alarm
|
- name: action/alarm
|
||||||
- name: action/face
|
- name: action/face
|
||||||
- name: action/language
|
- name: action/language
|
||||||
|
- name: content/add
|
||||||
|
@ -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()
|
||||||
|
);
|
@ -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]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
@ -5,10 +5,11 @@
|
|||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
class WidgetDemo {
|
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 title;
|
||||||
final String routeName;
|
final String routeName;
|
||||||
final WidgetBuilder tabBarBuilder;
|
final WidgetBuilder tabBarBuilder;
|
||||||
|
final WidgetBuilder floatingActionButtonBuilder;
|
||||||
final WidgetBuilder builder;
|
final WidgetBuilder builder;
|
||||||
}
|
}
|
||||||
|
@ -49,6 +49,11 @@ class _GalleryPageState extends State<GalleryPage> {
|
|||||||
return builder != null ? builder(context) : null;
|
return builder != null ? builder(context) : null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Widget _buildFloatingActionButton() {
|
||||||
|
final WidgetBuilder builder = config.active?.floatingActionButtonBuilder;
|
||||||
|
return builder != null ? builder(context) : null;
|
||||||
|
}
|
||||||
|
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
return new Scaffold(
|
return new Scaffold(
|
||||||
toolBar: new ToolBar(
|
toolBar: new ToolBar(
|
||||||
@ -56,6 +61,7 @@ class _GalleryPageState extends State<GalleryPage> {
|
|||||||
tabBar: _buildTabBar()
|
tabBar: _buildTabBar()
|
||||||
),
|
),
|
||||||
drawer: _buildDrawer(),
|
drawer: _buildDrawer(),
|
||||||
|
floatingActionButton: _buildFloatingActionButton(),
|
||||||
body: _buildBody()
|
body: _buildBody()
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -7,6 +7,8 @@ import 'package:flutter/material.dart';
|
|||||||
import 'demo/chip_demo.dart';
|
import 'demo/chip_demo.dart';
|
||||||
import 'demo/date_picker_demo.dart';
|
import 'demo/date_picker_demo.dart';
|
||||||
import 'demo/drop_down_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/selection_controls_demo.dart';
|
||||||
import 'demo/slider_demo.dart';
|
import 'demo/slider_demo.dart';
|
||||||
import 'demo/tabs_demo.dart';
|
import 'demo/tabs_demo.dart';
|
||||||
@ -22,6 +24,8 @@ final List<WidgetDemo> _kDemos = <WidgetDemo>[
|
|||||||
kTabsDemo,
|
kTabsDemo,
|
||||||
kTimePickerDemo,
|
kTimePickerDemo,
|
||||||
kDropDownDemo,
|
kDropDownDemo,
|
||||||
|
kModalBottomSheetDemo,
|
||||||
|
kPersistentBottomSheetDemo,
|
||||||
];
|
];
|
||||||
|
|
||||||
class _MaterialGallery extends StatefulComponent {
|
class _MaterialGallery extends StatefulComponent {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user