Adding Rally App to Flutter Samples (#135)

2025-11-11 23:39:14 +00:00 · 2019-09-05 15:36:20 -04:00
parent 3348c2f2dd
commit c056b754a2
31 changed files with 2348 additions and 0 deletions
--- a/material_studies/rally/lib/charts/line_chart.dart
+++ b/material_studies/rally/lib/charts/line_chart.dart
@@ -0,0 +1,193 @@
+// Copyright 2019-present the Flutter authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
+import 'package:flutter/widgets.dart';
+
+import 'package:rally/colors.dart';
+import 'package:rally/data.dart';
+
+class RallyLineChart extends StatelessWidget {
+  RallyLineChart({this.events = const []}) : assert(events != null);
+
+  final List<DetailedEventData> events;
+
+  @override
+  Widget build(BuildContext context) {
+    return CustomPaint(painter: RallyLineChartPainter(context, events));
+  }
+}
+
+class RallyLineChartPainter extends CustomPainter {
+  RallyLineChartPainter(this.context, this.events);
+
+  final BuildContext context;
+
+  // Events to plot on the line as points.
+  final List<DetailedEventData> events;
+
+  // Number of days to plot.
+  // This is hardcoded to reflect the dummy data, but would be dynamic in a real
+  // app.
+  final int numDays = 52;
+
+  // Beginning of window. The end is this plus numDays.
+  // This is hardcoded to reflect the dummy data, but would be dynamic in a real
+  // app.
+  final DateTime startDate = DateTime.utc(2018, 12, 1);
+
+  // Ranges uses to lerp the pixel points.
+  // This is hardcoded to reflect the dummy data, but would be dynamic in a real
+  // app.
+  final double maxAmount = 3000.0; // minAmount is assumed to be 0.0
+
+  // The number of milliseconds in a day. This is the inherit period fot the
+  // points in this line.
+  static const int millisInDay = 24 * 60 * 60 * 1000;
+
+  // Amount to shift the tick drawing by so that the sunday ticks do not start
+  // on the edge.
+  final int tickShift = 3;
+
+  // Arbitrary unit of space for absolute positioned painting.
+  final double space = 16.0;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    double ticksTop = size.height - space * 5;
+    double labelsTop = size.height - space * 2;
+    _drawLine(
+      canvas,
+      Rect.fromLTWH(0.0, 0.0, size.width, ticksTop),
+    );
+    _drawXAxisTicks(
+      canvas,
+      Rect.fromLTWH(0.0, ticksTop, size.width, labelsTop - ticksTop),
+    );
+    _drawXAxisLabels(
+      canvas,
+      Rect.fromLTWH(0.0, labelsTop, size.width, size.height - labelsTop),
+    );
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) {
+    return false;
+  }
+
+  void _drawLine(Canvas canvas, Rect rect) {
+    final linePaint = Paint()
+      ..color = RallyColors.accountColor(2)
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = 2.0;
+
+    // Arbitrary value for the first point. In a real app, a wider range of
+    // points would be used that go beyond the boundaries of the screen.
+    double lastAmount = 800.0;
+
+    // Try changing this value between 1, 7, 15, etc.
+    int smoothing = 7;
+
+    // Align the points with equal deltas (1 day) as a cumulative sum.
+    int startMillis = startDate.millisecondsSinceEpoch;
+    final points = [
+      Offset(0.0, (maxAmount - lastAmount) / maxAmount * rect.height)
+    ];
+    for (int i = 0; i < numDays + smoothing; i++) {
+      int endMillis = startMillis + millisInDay * 1;
+      final filteredEvents = events.where((e) {
+        return startMillis <= e.date.millisecondsSinceEpoch &&
+            e.date.millisecondsSinceEpoch <= endMillis;
+      }).toList();
+      lastAmount += filteredEvents.fold<num>(0.0, (sum, e) => sum + e.amount);
+      double x = i / numDays * rect.width;
+      double y = (maxAmount - lastAmount) / maxAmount * rect.height;
+      points.add(Offset(x, y));
+      startMillis = endMillis;
+    }
+
+    final Path path = Path();
+    path.moveTo(points[0].dx, points[0].dy);
+    for (int i = 1; i < points.length - smoothing; i += smoothing) {
+      double x1 = points[i].dx;
+      double y1 = points[i].dy;
+      double x2 = (x1 + points[i + smoothing].dx) / 2;
+      double y2 = (y1 + points[i + smoothing].dy) / 2;
+      path.quadraticBezierTo(x1, y1, x2, y2);
+    }
+    canvas.drawPath(path, linePaint);
+  }
+
+  /// Draw the X-axis increment markers at constant width intervals.
+  void _drawXAxisTicks(Canvas canvas, Rect rect) {
+    double dayTop = (rect.top + rect.bottom) / 2;
+    for (int i = 0; i < numDays; i++) {
+      double x = rect.width / numDays * i;
+      canvas.drawRect(
+        Rect.fromPoints(
+          Offset(x, i % 7 == tickShift ? rect.top : dayTop),
+          Offset(x, rect.bottom),
+        ),
+        Paint()
+          ..style = PaintingStyle.stroke
+          ..strokeWidth = 1.0
+          ..color = RallyColors.gray25,
+      );
+    }
+  }
+
+  /// Set X-axis labels under the X-axis increment markers.
+  void _drawXAxisLabels(Canvas canvas, Rect rect) {
+    final selectedLabelStyle = Theme.of(context).textTheme.body1.copyWith(
+          fontWeight: FontWeight.w700,
+        );
+    final unselectedLabelStyle = Theme.of(context).textTheme.body1.copyWith(
+          fontWeight: FontWeight.w700,
+          color: RallyColors.gray25,
+        );
+
+    final leftLabel = TextPainter(
+      text: TextSpan(
+        text: 'AUGUST 2019',
+        style: unselectedLabelStyle,
+      ),
+      textDirection: TextDirection.ltr,
+    );
+    leftLabel.layout();
+    leftLabel.paint(canvas, Offset(rect.left + space / 2, rect.center.dy));
+
+    final centerLabel = TextPainter(
+      text: TextSpan(text: 'SEPTEMBER 2019', style: selectedLabelStyle),
+      textDirection: TextDirection.ltr,
+    );
+    centerLabel.layout();
+    final double x = (rect.width - centerLabel.width) / 2;
+    final double y = rect.center.dy;
+    centerLabel.paint(canvas, Offset(x, y));
+
+    final rightLabel = TextPainter(
+      text: TextSpan(
+        text: 'OCTOBER 2019',
+        style: unselectedLabelStyle,
+      ),
+      textDirection: TextDirection.ltr,
+    );
+    rightLabel.layout();
+    rightLabel.paint(
+      canvas,
+      Offset(rect.right - centerLabel.width - space / 2, rect.center.dy),
+    );
+  }
+}
--- a/material_studies/rally/lib/charts/pie_chart.dart
+++ b/material_studies/rally/lib/charts/pie_chart.dart
@@ -0,0 +1,239 @@
+// Copyright 2019-present the Flutter authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
+import 'package:flutter/widgets.dart';
+
+import 'package:rally/colors.dart';
+import 'package:rally/data.dart';
+import 'package:rally/formatters.dart';
+
+/// A colored piece of the [RallyPieChart].
+class RallyPieChartSegment {
+  final Color color;
+  final double value;
+
+  const RallyPieChartSegment({this.color, this.value});
+}
+
+List<RallyPieChartSegment> buildSegmentsFromAccountItems(
+    List<AccountData> items) {
+  return List<RallyPieChartSegment>.generate(
+    items.length,
+    (i) => RallyPieChartSegment(
+      color: RallyColors.accountColor(i),
+      value: items[i].primaryAmount,
+    ),
+  );
+}
+
+List<RallyPieChartSegment> buildSegmentsFromBillItems(List<BillData> items) {
+  return List<RallyPieChartSegment>.generate(
+    items.length,
+    (i) => RallyPieChartSegment(
+      color: RallyColors.billColor(i),
+      value: items[i].primaryAmount,
+    ),
+  );
+}
+
+List<RallyPieChartSegment> buildSegmentsFromBudgetItems(
+    List<BudgetData> items) {
+  return List<RallyPieChartSegment>.generate(
+    items.length,
+    (i) => RallyPieChartSegment(
+      color: RallyColors.budgetColor(i),
+      value: items[i].primaryAmount - items[i].amountUsed,
+    ),
+  );
+}
+
+/// An animated circular pie chart to represent pieces of a whole, which can
+/// have empty space.
+class RallyPieChart extends StatefulWidget {
+  RallyPieChart(
+      {this.heroLabel, this.heroAmount, this.wholeAmount, this.segments});
+
+  final String heroLabel;
+  final double heroAmount;
+  final double wholeAmount;
+  final List<RallyPieChartSegment> segments;
+
+  _RallyPieChartState createState() => _RallyPieChartState();
+}
+
+class _RallyPieChartState extends State<RallyPieChart>
+    with SingleTickerProviderStateMixin {
+  AnimationController controller;
+  Animation<double> animation;
+
+  @override
+  initState() {
+    super.initState();
+    controller = AnimationController(
+        duration: const Duration(milliseconds: 600), vsync: this);
+    animation = CurvedAnimation(
+        parent: TweenSequence(<TweenSequenceItem<double>>[
+          TweenSequenceItem(tween: Tween(begin: 0.0, end: 0.0), weight: 1.0),
+          TweenSequenceItem(tween: Tween(begin: 0.0, end: 1.0), weight: 1.5),
+        ]).animate(controller),
+        curve: Curves.decelerate);
+    controller.forward();
+  }
+
+  dispose() {
+    controller.dispose();
+    super.dispose();
+  }
+
+  Widget build(BuildContext context) {
+    return _AnimatedRallyPieChart(
+      animation: animation,
+      centerLabel: widget.heroLabel,
+      centerAmount: widget.heroAmount,
+      total: widget.wholeAmount,
+      segments: widget.segments,
+    );
+  }
+}
+
+class _AnimatedRallyPieChart extends AnimatedWidget {
+  _AnimatedRallyPieChart({
+    Key key,
+    this.animation,
+    this.centerLabel,
+    this.centerAmount,
+    this.total,
+    this.segments,
+  }) : super(key: key, listenable: animation);
+
+  final Animation<double> animation;
+  final String centerLabel;
+  final double centerAmount;
+  final double total;
+  final List<RallyPieChartSegment> segments;
+
+  Widget build(BuildContext context) {
+    final labelTextStyle = Theme.of(context)
+        .textTheme
+        .body1
+        .copyWith(fontSize: 14.0, letterSpacing: 0.5);
+
+    return DecoratedBox(
+      decoration: _RallyPieChartOutlineDecoration(
+          maxFraction: animation.value, total: total, segments: segments),
+      child: SizedBox(
+        height: 300.0,
+        child: Center(
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              Text(
+                centerLabel,
+                style: labelTextStyle,
+              ),
+              Text(
+                Formatters.usdWithSign.format(centerAmount),
+                style: Theme.of(context).textTheme.headline,
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _RallyPieChartOutlineDecoration extends Decoration {
+  _RallyPieChartOutlineDecoration(
+      {this.maxFraction, this.total, this.segments});
+
+  final double maxFraction;
+  final double total;
+  final List<RallyPieChartSegment> segments;
+
+  @override
+  BoxPainter createBoxPainter([onChanged]) {
+    return _RallyPieChartOutlineBoxPainter(
+      maxFraction: maxFraction,
+      wholeAmount: total,
+      segments: segments,
+    );
+  }
+}
+
+class _RallyPieChartOutlineBoxPainter extends BoxPainter {
+  _RallyPieChartOutlineBoxPainter(
+      {this.maxFraction, this.wholeAmount, this.segments});
+
+  final double maxFraction;
+  final double wholeAmount;
+  final List<RallyPieChartSegment> segments;
+
+  @override
+  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
+    // Create two padded rects to draw arcs in: one for colored arcs and one for
+    // inner bg arc.
+    const double strokeWidth = 4.0;
+    final outerRadius =
+        min(configuration.size.width, configuration.size.height) / 2;
+    final outerRect = Rect.fromCircle(
+        center: configuration.size.center(Offset.zero),
+        radius: outerRadius - strokeWidth * 3.0);
+    final innerRect = Rect.fromCircle(
+        center: configuration.size.center(Offset.zero),
+        radius: outerRadius - strokeWidth * 4.0);
+
+    // Paint each arc with spacing.
+    double cummulativeSpace = 0.0;
+    double cummulativeTotal = 0.0;
+    const double wholeRadians = (2.0 * pi);
+    const double spaceRadians = wholeRadians / 180.0;
+    final wholeMinusSpacesRadians =
+        wholeRadians - (segments.length * spaceRadians);
+    for (RallyPieChartSegment segment in segments) {
+      final paint = Paint()..color = segment.color;
+      final start = maxFraction *
+              ((cummulativeTotal / wholeAmount * wholeMinusSpacesRadians) +
+                  cummulativeSpace) -
+          pi / 2.0;
+      final sweep =
+          maxFraction * (segment.value / wholeAmount * wholeMinusSpacesRadians);
+      canvas.drawArc(outerRect, start, sweep, true, paint);
+      cummulativeTotal += segment.value;
+      cummulativeSpace += spaceRadians;
+    }
+
+    // Paint any remaining space black (e.g. budget amount remaining).
+    double remaining = wholeAmount - cummulativeTotal;
+    if (remaining > 0) {
+      final paint = Paint()..color = Colors.black;
+      final start = maxFraction *
+              ((cummulativeTotal / wholeAmount * wholeMinusSpacesRadians) +
+                  spaceRadians * segments.length) -
+          pi / 2.0;
+      final sweep = maxFraction *
+          (remaining / wholeAmount * wholeMinusSpacesRadians - spaceRadians);
+      canvas.drawArc(outerRect, start, sweep, true, paint);
+    }
+
+    // Paint a smaller inner circle to cover the painted arcs, so they are
+    // display as segments.
+    Paint bgPaint = Paint()..color = RallyColors.primaryBackground;
+    canvas.drawArc(innerRect, 0.0, 2.0 * pi, true, bgPaint);
+  }
+}
--- a/material_studies/rally/lib/charts/vertical_fraction_bar.dart
+++ b/material_studies/rally/lib/charts/vertical_fraction_bar.dart
@@ -0,0 +1,45 @@
+// Copyright 2019-present the Flutter authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+
+class VerticalFractionBar extends StatelessWidget {
+  VerticalFractionBar({this.color, this.fraction});
+
+  final Color color;
+  final double fraction;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: 32.0,
+      width: 4.0,
+      child: Column(
+        children: [
+          SizedBox(
+            height: (1 - fraction) * 32.0,
+            child: Container(
+              color: Colors.black,
+            ),
+          ),
+          SizedBox(
+            height: fraction * 32.0,
+            child: Container(color: color),
+          ),
+        ],
+      ),
+    );
+  }
+}