mirror of
https://github.com/flutter/flutter.git
synced 2025-06-03 00:51:18 +00:00
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/face
|
||||
- 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';
|
||||
|
||||
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;
|
||||
}
|
||||
|
@ -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()
|
||||
);
|
||||
}
|
||||
|
@ -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 {
|
||||
|
Loading…
Reference in New Issue
Block a user