Как сделать динамический график во флаттере?

Question

Здравствуйте. Я попытался сделать простой график с трепетом с датой по оси X и данными по оси Y.Когда я нажимаю кнопку данных увеличивается на текущую дату.Первая цель завершена с кодом ниже.Но сейчас я не знаю, как сделать график более динамичным, я хочу статистику моей нажатой кнопки для каждого нового дня.Я не знаю, как динамически добавлять новый столбец данных для каждого нового дня.

import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:intl/intl.dart';
void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class ClicksPerYear {
  final String year;
  final int clicks;
  final charts.Color color;

  ClicksPerYear(this.year, this.clicks, Color color)
      : this.color = new charts.Color(
      r: color.red, g: color.green, b: color.blue, a: color.alpha);
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  var currentTime;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    var data = [

      new ClicksPerYear('2015', 3, Colors.red),
      new ClicksPerYear('2016', 7, Colors.orange),
      new ClicksPerYear('2017', 42, Colors.yellow),
      new ClicksPerYear('$currentTime', _counter, Colors.green),
    ];

    var series = [
      new charts.Series(
        domainFn: (ClicksPerYear clickData, _) => clickData.year,
        measureFn: (ClicksPerYear clickData, _) => clickData.clicks,
        colorFn: (ClicksPerYear clickData, _) => clickData.color,
        id: 'Clicks',
        data: data,

      ),
    ];
    var chart = new charts.BarChart(
      series,
      animate: true,
    );

    var chartWidget = new Padding(
      padding: new EdgeInsets.all(32.0),
      child: new SizedBox(
        height: 200.0,
        child: chart,
      ),
    );

    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text(
              'You have pushed the button this many times:',
            ),
            new Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
            chartWidget,
          ],
        ),
      ),

      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            DateTime now = DateTime.now();
            currentTime = DateFormat('dd/MM/yyyy').format(now);
            _incrementCounter();
          });
        },
        child: Icon(Icons.add,),

      ),

    );
  }
}

Answer 1

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

1) Состояние объекта.

Вы использовали счетчик, предоставленный в первом примере флаттера.этот счетчик является переменной-членом родительского виджета, и доступен только один счетчик.поэтому вы должны сделать другие столбцы статичными!что не кажется хорошим.Преобразование его в Список или Карту решит это, но лучше держать значение внутри самого объекта.

например, предположим, что вы хотите использовать данные 2016 года на другой странице.Вы должны получить данные из родительского виджета и передать их на новую страницу.Но если вы удерживаете щелчки внутри объекта, вам просто нужно передать сам объект.

2) Локальные переменные внутри метода Build

Определен список data в начале метода сборки.в этом случае всякий раз, когда виджет перестраивает сам себя, он инициирует список данных.что не кажется хорошим!список доступен и любые изменения должны быть применены к нему.его уточнение может удалить предыдущие изменения.

3) Использование карты вместо Списка

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

Проверьте исправленный код и дайте мне знать, если у вас есть какие-либо вопросы по этому поводу:

import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:intl/intl.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class ClicksPerYear {
  final String year;
  int clicks;
  final charts.Color color;

  ClicksPerYear(this.year, this.clicks, Color color)
      : this.color = new charts.Color(
            r: color.red, g: color.green, b: color.blue, a: color.alpha);

  incrementClick() {
    clicks++;
  }
}

class _MyHomePageState extends State<MyHomePage> {
  var currentTime = DateFormat('dd/MM/yyyy').format(DateTime.now());
  Map<String, ClicksPerYear> data;

  @override
  void initState() {
    data = {
      '2015': ClicksPerYear('2015', 3, Colors.red),
      '2016': ClicksPerYear('2016', 7, Colors.orange),
      '2017': ClicksPerYear('2017', 42, Colors.yellow),
      '$currentTime': ClicksPerYear('$currentTime', 0, Colors.green),
    };
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    var series = [
      new charts.Series(
          domainFn: (ClicksPerYear clickData, _) => clickData.year,
          measureFn: (ClicksPerYear clickData, _) => clickData.clicks,
          colorFn: (ClicksPerYear clickData, _) => clickData.color,
          id: 'Clicks',
          data: data.values.toList()),
    ];
    var chart = new charts.BarChart(
      series,
      animate: true,
    );

    var chartWidget = new Padding(
      padding: new EdgeInsets.all(32.0),
      child: new SizedBox(
        height: 200.0,
        child: chart,
      ),
    );

    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(child: chartWidget),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: FloatingActionButton(
              onPressed: () {
                setState(() {
                  data.putIfAbsent(
                      '2012', () => ClicksPerYear('2012', 42, Colors.teal));
                });
              },
              child: Icon(
                Icons.add,
              ),
              backgroundColor: Colors.red,
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: FloatingActionButton(
              onPressed: () {
                setState(() {
                  DateTime now = DateTime.now();
                  currentTime = DateFormat('dd/MM/yyyy').format(now);
                  data[currentTime].incrementClick();
                });
              },
              child: Icon(
                Icons.add,
              ),
            ),
          ),
        ],
      ),
    );
  }
}