Added some simple AppBar examples to the sample catalog (#9912)

dev/bots/test.dart

@@ -108,6 +108,7 @@ Future<Null> main() async {
     await _runFlutterTest(path.join(flutterRoot, 'examples', 'layers'));
     await _runFlutterTest(path.join(flutterRoot, 'examples', 'stocks'));
     await _runFlutterTest(path.join(flutterRoot, 'examples', 'flutter_gallery'));
+    await _runFlutterTest(path.join(flutterRoot, 'examples', 'catalog'));
 
     print('${bold}DONE: All tests successful.$reset');
   }

examples/catalog/lib/app_bar_bottom.dart

+// Copyright 2017 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';
+
+/// Sample Catalog: AppBar with a custom bottom widget.
+///
+/// The bottom widget's TabPageSelector displays the relative position of the
+/// selected choice. The arrow buttons in the toolbar part of the app bar
+/// select the previous or the next choice.
+///
+/// Sample classes: [AppBar], [TabController], [TabPageSelector], [Scaffold], [TabBarView].
+///
+/// See also:
+///  * The "Components-Tabs" section of the material design specification:
+///    <https://material.io/guidelines/components/tabs.html>
+
+class Choice {
+  const Choice({ this.title, this.icon });
+  final String title;
+  final IconData icon;
+}
+
+const List<Choice> choices = const <Choice>[
+  const Choice(title: 'CAR', icon: Icons.directions_car),
+  const Choice(title: 'BICYCLE', icon: Icons.directions_bike),
+  const Choice(title: 'BOAT', icon: Icons.directions_boat),
+  const Choice(title: 'BUS', icon: Icons.directions_bus),
+  const Choice(title: 'TRAIN', icon: Icons.directions_railway),
+  const Choice(title: 'WALK', icon: Icons.directions_walk),
+];
+
+class ChoiceCard extends StatelessWidget {
+  const ChoiceCard({ Key key, this.choice }) : super(key: key);
+
+  final Choice choice;
+
+  @override
+  Widget build(BuildContext context) {
+    final TextStyle textStyle = Theme.of(context).textTheme.display1;
+    return new Card(
+      color: Colors.white,
+      child: new Center(
+        child: new Column(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: <Widget>[
+            new Icon(choice.icon, size: 128.0, color: textStyle.color),
+            new Text(choice.title, style: textStyle),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class AppBarBottomSample extends StatefulWidget {
+  @override
+  _AppBarBottomSampleState createState() => new _AppBarBottomSampleState();
+}
+
+class _AppBarBottomSampleState extends State<AppBarBottomSample> with SingleTickerProviderStateMixin {
+  TabController _tabController;
+
+  @override
+  void initState() {
+    super.initState();
+    _tabController = new TabController(vsync: this, length: choices.length);
+  }
+
+  @override
+  void dispose() {
+    _tabController.dispose();
+    super.dispose();
+  }
+
+  void _nextPage(int delta) {
+    final int newIndex = _tabController.index + delta;
+    if (newIndex < 0 || newIndex >= _tabController.length)
+      return;
+    _tabController.animateTo(newIndex);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return new Scaffold(
+      appBar: new AppBar(
+        title: const Text('AppBar Bottom Widget'),
+        leading: new IconButton(
+            tooltip: 'Previous choice',
+          icon: const Icon(Icons.arrow_back),
+          onPressed: () { _nextPage(-1); },
+        ),
+        actions: <Widget>[
+          new IconButton(
+            icon: const Icon(Icons.arrow_forward),
+            tooltip: 'Next choice',
+            onPressed: () { _nextPage(1); },
+          ),
+        ],
+        bottom: new PreferredSize(
+          preferredSize: const Size.fromHeight(48.0),
+          child: new Theme(
+            data: Theme.of(context).copyWith(accentColor: Colors.white),
+            child: new Container(
+              height: 48.0,
+              alignment: FractionalOffset.center,
+              child: new TabPageSelector(controller: _tabController),
+            ),
+          ),
+        ),
+      ),
+      body: new TabBarView(
+        controller: _tabController,
+        children: choices.map((Choice choice) {
+          return new Padding(
+            padding: const EdgeInsets.all(16.0),
+            child: new ChoiceCard(choice: choice),
+          );
+        }).toList(),
+      ),
+    );
+  }
+}
+
+void main() {
+  runApp(new MaterialApp(home: new AppBarBottomSample()));
+}

examples/catalog/lib/basic_app_bar.dart

+// Copyright 2017 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';
+
+/// Sample Catalog: Basic AppBar
+///
+/// An AppBar with a title, actions, and an overflow menu. One of the app's
+/// choices can be selected action buttons or the menu.
+///
+/// Sample classes: [AppBar], [IconButton], [PopupMenuButton], [Scaffold].
+///
+/// See also:
+///
+///  * The "Layout-Structure" section of the material design specification:
+///    <https://material.io/guidelines/layout/structure.html#structure-app-bar>
+
+class Choice {
+  const Choice({ this.title, this.icon });
+  final String title;
+  final IconData icon;
+}
+
+const List<Choice> choices = const <Choice>[
+  const Choice(title: 'Car', icon: Icons.directions_car),
+  const Choice(title: 'Bicycle', icon: Icons.directions_bike),
+  const Choice(title: 'Boat', icon: Icons.directions_boat),
+  const Choice(title: 'Bus', icon: Icons.directions_bus),
+  const Choice(title: 'Train', icon: Icons.directions_railway),
+  const Choice(title: 'Walk', icon: Icons.directions_walk),
+];
+
+class ChoiceCard extends StatelessWidget {
+  const ChoiceCard({ Key key, this.choice }) : super(key: key);
+
+  final Choice choice;
+
+  @override
+  Widget build(BuildContext context) {
+    final TextStyle textStyle = Theme.of(context).textTheme.display1;
+    return new Card(
+      color: Colors.white,
+      child: new Center(
+        child: new Column(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: <Widget>[
+            new Icon(choice.icon, size: 128.0, color: textStyle.color),
+            new Text(choice.title, style: textStyle),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class BasicAppBarSample extends StatefulWidget {
+  @override
+  _BasicAppBarSampleState createState() => new _BasicAppBarSampleState();
+}
+
+class _BasicAppBarSampleState extends State<BasicAppBarSample> {
+  Choice _selectedChoice = choices[0];
+
+  void _select(Choice choice) {
+    setState(() {
+      _selectedChoice = choice;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return new Scaffold(
+      appBar: new AppBar(
+        title: const Text('Basic AppBar'),
+        actions: <Widget>[
+          new IconButton(
+            icon: new Icon(choices[0].icon),
+            onPressed: () { _select(choices[0]); },
+          ),
+          new IconButton(
+            icon: new Icon(choices[1].icon),
+            onPressed: () { _select(choices[1]); },
+          ),
+          new PopupMenuButton<Choice>(
+            onSelected: _select,
+            itemBuilder: (BuildContext context) {
+              return choices.skip(2).map((Choice choice) {
+                return new PopupMenuItem<Choice>(
+                  value: choice,
+                  child: new Text(choice.title),
+                );
+              }).toList();
+            },
+          ),
+        ],
+      ),
+      body: new Padding(
+        padding: const EdgeInsets.all(16.0),
+        child: new ChoiceCard(choice: _selectedChoice),
+      ),
+    );
+  }
+}
+
+void main() {
+  runApp(new MaterialApp(home: new BasicAppBarSample()));
+}

examples/catalog/lib/tabbed_app_bar.dart

+// Copyright 2017 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';
+
+/// Sample Catalog: Tabbed AppBar
+///
+/// A basic app bar with a tab bar at the bottom. One of the app's choices can be
+/// selected by tapping the tabs or by swiping the tab bar view.
+///
+/// Sample classes: [AppBar], [DefaultTabController], [TabBar], [Scaffold], [TabBarView].
+///
+/// See also:
+///  * The "Components-Tabs" section of the material design specification:
+///    <https://material.io/guidelines/components/tabs.html>
+
+class Choice {
+  const Choice({ this.title, this.icon });
+  final String title;
+  final IconData icon;
+}
+
+const List<Choice> choices = const <Choice>[
+  const Choice(title: 'CAR', icon: Icons.directions_car),
+  const Choice(title: 'BICYCLE', icon: Icons.directions_bike),
+  const Choice(title: 'BOAT', icon: Icons.directions_boat),
+  const Choice(title: 'BUS', icon: Icons.directions_bus),
+  const Choice(title: 'TRAIN', icon: Icons.directions_railway),
+  const Choice(title: 'WALK', icon: Icons.directions_walk),
+];
+
+class ChoiceCard extends StatelessWidget {
+  const ChoiceCard({ Key key, this.choice }) : super(key: key);
+
+  final Choice choice;
+
+  @override
+  Widget build(BuildContext context) {
+    final TextStyle textStyle = Theme.of(context).textTheme.display1;
+    return new Card(
+      color: Colors.white,
+      child: new Center(
+        child: new Column(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: <Widget>[
+            new Icon(choice.icon, size: 128.0, color: textStyle.color),
+            new Text(choice.title, style: textStyle),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class TabbedAppBarSample extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return new DefaultTabController(
+      length: choices.length,
+      child: new Scaffold(
+        appBar: new AppBar(
+          title: const Text('Tabbed AppBar'),
+          bottom: new TabBar(
+            isScrollable: true,
+            tabs: choices.map((Choice choice) {
+              return new Tab(
+                text: choice.title,
+                icon: new Icon(choice.icon),
+              );
+            }).toList(),
+          ),
+        ),
+        body: new TabBarView(
+          children: choices.map((Choice choice) {
+            return new Padding(
+              padding: const EdgeInsets.all(16.0),
+              child: new ChoiceCard(choice: choice),
+            );
+          }).toList(),
+        ),
+      ),
+    );
+  }
+}
+
+void main() {
+  runApp(new MaterialApp(home: new TabbedAppBarSample()));
+}

examples/catalog/test/app_bar_bottom_test.dart

+// Copyright 2017 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 'package:flutter_test/flutter_test.dart';
+
+import '../lib/app_bar_bottom.dart' as app_bar_bottom_sample;
+
+final int choiceCount = app_bar_bottom_sample.choices.length;
+IconData iconAt(int index) => app_bar_bottom_sample.choices[index].icon;
+
+Finder findChoiceCard(IconData icon) {
+  return find.descendant(of: find.byType(Card), matching: find.icon(icon));
+}
+
+void main() {
+  testWidgets('app_bar_bottom sample smoke test', (WidgetTester tester) async {
+    app_bar_bottom_sample.main();
+    await tester.pump();
+
+    // Cycle throught the choices using the forward and backwards arrows.
+
+    final Finder nextChoice = find.byTooltip('Next choice');
+    for (int i = 0; i < choiceCount; i += 1) {
+      expect(findChoiceCard(iconAt(i)), findsOneWidget);
+      await tester.tap(nextChoice);
+      await tester.pumpAndSettle();
+    }
+
+    final Finder previousChoice = find.byTooltip('Previous choice');
+    for (int i = choiceCount - 1; i >= 0; i -= 1) {
+      expect(findChoiceCard(iconAt(i)), findsOneWidget);
+      await tester.tap(previousChoice);
+      await tester.pumpAndSettle();
+    }
+  });
+}

examples/catalog/test/basic_app_bar_test.dart

+// Copyright 2017 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 'package:flutter_test/flutter_test.dart';
+
+import '../lib/basic_app_bar.dart' as basic_app_bar_sample;
+
+int choiceCount = basic_app_bar_sample.choices.length;
+IconData iconAt(int index) => basic_app_bar_sample.choices[index].icon;
+String titleAt(int index) => basic_app_bar_sample.choices[index].title;
+
+Finder findAppBarIcon(IconData icon) {
+  return find.descendant(of: find.byType(AppBar), matching: find.icon(icon));
+}
+
+Finder findChoiceCard(IconData icon) {
+  return find.descendant(of: find.byType(Card), matching: find.icon(icon));
+}
+
+void main() {
+  testWidgets("basic_app_bar sample smoke test", (WidgetTester tester) async {
+    basic_app_bar_sample.main();
+    await tester.pump();
+
+    // Tap on the two action buttons and all of the overflow menu items.
+    // Verify that a Card with the expected icon appears.
+
+    await tester.tap(findAppBarIcon(iconAt(0)));
+    await tester.pumpAndSettle();
+    expect(findChoiceCard(iconAt(0)), findsOneWidget);
+
+    await tester.tap(findAppBarIcon(iconAt(1)));
+    await tester.pumpAndSettle();
+    expect(findChoiceCard(iconAt(1)), findsOneWidget);
+
+    for (int i = 2; i < choiceCount; i += 1) {
+      await tester.tap(findAppBarIcon(Icons.more_vert));
+      await tester.pumpAndSettle();
+      await tester.tap(find.text(titleAt(i)));
+      await tester.pumpAndSettle();
+      expect(findChoiceCard(iconAt(i)), findsOneWidget);
+    }
+  });
+}

examples/catalog/test/tabbed_app_bar_test.dart

+// Copyright 2017 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 'package:flutter_test/flutter_test.dart';
+
+import '../lib/tabbed_app_bar.dart' as tabbed_app_bar_sample;
+
+final int choiceCount = tabbed_app_bar_sample.choices.length;
+IconData iconAt(int index) => tabbed_app_bar_sample.choices[index].icon;
+
+Finder findChoiceCard(IconData icon) {
+  return find.descendant(of: find.byType(Card), matching: find.icon(icon));
+}
+
+Finder findTab(IconData icon) {
+  return find.descendant(of: find.byType(Tab), matching: find.icon(icon));
+}
+
+void main() {
+  testWidgets("tabbed_app_bar sample smoke test", (WidgetTester tester) async {
+    tabbed_app_bar_sample.main();
+    await tester.pump();
+
+    // Tap on each tab, verify that a Card with the expected icon appears.
+    for (int i = 0; i < choiceCount; i += 1) {
+      await tester.tap(findTab(iconAt(i)));
+      await tester.pumpAndSettle();
+      expect(findChoiceCard(iconAt(i)), findsOneWidget);
+      // Scroll the tabBar by about one tab width
+      await tester.drag(find.byType(TabBar), const Offset(-24.0, 0.0));
+      await tester.pumpAndSettle();
+    }
+  });
+}