firka/flutter
firka/flutter
5
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Gallery UI tweaks (#4861)

Browse Source
This commit is contained in:
Hans Muller 2016-07-11 07:26:36 -07:00 committed by GitHub
parent 4c93831136
commit 445f250c91
5 changed files with 75 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
examples/flutter_gallery/lib/demo/shrine/shrine_order.dart
View File

@ -87,7 +87,10 @@ class OrderItem extends StatelessWidget {
items: <int>[0, 1, 2, 3, 4, 5].map((int value) {
return new DropDownMenuItem<int>(
value: value,
child: new Text('Quantity $value', style: theme.quantityMenuStyle)
child: new Padding(
padding: const EdgeInsets.only(left: 8.0),
child: new Text('Quantity $value', style: theme.quantityMenuStyle)
)
);
}).toList(),
value: quantity,

58
examples/flutter_gallery/lib/gallery/home.dart
View File

@ -48,11 +48,43 @@ class GalleryHome extends StatefulWidget {
class GalleryHomeState extends State<GalleryHome> {
final Key _homeKey = new ValueKey<String>("Gallery Home");
final List<Widget> _listItems = <Widget>[];
@override
void initState() {
super.initState();
// The first item in the list just exists to occupy the space behind
// the flexible app bar. As it's scrolled out of the way, the app bar's
// height will shrink.
final double statusBarHeight = (MediaQuery.of(context)?.padding ?? EdgeInsets.zero).top;
_listItems.add(new SizedBox(height: _kFlexibleSpaceMaxHeight + statusBarHeight));
final ThemeData themeData = Theme.of(context);
final TextStyle headerStyle = themeData.textTheme.body2.copyWith(color: themeData.primaryColor);
String category;
for (GalleryItem galleryItem in kAllGalleryItems) {
if (category != galleryItem.category) {
if (category != null)
_listItems.add(new Divider());
_listItems.add(
new Container(
height: 48.0,
padding: const EdgeInsets.only(left: 16.0),
child: new Align(
alignment: FractionalOffset.centerLeft,
child: new Text(galleryItem.category, style: headerStyle)
)
)
);
category = galleryItem.category;
}
_listItems.add(galleryItem);
}
}
@override
Widget build(BuildContext context) {
final double statusBarHight = (MediaQuery.of(context)?.padding ?? EdgeInsets.zero).top;
return new Scaffold(
key: _homeKey,
drawer: new GalleryDrawer(
@ -75,27 +107,7 @@ class GalleryHomeState extends State<GalleryHome> {
)
),
appBarBehavior: AppBarBehavior.under,
body: new TwoLevelList(
padding: new EdgeInsets.only(top: _kFlexibleSpaceMaxHeight + statusBarHight),
type: MaterialListType.oneLine,
children: <Widget>[
new TwoLevelSublist(
leading: new Icon(Icons.star),
title: new Text('Demos'),
children: _demoItems
),
new TwoLevelSublist(
leading: new Icon(Icons.extension),
title: new Text('Components'),
children: _componentItems
),
new TwoLevelSublist(
leading: new Icon(Icons.color_lens),
title: new Text('Style'),
children: _styleItems
)
]
)
body: new Block(children: _listItems)
);
}
}

43
examples/flutter_gallery/lib/gallery/item.dart
View File

@ -11,7 +11,7 @@ import '../demo/all.dart';
typedef Widget GalleryDemoBuilder();
class GalleryItem extends StatelessWidget {
GalleryItem({ this.title, this.category: 'Components', this.routeName, this.buildRoute }) {
GalleryItem({ this.title, this.subtitle, this.category: 'Components', this.routeName, this.buildRoute }) {
assert(title != null);
assert(category != null);
assert(routeName != null);
@ -19,14 +19,16 @@ class GalleryItem extends StatelessWidget {
}
final String title;
final String subtitle;
final String category;
final String routeName;
final WidgetBuilder buildRoute;
@override
Widget build(BuildContext context) {
return new TwoLevelListItem(
return new ListItem(
title: new Text(title),
subtitle: new Text(subtitle),
onTap: () {
if (routeName != null) {
Timeline.instantSync('Start Transition', arguments: <String, String>{
@ -44,168 +46,193 @@ final List<GalleryItem> kAllGalleryItems = <GalleryItem>[
// Demos
new GalleryItem(
title: 'Pesto',
subtitle: 'A simple recipe browser',
category: 'Demos',
routeName: PestoDemo.routeName,
buildRoute: (BuildContext context) => new PestoDemo()
),
new GalleryItem(
title: 'Shrine',
subtitle:'A basic shopping app',
category: 'Demos',
routeName: ShrineDemo.routeName,
buildRoute: (BuildContext context) => new ShrineDemo()
),
new GalleryItem(
title: 'Calculator',
category: 'Demos',
routeName: CalculatorDemo.routeName,
buildRoute: (BuildContext context) => new CalculatorDemo()
),
new GalleryItem(
title: 'Contacts',
category: 'Demos',
subtitle: 'Highlights the flexible appbar',
routeName: ContactsDemo.routeName,
buildRoute: (BuildContext context) => new ContactsDemo()
),
// Components
new GalleryItem(
title: 'Buttons',
subtitle: 'All kinds: flat, raised, dropdown, icon, etc',
routeName: ButtonsDemo.routeName,
buildRoute: (BuildContext context) => new ButtonsDemo()
),
new GalleryItem(
title: 'Cards',
subtitle: 'Material with rounded corners and a drop shadow',
routeName: CardsDemo.routeName,
buildRoute: (BuildContext context) => new CardsDemo()
),
new GalleryItem(
title: 'Chips',
subtitle: 'A label with an optional delete button and avatar',
routeName: ChipDemo.routeName,
buildRoute: (BuildContext context) => new ChipDemo()
),
new GalleryItem(
title: 'Date picker',
subtitle: 'Choose month, day, and year',
routeName: DatePickerDemo.routeName,
buildRoute: (BuildContext context) => new DatePickerDemo()
),
new GalleryItem(
title: 'Data tables',
subtitle: 'Full-featured grid',
routeName: DataTableDemo.routeName,
buildRoute: (BuildContext context) => new DataTableDemo()
),
new GalleryItem(
title: 'Dialog',
subtitle: 'All kinds: simple, alert, fullscreen, etc',
routeName: DialogDemo.routeName,
buildRoute: (BuildContext context) => new DialogDemo()
),
new GalleryItem(
title: 'Expand/collapse list control',
subtitle: 'A list with one level of sublists',
routeName: TwoLevelListDemo.routeName,
buildRoute: (BuildContext context) => new TwoLevelListDemo()
),
new GalleryItem(
title: 'Floating action button',
subtitle: 'Demos action button transitions',
routeName: TabsFabDemo.routeName,
buildRoute: (BuildContext context) => new TabsFabDemo()
),
new GalleryItem(
title: 'Grid',
subtitle: 'Row and column layout',
routeName: GridListDemo.routeName,
buildRoute: (BuildContext context) => new GridListDemo()
),
new GalleryItem(
title: 'Icons',
subtitle: 'Enabled and disabled icons with varying opacity',
routeName: IconsDemo.routeName,
buildRoute: (BuildContext context) => new IconsDemo()
),
new GalleryItem(
title: 'Leave-behind list items',
subtitle: 'Drag items to expose hidden actions',
routeName: LeaveBehindDemo.routeName,
buildRoute: (BuildContext context) => new LeaveBehindDemo()
),
new GalleryItem(
title: 'List',
subtitle: 'All the layout variations for scrollable lists',
routeName: ListDemo.routeName,
buildRoute: (BuildContext context) => new ListDemo()
),
new GalleryItem(
title: 'Menus',
subtitle: 'Menu buttons and simple menus',
routeName: MenuDemo.routeName,
buildRoute: (BuildContext context) => new MenuDemo()
),
new GalleryItem(
title: 'Modal bottom sheet',
subtitle: 'A modal sheet that slides up from the bottom',
routeName: ModalBottomSheetDemo.routeName,
buildRoute: (BuildContext context) => new ModalBottomSheetDemo()
),
new GalleryItem(
title: 'Over-scroll',
subtitle: 'Refresh and overscroll indicators',
routeName: OverscrollDemo.routeName,
buildRoute: (BuildContext context) => new OverscrollDemo()
),
new GalleryItem(
title: 'Page selector',
subtitle: 'A pageable list and other widgets',
routeName: PageSelectorDemo.routeName,
buildRoute: (BuildContext context) => new PageSelectorDemo()
),
new GalleryItem(
title: 'Persistent bottom sheet',
subtitle: 'A sheet that slides up from the bottom',
routeName: PersistentBottomSheetDemo.routeName,
buildRoute: (BuildContext context) => new PersistentBottomSheetDemo()
),
new GalleryItem(
title: 'Progress indicators',
subtitle: 'All kinds: linear, circular, indeterminate, etc',
routeName: ProgressIndicatorDemo.routeName,
buildRoute: (BuildContext context) => new ProgressIndicatorDemo()
),
new GalleryItem(
title: 'Scrollable tabs',
subtitle: 'A tab bar that scrolls',
routeName: ScrollableTabsDemo.routeName,
buildRoute: (BuildContext context) => new ScrollableTabsDemo()
),
new GalleryItem(
title: 'Selection controls',
subtitle: 'Checkboxes, radio buttons, and switches',
routeName: SelectionControlsDemo.routeName,
buildRoute: (BuildContext context) => new SelectionControlsDemo()
),
new GalleryItem(
title: 'Sliders',
subtitle: 'Select a value by dragging the slider thumb',
routeName: SliderDemo.routeName,
buildRoute: (BuildContext context) => new SliderDemo()
),
new GalleryItem(
title: 'Snackbar',
subtitle: 'Temporary message that appears at the bottom',
routeName: SnackBarDemo.routeName,
buildRoute: (BuildContext context) => new SnackBarDemo()
),
new GalleryItem(
title: 'Tabs',
subtitle: 'Tabs with indepdently scrollable views',
routeName: TabsDemo.routeName,
buildRoute: (BuildContext context) => new TabsDemo()
),
new GalleryItem(
title: 'Text fields',
subtitle: 'A Single line of editable text',
routeName: TextFieldDemo.routeName,
buildRoute: (BuildContext context) => new TextFieldDemo()
),
new GalleryItem(
title: 'Time picker',
subtitle: 'Choose a hours and minutes',
routeName: TimePickerDemo.routeName,
buildRoute: (BuildContext context) => new TimePickerDemo()
),
new GalleryItem(
title: 'Tooltips',
subtitle: 'Display a short message on long-press',
routeName: TooltipDemo.routeName,
buildRoute: (BuildContext context) => new TooltipDemo()
),
// Styles
new GalleryItem(
title: 'Colors',
subtitle: 'All of the predefined colors',
category: 'Style',
routeName: ColorsDemo.routeName,
buildRoute: (BuildContext context) => new ColorsDemo()
),
new GalleryItem(
title: 'Typography',
subtitle: 'All of the predefined text styles',
category: 'Style',
routeName: TypographyDemo.routeName,
buildRoute: (BuildContext context) => new TypographyDemo()

11
examples/flutter_gallery/test/smoke_test.dart
View File

@ -74,14 +74,6 @@ void main() {
await tester.pump(); // see https://github.com/flutter/flutter/issues/1865
await tester.pump(); // triggers a frame
// Expand the demo category submenus.
for (String category in demoCategories.reversed) {
await tester.tap(find.text(category));
await tester.pump();
await tester.pump(
const Duration(seconds: 1)); // Wait until the menu has expanded.
}
final List<double> scrollDeltas = new List<double>();
double previousY = tester.getTopRight(find.text(demoCategories[0])).y;
for (String routeName in routeNames) {
@ -94,8 +86,7 @@ void main() {
for (int i = 0; i < routeNames.length; i += 1) {
final String routeName = routeNames[i];
await smokeDemo(tester, routeName);
await tester.scroll(findGalleryItemByRouteName(tester, routeName),
new Offset(0.0, scrollDeltas[i]));
await tester.scroll(findGalleryItemByRouteName(tester, routeName), new Offset(0.0, scrollDeltas[i]));
await tester.pump();
}

1
examples/flutter_gallery/test_driver/transitions_perf_test.dart
View File

@ -25,7 +25,6 @@ final List<String> demoTitles = <String>[
// Demos
// 'Pesto', TODO(hansmuller): restore when Pesto has a back button.
'Shrine',
'Calculator',
'Contacts',
// Components
'Buttons',