Flutter日历、图表库等插件的使用

千里之行，始于足下，整理一下flutter插件和使用示例，为flutter的生态做出一份贡献

1，折线图的使用

折线图.png

导入插件

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  #日历
  flutter_calendar: ^0.0.8
  #数据图标插件
  syncfusion_flutter_charts: ^1.0.0-beta.1

使用示例

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

class Chart extends StatefulWidget {
  @override
  State createState() {
    // TODO: implement createState
    return ChartState();
  }
}

class ChartState extends State {
  var isTileView = true;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        appBar: AppBar(
          title: (Text("图标库的使用")),
        ),
        body:ListView(children: [
          SfCartesianChart(
            plotAreaBorderWidth: 0,
            title: ChartTitle(text: '数据标题'),
            legend: Legend(
                isVisible: isTileView ? false : true,
                overflowMode: LegendItemOverflowMode.wrap),
            primaryXAxis: NumericAxis(
                edgeLabelPlacement: EdgeLabelPlacement.shift,
                interval: 3,///横坐标距离
                majorGridLines: MajorGridLines(width: 0)),
            primaryYAxis: NumericAxis(
                labelFormat: '{value}%',
                axisLine: AxisLine(width: 0),
                majorTickLines: MajorTickLines(color: Colors.transparent)),
            series: getLineSeries(isTileView),
            tooltipBehavior: TooltipBehavior(enable: true),
          )
        ],),
    );
  }

  List> getLineSeries(bool isTileView) {
    final List<_ChartData> chartData = <_ChartData>[
      _ChartData(2005, 21, 28),
      _ChartData(2006, 24, 44),
      _ChartData(2007, 36, 48),
      _ChartData(2008, 38, 50),
      _ChartData(2009, 54, 66),
      _ChartData(2010, 57, 78),
      _ChartData(2011, 70, 84),
      _ChartData(2012, 50, 60),
      _ChartData(2013, 88, 70),
      _ChartData(2014, 60, 40),
      _ChartData(2015, 80, 60),
      _ChartData(2016, 40, 50),
      _ChartData(2017, 20, 10),
      _ChartData(2018, 90, 100),
      _ChartData(2019, 30, 50),
    ];
    return >[
      LineSeries<_ChartData, num>(
          animationDuration: 2500,
          enableTooltip: true,
          dataSource: chartData,
          xValueMapper: (_ChartData sales, _) => sales.x,
          yValueMapper: (_ChartData sales, _) => sales.y,
          width: 2,
          name: 'Germany',
          color: Colors.orange,
          markerSettings: MarkerSettings(isVisible: true)),
      LineSeries<_ChartData, num>(
          animationDuration: 2500,
          enableTooltip: true,
          dataSource: chartData,///数据源头
          width: 2, ///转折点大小
          name: 'England',///好像显示无效
//          legendItemText:"asdf",
//          isVisibleInLegend: true,
//          isVisible: true,
          color: Colors.red,//红色 颜色设置
          xValueMapper: (_ChartData sales, _) => sales.x,
          yValueMapper: (_ChartData sales, _) => sales.y2,
          markerSettings: MarkerSettings(isVisible: true)),
    ];
  }
}

class _ChartData {
  _ChartData(this.x, this.y, this.y2);
  final double x;
  final double y;
  final double y2;
}

具体参数我加了注释，运行尝试即可
参考文章：
1https://blog.csdn.net/qq_35905501/article/details/95055489

2,日历的使用
导入插件

  #日历
  flutter_calendar: ^0.0.8

使用示例

import 'package:flutter/material.dart';
import 'package:flutter_calendar/flutter_calendar.dart';

class Calender extends StatefulWidget{
  @override
  State createState() {
    // TODO: implement createState
    return CalenderState();
  }

}

class CalenderState extends State{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar:  AppBar(
        title: (Text("日历的使用")),
      ),
      body: Container(
        margin: EdgeInsets.symmetric(
          horizontal: 2.0,
          vertical: 10.0,
        ),
        child: ListView(
          children: [
            Calendar(
              onSelectedRangeChange: (range) =>
                  print("Range is ${range.item1}, ${range.item2}"),
              onDateSelected: (date) => handleNewDate(date),
            ),
            Divider(
              height: 50.0,
            ),
            _buildTimeLine('啊啊啊'),
            _buildTimeLine('啊啊啊'),
            _buildTimeLine('啊啊啊'),
            _buildTimeLine('啊啊啊'),
            _buildTimeLine('啊啊啊'),
          ],
        ),
      ),
    );
  }


  /// handle new date selected event
  void handleNewDate(date) {
    ///可以在这里通过改变日历更换数据
  }

  Widget _buildTimeLine(String message) {
    return Stack(
      children: [
        Padding(
          padding: const EdgeInsets.only(left: 50.0),
          child: Card(
            margin: EdgeInsets.all(20.0),
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 10.0),
              width: double.infinity,
              child: Text(message),
            ),
          ),
        ),
        Positioned(
          top: 0.0,
          bottom: 0.0,
          left: 35.0,
          child: Container(
            height: double.infinity,
            width: 2.0,
            color: Colors.blue,
          ),
        ),
        Positioned(
          top: 13.0,
          left: 22.5,
          child: Container(
            height: 26.0,
            width: 26.0,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.lightGreen,
            ),
            child: Container(
              margin: EdgeInsets.all(3.0),
              height: 26.0,
              width: 26.0,
              decoration:
              BoxDecoration(shape: BoxShape.circle, color: Colors.red),
            ),
          ),
        )
      ],
    );
  }
}

参考：
https://www.jianshu.com/p/21de67858b9d

持续更新中。。。