Skip to content

F
Front-End
Commit 3f0cca02 authored by Hans Muller's avatar Hans Muller
Browse files
Options

Revised Material Gallery demo

parent 50937d1f
Hide whitespace changes
Inline Side-by-side
Showing with 423 additions and 531 deletions
examples/material_gallery/lib/demo/chip_demo.dart
View file @ 3f0cca02
...@@ -4,8 +4,6 @@ ...@@ -4,8 +4,6 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'widget_demo.dart';
class ChipDemo extends StatefulComponent { class ChipDemo extends StatefulComponent {
_ChipDemoState createState() => new _ChipDemoState(); _ChipDemoState createState() => new _ChipDemoState();
} }
...@@ -37,19 +35,14 @@ class _ChipDemoState extends State<ChipDemo> { ...@@ -37,19 +35,14 @@ class _ChipDemoState extends State<ChipDemo> {
)); ));
} }
return new Block(chips.map((Widget widget) { return new Scaffold(
return new Container( toolBar: new ToolBar(center: new Text("Chips")),
height: 100.0, body: new Block(chips.map((Widget widget) {
child: new Center( return new Container(
child: widget height: 100.0,
) child: new Center(child: widget)
); );
}).toList()); }).toList())
);
} }
} }
final WidgetDemo kChipDemo = new WidgetDemo(
title: 'Chips',
routeName: '/chips',
builder: (_) => new ChipDemo()
);
examples/material_gallery/lib/demo/date_picker_demo.dart
View file @ 3f0cca02
...@@ -7,8 +7,6 @@ import 'dart:async'; ...@@ -7,8 +7,6 @@ import 'dart:async';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:intl/intl.dart'; import 'package:intl/intl.dart';
import 'widget_demo.dart';
class DatePickerDemo extends StatefulComponent { class DatePickerDemo extends StatefulComponent {
_DatePickerDemoState createState() => new _DatePickerDemoState(); _DatePickerDemoState createState() => new _DatePickerDemoState();
} }
...@@ -31,21 +29,19 @@ class _DatePickerDemoState extends State<DatePickerDemo> { ...@@ -31,21 +29,19 @@ class _DatePickerDemoState extends State<DatePickerDemo> {
} }
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new Column( return
children: <Widget>[ new Scaffold(
new Text(new DateFormat.yMMMd().format(_selectedDate)), toolBar: new ToolBar(center: new Text("Date Picker")),
new RaisedButton( body: new Column(
onPressed: _handleSelectDate, children: <Widget>[
child: new Text('SELECT DATE') new Text(new DateFormat.yMMMd().format(_selectedDate)),
), new RaisedButton(
], onPressed: _handleSelectDate,
justifyContent: FlexJustifyContent.center child: new Text('SELECT DATE')
),
],
justifyContent: FlexJustifyContent.center
)
); );
} }
} }
final WidgetDemo kDatePickerDemo = new WidgetDemo(
title: 'Date Picker',
routeName: '/date-picker',
builder: (_) => new DatePickerDemo()
);
examples/material_gallery/lib/demo/drop_down_demo.dart
View file @ 3f0cca02
...@@ -4,40 +4,35 @@ ...@@ -4,40 +4,35 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'widget_demo.dart';
class DropDownDemo extends StatefulComponent { class DropDownDemo extends StatefulComponent {
_DropDownDemoState createState() => new _DropDownDemoState(); _DropDownDemoState createState() => new _DropDownDemoState();
} }
class _DropDownDemoState extends State<DropDownDemo> { class _DropDownDemoState extends State<DropDownDemo> {
String _value = "Free"; String value = "Free";
List<DropDownMenuItem<String>> _buildItems() { List<DropDownMenuItem<String>> buildItems() {
return ["One", "Two", "Free", "Four"].map((String value) { return <String>["One", "Two", "Free", "Four"].map((String value) {
return new DropDownMenuItem<String>(value: value, child: new Text(value)); return new DropDownMenuItem<String>(value: value, child: new Text(value));
}) })
.toList(); .toList();
} }
Widget build(BuildContext context) { Widget build(BuildContext context) {
Widget dropdown = new DropDownButton<String>( return new Scaffold(
items: _buildItems(), toolBar: new ToolBar(center: new Text("Dropdown Button")),
value: _value, body: new Center(
onChanged: (String newValue) { child: new DropDownButton<String>(
setState(() { items: buildItems(),
if (newValue != null) value: value,
_value = newValue; onChanged: (String newValue) {
}); setState(() {
} if (newValue != null)
value = newValue;
});
}
)
)
); );
return new Center(child: dropdown);
} }
} }
final WidgetDemo kDropDownDemo = new WidgetDemo(
title: 'Drop Down Button',
routeName: '/dropdown',
builder: (_) => new DropDownDemo()
);
examples/material_gallery/lib/demo/modal_bottom_sheet_demo.dart
View file @ 3f0cca02
...@@ -4,8 +4,6 @@ ...@@ -4,8 +4,6 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'widget_demo.dart';
class ModalBottomSheetDemo extends StatelessComponent { class ModalBottomSheetDemo extends StatelessComponent {
final TextStyle textStyle = new TextStyle( final TextStyle textStyle = new TextStyle(
color: Colors.indigo[400], color: Colors.indigo[400],
...@@ -13,33 +11,28 @@ class ModalBottomSheetDemo extends StatelessComponent { ...@@ -13,33 +11,28 @@ class ModalBottomSheetDemo extends StatelessComponent {
textAlign: TextAlign.center 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) { Widget build(BuildContext context) {
return new Center( return new Scaffold(
child: new Container( toolBar: new ToolBar(center: new Text("Modal Bottom Sheet")),
width: 200.0, body: new Center(
height: 200.0, child: new Container(
child: new RaisedButton( width: 200.0,
onPressed: () { _showModalBottomSheet(context); }, height: 200.0,
child: new Text('Show the modal bottom sheet', style: textStyle) child: new RaisedButton(
child: new Text('Show the modal bottom sheet', style: textStyle),
onPressed: () {
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)
)
);
});
}
)
) )
) )
); );
} }
} }
final WidgetDemo kModalBottomSheetDemo = new WidgetDemo(
title: 'Modal Bottom Sheet',
routeName: '/modalBottomSheet',
builder: (_) => new ModalBottomSheetDemo()
);
examples/material_gallery/lib/demo/page_selector_demo.dart
View file @ 3f0cca02
...@@ -5,11 +5,7 @@ ...@@ -5,11 +5,7 @@
import 'package:flutter/animation.dart'; import 'package:flutter/animation.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'widget_demo.dart'; class PageSelectorDemo extends StatelessComponent {
final List<String> _iconNames = <String>["event", "home", "android", "alarm", "face", "language"];
class TabViewDemo extends StatelessComponent {
Widget _buildTabIndicator(BuildContext context, String iconName) { Widget _buildTabIndicator(BuildContext context, String iconName) {
final Color color = Theme.of(context).primaryColor; final Color color = Theme.of(context).primaryColor;
final ColorTween _selectedColor = new ColorTween(begin: Colors.transparent, end: color); final ColorTween _selectedColor = new ColorTween(begin: Colors.transparent, end: color);
...@@ -61,49 +57,48 @@ class TabViewDemo extends StatelessComponent { ...@@ -61,49 +57,48 @@ class TabViewDemo extends StatelessComponent {
} }
Widget build(BuildContext notUsed) { // Can't find the TabBarSelection from this context. Widget build(BuildContext notUsed) { // Can't find the TabBarSelection from this context.
return new TabBarSelection( final List<String> iconNames = <String>["event", "home", "android", "alarm", "face", "language"];
values: _iconNames,
child: new Builder( return new Scaffold(
builder: (BuildContext context) { toolBar: new ToolBar(center: new Text("Page Selector")),
return new Column( body: new TabBarSelection(
children: <Widget>[ values: iconNames,
new Container( child: new Builder(
margin: const EdgeDims.only(top: 16.0), builder: (BuildContext context) {
child: new Row( return new Column(
children: <Widget>[ children: <Widget>[
new IconButton( new Container(
icon: "navigation/arrow_back", margin: const EdgeDims.only(top: 16.0),
onPressed: () { _handleArrowButtonPress(context, -1); }, child: new Row(
tooltip: 'Back' children: <Widget>[
), new IconButton(
new Row( icon: "navigation/arrow_back",
children: _iconNames.map((String name) => _buildTabIndicator(context, name)).toList(), onPressed: () { _handleArrowButtonPress(context, -1); },
justifyContent: FlexJustifyContent.collapse tooltip: 'Back'
), ),
new IconButton( new Row(
icon: "navigation/arrow_forward", children: iconNames.map((String name) => _buildTabIndicator(context, name)).toList(),
onPressed: () { _handleArrowButtonPress(context, 1); }, justifyContent: FlexJustifyContent.collapse
tooltip: 'Forward' ),
) new IconButton(
], icon: "navigation/arrow_forward",
justifyContent: FlexJustifyContent.spaceBetween onPressed: () { _handleArrowButtonPress(context, 1); },
) tooltip: 'Forward'
), )
new Flexible( ],
child: new TabBarView( justifyContent: FlexJustifyContent.spaceBetween
children: _iconNames.map(_buildTabView).toList() )
),
new Flexible(
child: new TabBarView(
children: iconNames.map(_buildTabView).toList()
)
) )
) ]
] );
); }
} )
) )
); );
} }
} }
final WidgetDemo kPageSelectorDemo = new WidgetDemo(
title: 'Page Selector',
routeName: '/page-selector',
builder: (_) => new TabViewDemo()
);
examples/material_gallery/lib/demo/persistent_bottom_sheet_demo.dart
View file @ 3f0cca02
...@@ -4,8 +4,6 @@ ...@@ -4,8 +4,6 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'widget_demo.dart';
class PersistentBottomSheetDemo extends StatelessComponent { class PersistentBottomSheetDemo extends StatelessComponent {
final TextStyle textStyle = new TextStyle( final TextStyle textStyle = new TextStyle(
...@@ -14,7 +12,7 @@ class PersistentBottomSheetDemo extends StatelessComponent { ...@@ -14,7 +12,7 @@ class PersistentBottomSheetDemo extends StatelessComponent {
textAlign: TextAlign.center textAlign: TextAlign.center
); );
void _showBottomSheet(BuildContext context) { void showBottomSheet(BuildContext context) {
Scaffold.of(context).showBottomSheet((_) { Scaffold.of(context).showBottomSheet((_) {
return new Container( return new Container(
decoration: new BoxDecoration( decoration: new BoxDecoration(
...@@ -28,28 +26,27 @@ class PersistentBottomSheetDemo extends StatelessComponent { ...@@ -28,28 +26,27 @@ class PersistentBottomSheetDemo extends StatelessComponent {
}); });
} }
Widget build(BuildContext context) { Widget build(BuildContext notUsed) { // Can't find the Scaffold from this context.
return new Center( return new Scaffold(
child: new Container( toolBar: new ToolBar(center: new Text("Persistent Bottom Sheet")),
width: 200.0, floatingActionButton: new FloatingActionButton(
height: 200.0, child: new Icon(icon: 'content/add'),
child: new RaisedButton( backgroundColor: Colors.redAccent[200]
onPressed: () { _showBottomSheet(context); }, ),
child: new Text('Show the persistent bottom sheet', style: textStyle) body: new Builder(
) builder: (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/widgets/progress_indicator.dart → examples/material_gallery/lib/demo/progress_indicator_demo.dart
View file @ 3f0cca02
...@@ -5,11 +5,12 @@ ...@@ -5,11 +5,12 @@
import 'package:flutter/animation.dart'; import 'package:flutter/animation.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
class ProgressIndicatorApp extends StatefulComponent { class ProgressIndicatorDemo extends StatefulComponent {
_ProgressIndicatorAppState createState() => new _ProgressIndicatorAppState(); _ProgressIndicatorDemoState createState() => new _ProgressIndicatorDemoState();
} }
class _ProgressIndicatorAppState extends State<ProgressIndicatorApp> { class _ProgressIndicatorDemoState extends State<ProgressIndicatorDemo> {
void initState() { void initState() {
super.initState(); super.initState();
controller = new AnimationController( controller = new AnimationController(
...@@ -77,42 +78,22 @@ class _ProgressIndicatorAppState extends State<ProgressIndicatorApp> { ...@@ -77,42 +78,22 @@ class _ProgressIndicatorAppState extends State<ProgressIndicatorApp> {
} }
Widget build(BuildContext context) { Widget build(BuildContext context) {
Widget body = new GestureDetector( return new Scaffold(
onTap: handleTap, toolBar: new ToolBar(center: new Text('Progress Indicators')),
child: new Container( body: new DefaultTextStyle(
padding: const EdgeDims.symmetric(vertical: 12.0, horizontal: 8.0), style: Theme.of(context).text.title,
child: new AnimationWatchingBuilder( child: new GestureDetector(
watchable: animation, onTap: handleTap,
builder: buildIndicators behavior: HitTestBehavior.opaque,
) child: new Container(
) padding: const EdgeDims.symmetric(vertical: 12.0, horizontal: 8.0),
); child: new AnimationWatchingBuilder(
watchable: animation,
return new IconTheme( builder: buildIndicators
data: const IconThemeData(color: IconThemeColor.white), )
child: new Theme(
data: new ThemeData(
brightness: ThemeBrightness.light,
primarySwatch: Colors.blue,
accentColor: Colors.redAccent[200]
),
child: new Scaffold(
toolBar: new ToolBar(center: new Text('Progress Indicators')),
body: new DefaultTextStyle(
style: Theme.of(context).text.title,
child: body
) )
) )
) )
); );
} }
} }
void main() {
runApp(new MaterialApp(
title: 'Progress Indicators',
routes: {
'/': (RouteArguments args) => new ProgressIndicatorApp()
}
));
}
examples/material_gallery/lib/demo/selection_controls_demo.dart deleted 100644 → 0
View file @ 50937d1f
// 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 SelectionControlsDemo extends StatefulComponent {
_SelectionControlsDemoState createState() => new _SelectionControlsDemoState();
}
class _SelectionControlsDemoState extends State<SelectionControlsDemo> {
bool _checkboxValue = false;
int _radioValue = 0;
bool _switchValue = false;
void _setCheckboxValue(bool value) {
setState(() {
_checkboxValue = value;
});
}
void _setRadioValue(int value) {
setState(() {
_radioValue = value;
});
}
void _setSwitchValue(bool value) {
setState(() {
_switchValue = value;
});
}
Widget build(BuildContext context) {
return new Column(
children: <Widget>[
new Row(
children: <Widget>[
new Checkbox(value: _checkboxValue, onChanged: _setCheckboxValue),
new Checkbox(value: false), // Disabled
new Checkbox(value: true), // Disabled
],
justifyContent: FlexJustifyContent.spaceAround
),
new Row(
children: <int>[0, 1, 2].map((int i) {
return new Radio<int>(
value: i,
groupValue: _radioValue,
onChanged: _setRadioValue
);
}).toList(),
justifyContent: FlexJustifyContent.spaceAround
),
new Row(
children: <int>[0, 1].map((int i) {
return new Radio<int>(value: i, groupValue: 0); // Disabled
}).toList(),
justifyContent: FlexJustifyContent.spaceAround
),
new Row(
children: <Widget>[
new Switch(value: _switchValue, onChanged: _setSwitchValue),
new Switch(value: false), // Disabled
new Switch(value: true), // Disabled
],
justifyContent: FlexJustifyContent.spaceAround
),
],
justifyContent: FlexJustifyContent.spaceAround
);
}
}
final WidgetDemo kSelectionControlsDemo = new WidgetDemo(
title: 'Selection Controls',
routeName: '/selection-controls',
builder: (_) => new SelectionControlsDemo()
);
examples/material_gallery/lib/demo/slider_demo.dart
View file @ 3f0cca02
...@@ -4,8 +4,6 @@ ...@@ -4,8 +4,6 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'widget_demo.dart';
class SliderDemo extends StatefulComponent { class SliderDemo extends StatefulComponent {
_SliderDemoState createState() => new _SliderDemoState(); _SliderDemoState createState() => new _SliderDemoState();
} }
...@@ -14,54 +12,50 @@ class _SliderDemoState extends State<SliderDemo> { ...@@ -14,54 +12,50 @@ class _SliderDemoState extends State<SliderDemo> {
double _value = 25.0; double _value = 25.0;
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new Block([ return new Scaffold(
new Container( toolBar: new ToolBar(center: new Text("Sliders")),
height: 100.0, body: new Block(<Widget>[
child: new Center( new Container(
child: new Row( height: 100.0,
children: <Widget>[ child: new Center(
new Slider( child: new Row(
value: _value, children: <Widget>[
min: 0.0, new Slider(
max: 100.0, value: _value,
onChanged: (double value) { min: 0.0,
setState(() { max: 100.0,
_value = value; onChanged: (double value) {
}); setState(() {
} _value = value;
), });
new Container( }
padding: const EdgeDims.symmetric(horizontal: 16.0), ),
child: new Text(_value.round().toString().padLeft(3, '0')) new Container(
), padding: const EdgeDims.symmetric(horizontal: 16.0),
], child: new Text(_value.round().toString().padLeft(3, '0'))
justifyContent: FlexJustifyContent.collapse ),
],
justifyContent: FlexJustifyContent.collapse
)
) )
) ),
), new Container(
new Container( height: 100.0,
height: 100.0, child: new Center(
child: new Center( child: new Row(
child: new Row( children: <Widget>[
children: <Widget>[ // Disabled, but tracking the slider above.
// Disabled, but tracking the slider above. new Slider(value: _value / 100.0),
new Slider(value: _value / 100.0), new Container(
new Container( padding: const EdgeDims.symmetric(horizontal: 16.0),
padding: const EdgeDims.symmetric(horizontal: 16.0), child: new Text((_value / 100.0).toStringAsFixed(2))
child: new Text((_value / 100.0).toStringAsFixed(2)) ),
), ],
], justifyContent: FlexJustifyContent.collapse
justifyContent: FlexJustifyContent.collapse )
) )
) )
) ])
);
]);
} }
} }
final WidgetDemo kSliderDemo = new WidgetDemo(
title: 'Sliders',
routeName: '/sliders',
builder: (_) => new SliderDemo()
);
examples/material_gallery/lib/demo/tabs_demo.dart
View file @ 3f0cca02
...@@ -4,47 +4,35 @@ ...@@ -4,47 +4,35 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'widget_demo.dart'; class TabsDemo extends StatelessComponent {
final List<String> iconNames = <String>["event", "home", "android", "alarm", "face", "language"];
final List<String> _iconNames = <String>["event", "home", "android", "alarm", "face", "language"];
Widget _buildTabBarSelection(_, Widget child) {
return new TabBarSelection<String>(values: _iconNames, child: child);
}
Widget _buildTabBar(_) {
return new TabBar<String>(
isScrollable: true,
labels: new Map.fromIterable(
_iconNames,
value: (String iconName) => new TabLabel(text: iconName, icon: "action/$iconName"))
);
}
class TabsDemo extends StatefulComponent {
_TabsDemoState createState() => new _TabsDemoState();
}
class _TabsDemoState extends State<TabsDemo> {
Widget build(_) { Widget build(_) {
return new TabBarView( return new TabBarSelection(
children: _iconNames.map((String iconName) { values: iconNames,
return new Container( child: new Scaffold(
key: new ValueKey<String>(iconName), toolBar: new ToolBar(
padding: const EdgeDims.all(12.0), center: new Text("Scrollable Tabs"),
child: new Card( tabBar: new TabBar<String>(
child: new Center(child: new Icon(icon: "action/$iconName", size:IconSize.s48)) isScrollable: true,
labels: new Map.fromIterable(
iconNames,
value: (String iconName) => new TabLabel(text: iconName, icon: "action/$iconName")
)
) )
); ),
}).toList() body: new TabBarView(
children: iconNames.map((String iconName) {
return new Container(
key: new ValueKey<String>(iconName),
padding: const EdgeDims.all(12.0),
child: new Card(
child: new Center(child: new Icon(icon: "action/$iconName", size:IconSize.s48))
)
);
}).toList()
)
)
); );
} }
} }
final WidgetDemo kTabsDemo = new WidgetDemo(
title: 'Tabs',
routeName: '/tabs',
tabBarBuilder: _buildTabBar,
pageWrapperBuilder: _buildTabBarSelection,
builder: (_) => new TabsDemo()
);
examples/material_gallery/lib/demo/time_picker_demo.dart
View file @ 3f0cca02
...@@ -6,8 +6,6 @@ import 'dart:async'; ...@@ -6,8 +6,6 @@ import 'dart:async';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'widget_demo.dart';
class TimePickerDemo extends StatefulComponent { class TimePickerDemo extends StatefulComponent {
_TimePickerDemoState createState() => new _TimePickerDemoState(); _TimePickerDemoState createState() => new _TimePickerDemoState();
} }
...@@ -28,21 +26,18 @@ class _TimePickerDemoState extends State<TimePickerDemo> { ...@@ -28,21 +26,18 @@ class _TimePickerDemoState extends State<TimePickerDemo> {
} }
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new Column( return new Scaffold(
children: <Widget>[ toolBar: new ToolBar(center: new Text("Time Picker")),
new Text('$_selectedTime'), body: new Column(
new RaisedButton( children: <Widget>[
onPressed: _handleSelectTime, new Text('$_selectedTime'),
child: new Text('SELECT TIME') new RaisedButton(
), onPressed: _handleSelectTime,
], child: new Text('SELECT TIME')
justifyContent: FlexJustifyContent.center ),
],
justifyContent: FlexJustifyContent.center
)
); );
} }
} }
final WidgetDemo kTimePickerDemo = new WidgetDemo(
title: 'Time Picker',
routeName: '/time-picker',
builder: (_) => new TimePickerDemo()
);
examples/material_gallery/lib/demo/toggle_controls_demo.dart 0 → 100644
View file @ 3f0cca02
// 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';
class ToggleControlsDemo extends StatefulComponent {
_ToggleControlsDemoState createState() => new _ToggleControlsDemoState();
}
class _ToggleControlsDemoState extends State<ToggleControlsDemo> {
bool _checkboxValue = false;
int _radioValue = 0;
bool _switchValue = false;
void _setCheckboxValue(bool value) {
setState(() {
_checkboxValue = value;
});
}
void _setRadioValue(int value) {
setState(() {
_radioValue = value;
});
}
void _setSwitchValue(bool value) {
setState(() {
_switchValue = value;
});
}
Widget build(BuildContext context) {
return new Scaffold(
toolBar: new ToolBar(center: new Text("Selection Controls")),
body: new Column(
children: <Widget>[
new Row(
children: <Widget>[
new Checkbox(value: _checkboxValue, onChanged: _setCheckboxValue),
new Checkbox(value: false), // Disabled
new Checkbox(value: true), // Disabled
],
justifyContent: FlexJustifyContent.spaceAround
),
new Row(
children: <int>[0, 1, 2].map((int i) {
return new Radio<int>(
value: i,
groupValue: _radioValue,
onChanged: _setRadioValue
);
}).toList(),
justifyContent: FlexJustifyContent.spaceAround
),
new Row(
children: <int>[0, 1].map((int i) {
return new Radio<int>(value: i, groupValue: 0); // Disabled
}).toList(),
justifyContent: FlexJustifyContent.spaceAround
),
new Row(
children: <Widget>[
new Switch(value: _switchValue, onChanged: _setSwitchValue),
new Switch(value: false), // Disabled
new Switch(value: true), // Disabled
],
justifyContent: FlexJustifyContent.spaceAround
),
],
justifyContent: FlexJustifyContent.spaceAround
)
);
}
}
examples/material_gallery/lib/demo/widget_demo.dart deleted 100644 → 0
View file @ 50937d1f
// 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';
typedef Widget PageWrapperBuilder(BuildContext context, Widget child);
class WidgetDemo {
WidgetDemo({
this.title,
this.routeName,
this.tabBarBuilder,
this.pageWrapperBuilder,
this.floatingActionButtonBuilder,
this.builder
});
final String title;
final String routeName;
final WidgetBuilder tabBarBuilder;
final PageWrapperBuilder pageWrapperBuilder;
final WidgetBuilder floatingActionButtonBuilder;
final WidgetBuilder builder;
}
examples/material_gallery/lib/gallery_page.dart deleted 100644 → 0
View file @ 50937d1f
// 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 'demo/widget_demo.dart';
class GalleryPage extends StatefulComponent {
GalleryPage({ this.demos, this.active, this.onThemeChanged });
final List<WidgetDemo> demos;
final WidgetDemo active;
final ValueChanged<ThemeData> onThemeChanged;
_GalleryPageState createState() => new _GalleryPageState();
}
class _GalleryPageState extends State<GalleryPage> {
Widget _buildDrawer() {
List<Widget> items = <Widget>[
new DrawerHeader(child: new Text('Flutter Material demos')),
];
for (WidgetDemo demo in config.demos) {
items.add(new DrawerItem(
onPressed: () {
Navigator.pushNamed(context, demo.routeName);
},
child: new Text(demo.title)
));
}
// TODO(eseidel): We should make this into a shared DrawerFooter.
items.add(new DrawerDivider());
items.add(new DrawerItem(child: new Flex(
children: <Widget>[
new Text("Made with Flutter "),
new Container(
margin: const EdgeDims.symmetric(horizontal: 5.0),
child: new AssetImage(
name: 'assets/flutter_logo.png',
height: 16.0,
fit: ImageFit.contain
)
)
]
)));
return new Drawer(child: new Block(items));
}
Widget _buildBody() {
if (config.active != null)
return config.active.builder(context);
return new Material(
child: new Center(
child: new Text('Select a demo from the drawer')
)
);
}
Widget _buildTabBar() {
final WidgetBuilder builder = config.active?.tabBarBuilder;
return builder != null ? builder(context) : null;
}
Widget _buildPageWrapper(BuildContext context, Widget child) {
final PageWrapperBuilder builder = config.active?.pageWrapperBuilder;
return builder != null ? builder(context, child) : child;
}
Widget _buildFloatingActionButton() {
final WidgetBuilder builder = config.active?.floatingActionButtonBuilder;
return builder != null ? builder(context) : null;
}
Widget build(BuildContext context) {
return _buildPageWrapper(context,
new Scaffold(
toolBar: new ToolBar(
center: new Text(config.active?.title ?? 'Flutter Material gallery'),
tabBar: _buildTabBar()
),
drawer: _buildDrawer(),
floatingActionButton: _buildFloatingActionButton(),
body: _buildBody()
)
);
}
}
examples/material_gallery/lib/main.dart
View file @ 3f0cca02
...@@ -8,69 +8,155 @@ import 'demo/chip_demo.dart'; ...@@ -8,69 +8,155 @@ 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/modal_bottom_sheet_demo.dart';
import 'demo/page_selector_demo.dart';
import 'demo/persistent_bottom_sheet_demo.dart'; import 'demo/persistent_bottom_sheet_demo.dart';
import 'demo/selection_controls_demo.dart'; import 'demo/progress_indicator_demo.dart';
import 'demo/toggle_controls_demo.dart';
import 'demo/slider_demo.dart'; import 'demo/slider_demo.dart';
import 'demo/tabs_demo.dart'; import 'demo/tabs_demo.dart';
import 'demo/page_selector_demo.dart';
import 'demo/time_picker_demo.dart'; import 'demo/time_picker_demo.dart';
import 'demo/widget_demo.dart';
import 'gallery_page.dart';
final List<WidgetDemo> _kDemos = <WidgetDemo>[ class GalleryDemo {
kChipDemo, GalleryDemo({ this.title, this.builder });
kSelectionControlsDemo,
kSliderDemo,
kDatePickerDemo,
kTabsDemo,
kPageSelectorDemo,
kTimePickerDemo,
kDropDownDemo,
kModalBottomSheetDemo,
kPersistentBottomSheetDemo,
];
class _MaterialGallery extends StatefulComponent { final String title;
_MaterialGalleryState createState() => new _MaterialGalleryState(); final WidgetBuilder builder;
} }
class _MaterialGalleryState extends State<_MaterialGallery> { class GallerySection extends StatelessComponent {
final Map<String, RouteBuilder> _routes = new Map<String, RouteBuilder>(); GallerySection({ this.colors, this.title, this.demos });
final Map<int, Color> colors;
final String title;
final List<GalleryDemo> demos;
void initState() { void showDemo(GalleryDemo demo, BuildContext context, ThemeData theme) {
super.initState(); Navigator.push(context, new MaterialPageRoute(
_routes['/'] = (_) => new GalleryPage( builder: (BuildContext context) {
demos: _kDemos, Widget child = (demo.builder == null) ? null : demo.builder(context);
onThemeChanged: _handleThemeChanged return new Theme(data: theme, child: child);
}
));
}
void showDemos(BuildContext context) {
final theme = new ThemeData(
brightness: ThemeBrightness.light,
primarySwatch: colors
); );
for (WidgetDemo demo in _kDemos) { Navigator.push(context, new MaterialPageRoute(
_routes[demo.routeName] = (_) { builder: (BuildContext context) {
return new GalleryPage( return new Theme(
demos: _kDemos, data: theme,
active: demo, child: new Scaffold(
onThemeChanged: _handleThemeChanged toolBar: new ToolBar(center: new Text(title)),
body: new Material(
child: new MaterialList(
type: MaterialListType.oneLine,
children: (demos ?? <GalleryDemo>[]).map((GalleryDemo demo) {
return new ListItem(
center: new Text(demo.title, style: theme.text.subhead),
onTap: () { showDemo(demo, context, theme); }
);
})
)
)
)
); );
}; }
} ));
} }
ThemeData _theme; Widget build (BuildContext context) {
final theme = new ThemeData(
void _handleThemeChanged(ThemeData newTheme) { brightness: ThemeBrightness.dark,
setState(() { primarySwatch: colors
_theme = newTheme; );
}); return new Theme(
data: theme,
child: new Flexible(
child: new GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () { showDemos(context); },
child: new Container(
height: 256.0,
margin: const EdgeDims.all(4.0),
padding: const EdgeDims.only(left: 16.0, bottom: 16.0),
decoration: new BoxDecoration(backgroundColor: theme.primaryColor),
child: new Align(
alignment: const FractionalOffset(0.0, 1.0),
child: new Text(title, style: theme.text.title)
)
)
)
)
);
} }
}
class GalleryHome extends StatelessComponent {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new MaterialApp( return new Scaffold(
title: 'Material Gallery', toolBar: new ToolBar(
theme: _theme, bottom: new Container(
routes: _routes padding: const EdgeDims.only(left: 16.0, bottom: 24.0),
child: new Align(
alignment: const FractionalOffset(0.0, 1.0),
child: new Text('Flutter Gallery', style: Typography.white.headline)
)
)
),
body: new Padding(
padding: const EdgeDims.all(4.0),
child: new Block(
<Widget>[
new Row(
children: <Widget>[
new GallerySection(title: 'Animation', colors: Colors.purple),
new GallerySection(title: 'Style', colors: Colors.green)
]
),
new Row(
children: <Widget>[
new GallerySection(title: 'Layout', colors: Colors.pink),
new GallerySection(
title: 'Components',
colors: Colors.amber,
demos: <GalleryDemo>[
new GalleryDemo(title: 'Modal Bottom Sheet', builder: (_) => new ModalBottomSheetDemo()),
new GalleryDemo(title: 'Persistent Bottom Sheet', builder: (_) => new PersistentBottomSheetDemo()),
new GalleryDemo(title: 'Chips', builder: (_) => new ChipDemo()),
new GalleryDemo(title: 'Progress Indicators', builder: (_) => new ProgressIndicatorDemo()),
new GalleryDemo(title: 'Sliders', builder: (_) => new SliderDemo()),
new GalleryDemo(title: 'Toggle Controls', builder: (_) => new ToggleControlsDemo()),
new GalleryDemo(title: 'Dropdown Button', builder: (_) => new DropDownDemo()),
new GalleryDemo(title: 'Tabs', builder: (_) => new TabsDemo()),
new GalleryDemo(title: 'Page Selector', builder: (_) => new PageSelectorDemo()),
new GalleryDemo(title: 'Date Picker', builder: (_) => new DatePickerDemo()),
new GalleryDemo(title: 'Time Picker', builder: (_) => new TimePickerDemo())
]
)
]
),
new Row(
children: <Widget>[
new GallerySection(title: 'Pattern', colors: Colors.cyan),
new GallerySection(title: 'Usability', colors: Colors.lightGreen)
]
)
]
)
)
); );
} }
} }
void main() { void main() {
runApp(new _MaterialGallery()); runApp(new MaterialApp(
title: 'Material Gallery',
routes: {
'/': (RouteArguments args) => new GalleryHome()
}
));
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

HIAST - GitLab