绘制:
1.在pubspec.yaml中引入:fl_chart: 0.55.2
2.绘制:
import 'package:jade/utils/JadeColors.dart';
import 'package:util/easy_loading_util.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
class MyLineChart extends StatefulWidget {
const MyLineChart({
Key key}) : super(key: key);
State<MyLineChart> createState() => _MyLineChartState();
}
class _MyLineChartState extends State<MyLineChart> with TickerProviderStateMixin{
List<String> _tabs = ['近7日','近1月','近3月'];
TabController _tabController;
List<Color> gradientColors = [
Colors.yellow,
Colors.yellow,
];
//进入后默认显示指示竖线和轨迹球的点
FlSpot _defaultShowFlSpot = FlSpot(8, 4);
//进入页面时默认显示的点上的竖线显隐开关
bool _showSpotLine = true;
List<String> get weekDays => const ['10.21', '10.22', '10.23', '10.24', '10.25', '10.26', '10.27'];
void initState() {
// TODO: implement initState
super.initState();
_tabController = TabController(
length: _tabs.length,vsync: this);
}
void dispose() {
// TODO: implement dispose
_tabController.dispose();
super.dispose();
}
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
_tabBarView(),
_lineChartWidget()
],
),
);
}
//选项卡
_tabBarView(){
return Container(
width: double.infinity,
height: 120.w,
margin: EdgeInsets.only(bottom: 20.w),
decoration: BoxDecoration(
color: JadeColors.lightGrey,
borderRadius: BorderRadius.circular(5)
),
child: Column(
children: [
Container(
height: 70.w,
child: TabBar(
isScrollable: false,
labelPadding: EdgeInsets.symmetric(horizontal: 0),
indicator: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5),
border: Border.all(width: 2,color: JadeColors.lightGrey)
),
labelColor: Color(0xff333333),
labelStyle: