Add examples/layout/lakes/interactive code (#2267)

I'm committing this first so that CI tests for #2264 can pass (external link checking will fail if the sources aren't in the repo).
flutter · Jan 24, 2019 · 7953e2b · 7953e2b
1 parent c0a7972
commit 7953e2b
Show file tree

Hide file tree

Showing 5 changed files with 215 additions and 0 deletions.
diff --git a/examples/layout/lakes/interactive/README.md b/examples/layout/lakes/interactive/README.md
@@ -0,0 +1 @@
+../../../README.md
diff --git a/examples/layout/lakes/interactive/images/lake.jpg b/examples/layout/lakes/interactive/images/lake.jpg
diff --git a/examples/layout/lakes/interactive/lib/main.dart b/examples/layout/lakes/interactive/lib/main.dart
@@ -0,0 +1,164 @@
+import 'package:flutter/material.dart';
+
+void main() => runApp(MyApp());
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    Widget titleSection = Container(
+      padding: const EdgeInsets.all(32.0),
+      child: Row(
+        children: [
+          Expanded(
+            /*1*/
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                /*2*/
+                Container(
+                  padding: const EdgeInsets.only(bottom: 8.0),
+                  child: Text(
+                    'Oeschinen Lake Campground',
+                    style: TextStyle(
+                      fontWeight: FontWeight.bold,
+                    ),
+                  ),
+                ),
+                Text(
+                  'Kandersteg, Switzerland',
+                  style: TextStyle(
+                    color: Colors.grey[500],
+                  ),
+                ),
+              ],
+            ),
+          ),
+          FavoriteWidget(),
+        ],
+      ),
+    );
+
+    Color color = Theme.of(context).primaryColor;
+
+    Widget buttonSection = Container(
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+        children: [
+          _buildButtonColumn(color, Icons.call, 'CALL'),
+          _buildButtonColumn(color, Icons.near_me, 'ROUTE'),
+          _buildButtonColumn(color, Icons.share, 'SHARE'),
+        ],
+      ),
+    );
+
+    Widget textSection = Container(
+      padding: const EdgeInsets.all(32.0),
+      child: Text(
+        'Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese '
+            'Alps. Situated 1,578 meters above sea level, it is one of the '
+            'larger Alpine Lakes. A gondola ride from Kandersteg, followed by a '
+            'half-hour walk through pastures and pine forest, leads you to the '
+            'lake, which warms to 20 degrees Celsius in the summer. Activities '
+            'enjoyed here include rowing, and riding the summer toboggan run.',
+        softWrap: true,
+      ),
+    );
+
+    return MaterialApp(
+      title: 'Flutter layout demo',
+      home: Scaffold(
+        appBar: AppBar(
+          title: Text('Flutter layout demo'),
+        ),
+        body: ListView(
+          children: [
+            Image.asset(
+              'images/lake.jpg',
+              width: 600.0,
+              height: 240.0,
+              fit: BoxFit.cover,
+            ),
+            titleSection,
+            buttonSection,
+            textSection,
+          ],
+        ),
+      ),
+    );
+  }
+
+  Column _buildButtonColumn(Color color, IconData icon, String label) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        Icon(icon, color: color),
+        Container(
+          margin: const EdgeInsets.only(top: 8.0),
+          child: Text(
+            label,
+            style: TextStyle(
+              fontSize: 12.0,
+              fontWeight: FontWeight.w400,
+              color: color,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+// #docregion FavoriteWidget
+class FavoriteWidget extends StatefulWidget {
+  @override
+  _FavoriteWidgetState createState() => _FavoriteWidgetState();
+}
+// #enddocregion FavoriteWidget
+
+// #docregion _FavoriteWidgetState, _FavoriteWidgetState-fields, _FavoriteWidgetState-build
+class _FavoriteWidgetState extends State<FavoriteWidget> {
+  // #enddocregion _FavoriteWidgetState-build
+  bool _isFavorited = true;
+  int _favoriteCount = 41;
+  // #enddocregion _FavoriteWidgetState-fields
+
+  // #docregion _toggleFavorite
+  void _toggleFavorite() {
+    setState(() {
+      if (_isFavorited) {
+        _favoriteCount -= 1;
+        _isFavorited = false;
+      } else {
+        _favoriteCount += 1;
+        _isFavorited = true;
+      }
+    });
+  }
+  // #enddocregion _toggleFavorite
+
+  // #docregion _FavoriteWidgetState-build
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Container(
+          padding: EdgeInsets.all(0.0),
+          child: IconButton(
+            icon: (_isFavorited ? Icon(Icons.star) : Icon(Icons.star_border)),
+            color: Colors.red[500],
+            onPressed: _toggleFavorite,
+          ),
+        ),
+        SizedBox(
+          width: 18.0,
+          child: Container(
+            child: Text('$_favoriteCount'),
+          ),
+        ),
+      ],
+    );
+  }
+  // #docregion _FavoriteWidgetState-fields
+}
diff --git a/examples/layout/lakes/interactive/pubspec.yaml b/examples/layout/lakes/interactive/pubspec.yaml
@@ -0,0 +1,21 @@
+name: interactive
+description: >
+  Sample app from "Adding interactivity", https://flutter.io/docs/development/ui/interactive.
+version: 1.0.0
+
+environment:
+  sdk: '>=2.0.0-dev.68.0 <3.0.0'
+
+dependencies:
+  flutter:
+    sdk: flutter
+  cupertino_icons: ^0.1.2
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+
+flutter:
+  uses-material-design: true
+  assets:
+    - images/lake.jpg
diff --git a/examples/layout/lakes/interactive/test/widget_test.dart b/examples/layout/lakes/interactive/test/widget_test.dart
@@ -0,0 +1,29 @@
+// Basic Flutter widget test. Learn more at https://flutter.io/docs/testing.
+
+import 'package:flutter_test/flutter_test.dart';
+import 'package:flutter/material.dart';
+
+import 'package:interactive/main.dart';
+
+void main() {
+  testWidgets('Codelab smoke test', (WidgetTester tester) async {
+    await tester.pumpWidget(new MyApp());
+    expect(find.text('Oeschinen Lake Campground'), findsOneWidget);
+    expect(find.text('ROUTE'), findsOneWidget);
+
+    expect(find.byIcon(Icons.star), findsOneWidget);
+    expect(find.text('41'), findsOneWidget);
+
+    await tester.tap(find.byIcon(Icons.star));
+    await tester.pump();
+
+    expect(find.byIcon(Icons.star_border), findsOneWidget);
+    expect(find.text('40'), findsOneWidget);
+
+    await tester.tap(find.byIcon(Icons.star_border));
+    await tester.pump();
+
+    expect(find.byIcon(Icons.star), findsOneWidget);
+    expect(find.text('41'), findsOneWidget);
+  });
+}