Add a Material/Cupertino adaptive application example (#69)

platform_design/lib/news_tab.dart

@@ -0,0 +1,126 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_lorem/flutter_lorem.dart';
+
+import 'utils.dart';
+import 'widgets.dart';
+
+class NewsTab extends StatefulWidget {
+  static const title = 'News';
+  static const androidIcon = Icon(Icons.library_books);
+  static const iosIcon = Icon(CupertinoIcons.news);
+
+  @override
+  _NewsTabState createState() => _NewsTabState();
+}
+
+class _NewsTabState extends State<NewsTab> {
+  static const _itemsLength = 20;
+
+  List<Color> colors;
+  List<String> titles;
+  List<String> contents;
+
+  @override
+  void initState() {
+    colors = getRandomColors(_itemsLength);
+    titles = List.generate(_itemsLength, (index) => generateRandomHeadline());
+    contents = List.generate(_itemsLength, (index) => lorem(paragraphs: 1, words: 24));
+    super.initState();
+  }
+
+  Widget _listBuilder(context, index) {
+    if (index >= _itemsLength)
+      return null;
+
+    return SafeArea(
+      top: false,
+      bottom: false,
+      child: Card(
+        elevation: 1.5,
+        margin: EdgeInsets.fromLTRB(6, 12, 6, 0),
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(4),
+        ),
+        child: InkWell(
+          // Make it splash on Android. It would happen automatically if this
+          // was a real card but this is just a demo. Skip the splash on iOS.
+          onTap: defaultTargetPlatform == TargetPlatform.iOS ? null : () {},
+          child: Padding(
+            padding: const EdgeInsets.all(12.0),
+            child: Row(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                CircleAvatar(
+                  backgroundColor: colors[index],
+                  child: Text(
+                    titles[index].substring(0, 1),
+                    style: TextStyle(color: Colors.white),
+                  ),
+                ),
+                Padding(padding: EdgeInsets.only(left: 16)),
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        titles[index],
+                        style: TextStyle(
+                          fontSize: 15,
+                          fontWeight: FontWeight.w500,
+                        ),
+                      ),
+                      Padding(padding: EdgeInsets.only(top: 8)),
+                      Text(
+                        contents[index],
+                      ),
+                    ],
+                  ),
+                ),
+              ],
+            ),
+          ),
+        )
+      ),
+    );
+  }
+
+  // ===========================================================================
+  // Non-shared code below because this tab uses different scaffolds.
+  // ===========================================================================
+
+  Widget _buildAndroid(context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(NewsTab.title),
+      ),
+      body: Container(
+        color: Colors.grey[100],
+        child: ListView.builder(
+          itemBuilder: _listBuilder,
+        ),
+      ),
+    );
+  }
+
+  Widget _buildIos(context) {
+    return CupertinoPageScaffold(
+      navigationBar: CupertinoNavigationBar(),
+      child: Container(
+        color: Colors.grey[100],
+        child: ListView.builder(
+          itemBuilder: _listBuilder,
+        ),
+      ),
+    );
+  }
+
+  @override
+  Widget build(context) {
+    return PlatformWidget(
+      androidBuilder: _buildAndroid,
+      iosBuilder: _buildIos,
+    );
+  }
+}