Графики флаттера от библиотеки Google - анимируется только одна ось? - PullRequest
Новая
       41

Графики флаттера от библиотеки Google - анимируется только одна ось?

0 голосов
/ 07 мая 2020

Я пытаюсь закодировать нажимаемую карту, которая расширяется, когда пользователь нажимает на нее. Карточка содержит график, и я хотел бы, чтобы непрозрачность различных свойств была анимирована вместе с анимацией расширения. Я использую AnimatedBuilder со значением контроллера анимации, используемым для установки размера и непрозрачности. Я успешно могу анимировать ось y, но по какой-то причине видно, что оси x и метки оси x действуют странно и не анимируются должным образом. Я думаю, что это может быть ошибка в библиотеке, но подумал, что кто-то может решить эту проблему. Я использую charts_flutter: ^ 0.9.0 Спасибо за любую помощь или совет!

Используйте следующий код, чтобы увидеть проблему:

  • Значения на оси Y анимируются в и out (прозрачный, когда маленький, и видимый, когда расширен)
  • Значения на оси x действуют странно и иногда появляются, но непрозрачность никогда не анимируется

Если есть лучший способ Об этом, пожалуйста, дайте мне знать - поскольку внутри графа и в родительских виджетах есть ряд свойств, которые необходимо анимировать вместе - это всего лишь небольшой пример проблемы, с которой я столкнулся. 

import 'package:charts_flutter/flutter.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

void main() {
  runApp(AnimatingGraphCard());
}

class AnimatingGraphCard extends StatefulWidget {
  @override
  _AnimatingGraphCardState createState() => _AnimatingGraphCardState();
}

class _AnimatingGraphCardState extends State<AnimatingGraphCard>
    with SingleTickerProviderStateMixin {
  bool _expanded = false;

  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 1000),
      vsync: this,
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      color: Colors.white,
      home: AnimatedBuilder(
        animation: _controller,
        builder: (_, __) {
          return GestureDetector(
            onTap: () => setState(() {
              _controller.animateTo(_expanded ? 0 : 1);
              _expanded = !_expanded;
            }),
            child: Center(
              child: Card(
                child: Container(
                  width: 300 + (_controller.value * 100),
                  height: 200 + (_controller.value * 150),
                  child: MyGraph(animation: _controller.value),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

class MyGraph extends StatelessWidget {
  final double animation;

  MyGraph({
    this.animation,
  });

  @override
  Widget build(BuildContext context) {
    debugPrint("MarcinGraph");

    return TimeSeriesChart(
      _createDataSet(),
      defaultInteractions: false,
      domainAxis: DateTimeAxisSpec(
        renderSpec: GridlineRendererSpec(
          labelStyle: TextStyleSpec(
            color: ColorUtil.fromDartColor(Colors.blue.withOpacity(animation)),
          ),
        ),
        showAxisLine: false,
      ),
      primaryMeasureAxis: NumericAxisSpec(
        renderSpec: GridlineRendererSpec(
          labelAnchor: TickLabelAnchor.centered,
          labelStyle: TextStyleSpec(
            color: ColorUtil.fromDartColor(Colors.blue.withOpacity(animation)),
          ),
        ),
        showAxisLine: false,
      ),
      animate: false,
      dateTimeFactory: const LocalDateTimeFactory(),
    );
  }

  List<Series<Score, DateTime>> _createDataSet() {
    final chartData = [
      new Series<Score, DateTime>(
        id: 'Heart Rate',
        domainFn: (Score score, _) => score.date,
        measureFn: (Score score, _) => score.score,
        data: [
          Score(DateTime(2020, 2, 12), 4),
          Score(DateTime(2020, 2, 13), 8),
          Score(DateTime(2020, 2, 14), 7),
          Score(DateTime(2020, 2, 15), 12),
          Score(DateTime(2020, 2, 16), 6),
          Score(DateTime(2020, 2, 17), 9),
          Score(DateTime(2020, 2, 18), 11),
        ],
        colorFn: (_, __) => ColorUtil.fromDartColor(Colors.blue),
        strokeWidthPxFn: (_, __) => 1,
      )
    ];
    return chartData;
  }
}

class Score {
  final DateTime date;
  final int score;

  Score(this.date, this.score);
}

1 Ответ

0 голосов
/ 09 мая 2020

Добавление ключа к родительскому виджету графиков решило проблему.

...