add time series charts demo

lib/my_app_routes.dart

@@ -18,6 +18,7 @@ import './routes/appbar_basic_appbar_ex.dart';
 import './routes/appbar_bottom_appbar_ex.dart';
 import './routes/appbar_search_ex.dart';
 import './routes/appbar_sliver_appbar_ex.dart';
+import './routes/charts_time_series_ex.dart';
 import './routes/firebase_chatroom_ex.dart';
 import './routes/firebase_login_ex.dart';
 import './routes/firebase_mlkit_ex.dart';
@@ -687,6 +688,20 @@ const kMyAppRoutesAdvanced = <MyRouteGroup>[
       ),
     ],
   ),
+  MyRouteGroup(
+      groupName: 'Charts',
+      icon: Icon(Icons.show_chart),
+      routes: <MyRoute>[
+        MyRoute(
+          child: TimeseriesChartsExample(),
+          sourceFilePath: 'lib/routes/charts_time_series_ex.dart',
+          title: 'Time Series Charts',
+          links: {
+            'Demo gallery':
+                'https://google.github.io/charts/flutter/gallery.html'
+          },
+        ),
+      ]),
   MyRouteGroup(
     groupName: 'Firebase',
     icon: Icon(Icons.cloud),

lib/routes/charts_time_series_ex.dart

@@ -0,0 +1,128 @@
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+import 'package:charts_flutter/flutter.dart' as charts;
+
+/// Data class to visualize.
+class _SalesData {
+  final int year;
+  final int sales;
+
+  _SalesData(this.year, this.sales);
+  // Returns Jan.1st of that year as date.
+  DateTime get date => DateTime(this.year, 1, 1);
+}
+
+/// Generate some random data.
+List<_SalesData> _genRandData() {
+  final random = Random();
+  // Returns an increasing series with some fluctuations.
+  return [
+    for (int i = 2005; i < 2020; ++i)
+      _SalesData(i, (i - 2000) * 40 + random.nextInt(100)),
+  ];
+}
+
+class TimeseriesChartsExample extends StatefulWidget {
+  const TimeseriesChartsExample({Key key}) : super(key: key);
+
+  @override
+  _TimeseriesChartsExampleState createState() =>
+      _TimeseriesChartsExampleState();
+}
+
+class _TimeseriesChartsExampleState extends State<TimeseriesChartsExample> {
+  // Chart configs.
+  bool _animate = false;
+  bool _defaultInteractions = true;
+  bool _includeArea = true;
+  bool _includePoints = true;
+  bool _stacked = true;
+
+  // Data to render.
+  List<_SalesData> _series1, _series2;
+
+  @override
+  void initState() {
+    super.initState();
+    this._series1 = _genRandData();
+    this._series2 = _genRandData();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ListView(
+      padding: const EdgeInsets.all(8),
+      children: <Widget>[
+        Container(
+          height: 300,
+          child: charts.TimeSeriesChart(
+            /*seriesList=*/ [
+              charts.Series<_SalesData, DateTime>(
+                id: 'Sales-1',
+                colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
+                domainFn: (_SalesData sales, _) => sales.date,
+                measureFn: (_SalesData sales, _) => sales.sales,
+                data: this._series1,
+              ),
+              charts.Series<_SalesData, DateTime>(
+                id: 'Sales-2',
+                colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
+                domainFn: (_SalesData sales, _) => sales.date,
+                measureFn: (_SalesData sales, _) => sales.sales,
+                data: this._series2,
+              ),
+            ],
+            defaultInteractions: this._defaultInteractions,
+            defaultRenderer: charts.LineRendererConfig(
+              includePoints: this._includePoints,
+              includeArea: this._includeArea,
+              stacked: this._stacked,
+            ),
+            animate: this._animate,
+            behaviors: [
+              // Add title.
+              charts.ChartTitle('Dummy sales time series'),
+              // Add legend.
+              charts.SeriesLegend(),
+              // Highlight X and Y value of selected point.
+              charts.LinePointHighlighter(
+                showHorizontalFollowLine:
+                    charts.LinePointHighlighterFollowLineType.all,
+                showVerticalFollowLine:
+                    charts.LinePointHighlighterFollowLineType.nearest,
+              ),
+            ],
+          ),
+        ),
+        SizedBox(height: 20),
+        SwitchListTile(
+          title: Text('animate'),
+          onChanged: (bool val) => setState(() => this._animate = val),
+          value: this._animate,
+        ),
+        SwitchListTile(
+          title: Text('defaultInteractions'),
+          onChanged: (bool val) =>
+              setState(() => this._defaultInteractions = val),
+          value: this._defaultInteractions,
+        ),
+        SwitchListTile(
+          title: Text('includePoints'),
+          onChanged: (bool val) => setState(() => this._includePoints = val),
+          value: this._includePoints,
+        ),
+        SwitchListTile(
+          title: Text('includeArea'),
+          onChanged: (bool val) => setState(() => this._includeArea = val),
+          value: this._includeArea,
+        ),
+        SwitchListTile(
+          title: Text('stacked'),
+          onChanged: (bool val) => setState(() => this._stacked = val),
+          value: this._stacked,
+        ),
+      ],
+    );
+  }
+}

pubspec.yaml

@@ -14,6 +14,7 @@ dependencies:
   async: '^2.2.0'
   backdrop: '0.1.8'
   cached_network_image: '2.0.0-rc.1'
+  charts_flutter: '0.8.1'
   cloud_firestore: '0.12.10+2'
   english_words: '3.1.5'
   firebase_analytics: '3.0.3'
@@ -28,20 +29,20 @@ dependencies:
   flutter_webview_plugin: '0.3.5'
   fluttertoast: '3.1.0'
   google_sign_in: '4.0.2'
-  hive: '1.1.1'
   hive_flutter: '0.2.1'
+  hive: '1.1.1'
   image_picker: '0.6.0+11'
   local_auth: '0.5.2+4'
   package_info: '0.4.0+4'
-  path: '^1.6.2'
   path_provider: '1.1.0'
+  path: '^1.6.2'
   provider: '3.0.0+1'
   scoped_model: '1.0.1'
   sembast: '2.0.1'
-  sqflite: '1.1.6+3'
   shared_preferences: ' 0.5.3+1'
+  sqflite: '1.1.6+3'
   transparent_image: '1.0.0'
-  url_launcher: '5.0.3'
+  url_launcher: '5.2.7'
   widget_with_codeview: '1.0.3'
 
 dev_dependencies: