如何从StreamBuilder创建列表

How To Create List from StreamBuilder

提问人:Erick Mahardika 提问时间:11/13/2023 最后编辑:Frank van PuffelenErick Mahardika 更新时间:11/13/2023 访问量:18

问:

如何使用以下变量在streambuilder中创建列表

你不能帮我列出这个变量来制作折线图

    class GraphScreen extends StatefulWidget {
  GraphScreen({super.key});

  @override
  State<GraphScreen> createState() => _GraphScreenState();
}

class _GraphScreenState extends State<GraphScreen> {
  late TooltipBehavior _tooltipBehavior;
  late final stream =
      FirebaseDatabase.instance.ref().child('data').onChildAdded;
  
  @override
  void initState() {
    _tooltipBehavior = TooltipBehavior(enable: true);
    super.initState();
  }

  Widget build(BuildContext context) {
    return Container(
      child: StreamBuilder(
        stream: stream,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            final data = snapshot.data?.snapshot.value as Map?;
            if (data == null) {
              return Text('No data');
            }

//how create from this variable to list 
 
            final sensorEc = data['EC'];
            final sensorPh = data['PH'];
            final sensorRtd = data['RTD'];
            final humidity = data['humidity'];
            final temperature = data['temperature'];
            final timeStamp = data['Ts'];
            final DateTime timeSTamp =
                DateTime.fromMillisecondsSinceEpoch(timeStamp); 

            return SafeArea(
              child: SfCartesianChart(
                zoomPanBehavior: ZoomPanBehavior(
                  enablePanning: true,
                  enablePinching: true,
                  enableDoubleTapZooming: true,
                  enableMouseWheelZooming: true,
                  maximumZoomLevel: 0.5,
                ),
                plotAreaBorderWidth: 0,
                primaryXAxis: DateTimeAxis(
                  intervalType: DateTimeIntervalType.days,
                  dateFormat: DateFormat.yMMMd(),
                  interval: 1,
                  majorGridLines: const MajorGridLines(width: 0),
                ),
                primaryYAxis: NumericAxis(
                  axisLine: const AxisLine(width: 0),
                  majorTickLines: const MajorTickLines(width: 0),
                ),
                legend: Legend(
                  isVisible: true,
                  position: LegendPosition.bottom,
                ),
                series: <LineSeries<dynamic, DateTime>>[
                  LineSeries<List, DateTime>(
                    name: 'EC',
                    legendIconType: LegendIconType.circle,
                    dataSource: items,
                    xValueMapper: timeSTamp,
                    yValueMapper: sensorEc,
                  ),
                ],
              ),
            );
          }
          if (snapshot.hasError) {
            print(snapshot.error.toString());
            return Text(snapshot.error.toString());
          }
          return Text('....');
        },
      ),
    );
  }
}

从该代码到列表以制作折线图 我使用了syncfusion_flutter_charts库,但它不起作用,它只显示 y 轴点而不是 x 轴点,任何人都可以帮助我在 flutter SfCartesianChart 中显示 json 数据或帮助我把这些数据放在其他 flutter 图表中

flutter firebase-realtime-database sfcartesianchart

评论

0赞 Randal Schwartz 11/13/2023
请注意,Dart/Flutter pub 中的 SyncFusion 产品不是开源的。它们是根据商业许可发布的,可能会使您或您的组织承担财务责任,并将影响代码的下游重用者。
0赞 Randal Schwartz 11/13/2023
而且,不要指望每个流触发器都执行特定的 StreamBuilder。这是不承诺的。

答: 暂无答案