千里之行,始于足下,整理一下flutter插件和使用示例,为flutter的生态做出一份贡献
1,折线图的使用
导入插件
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<StatefulWidget> createState() {
// TODO: implement createState
return ChartState();
}
}
class ChartState extends State<Chart> {
var isTileView = true;
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: (Text("图标库的使用")),
),
body:ListView(children: <Widget>[
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<LineSeries<_ChartData, num>> 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>>[
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<StatefulWidget> createState() {
// TODO: implement createState
return CalenderState();
}
}
class CalenderState extends State<Calender>{
@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: <Widget>[
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: <Widget>[
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
持续更新中。。。