无法理解如何在 flutter 中使用 fl_chart 中的 SizedPicture class
Cant undestand how to use SizedPicture class from fl_chart in flutter
首先我想为不尊重问题的结构而道歉，这是我的第一个问题，我是初学者。
在 flutter 应用程序中，我正在尝试添加 svg。文件作为 fl_chart 包提供的示例折线图的背景，但我没有这样做，我不明白为什么。而且我也无法在包文档中找到明确的说明或示例。尝试添加 SizedPicture class 时，传递图片参数被拒绝。我尝试了很多不同的东西，但我找不到答案或不明白我错过了什么。
在此先感谢您的理解和帮助。
//flutter code
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
class LineChartSample1 extends StatefulWidget {
@override
State<StatefulWidget> createState() => LineChartSample1State();
}
class LineChartSample1State extends State<LineChartSample1> {
static const routeName = '/learn_screen';
Future<SizedPicture> loadSvg() async {
const String rawSvg = 'map';
final DrawableRoot svgRoot = await svg.fromSvgString(rawSvg, rawSvg);
final sizedPicture = SizedPicture(svgRoot.toPicture(), 14, 14);
return sizedPicture;
}
bool isShowingMainData;
@override
void initState() {
super.initState();
isShowingMainData = true;
}
@override
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: 1.23,
child: Container(
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(18)),
gradient: LinearGradient(
colors: const [
Color(0xff2c274c),
Color(0xff46426c),
],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
),
),
child: Stack(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
const SizedBox(
height: 37,
),
const Text(
'Unfold Shop 2018',
style: TextStyle(
color: Color(0xff827daa),
fontSize: 16,
),
textAlign: TextAlign.center,
),
const SizedBox(
height: 4,
),
const Text(
'Monthly Sales',
style: TextStyle(
color: Colors.white,
fontSize: 32,
fontWeight: FontWeight.bold,
letterSpacing: 2),
textAlign: TextAlign.center,
),
const SizedBox(
height: 37,
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(right: 16.0, left: 6.0),
child: LineChart(
isShowingMainData ? sampleData1() : sampleData2(),
swapAnimationDuration: const Duration(milliseconds: 250),
),SizedPicture( sizedPicture, 100, 100)
),
),
const SizedBox(
height: 10,
),
],
),
IconButton(
icon: Icon(
Icons.refresh,
color: Colors.white.withOpacity(isShowingMainData ? 1.0 : 0.5),
),
onPressed: () {
setState(() {
isShowingMainData = !isShowingMainData;
});
},
)
],
),
),
);
}
LineChartData sampleData1() {
return LineChartData(
lineTouchData: LineTouchData(
touchTooltipData: LineTouchTooltipData(
tooltipBgColor: Colors.blueGrey.withOpacity(0.8),
),
touchCallback: (LineTouchResponse touchResponse) {},
handleBuiltInTouches: true,
),
gridData: FlGridData(
show: false,
),
titlesData: FlTitlesData(
bottomTitles: SideTitles(
showTitles: true,
reservedSize: 22,
textStyle: const TextStyle(
color: Color(0xff72719b),
fontWeight: FontWeight.bold,
fontSize: 16,
),
margin: 10,
getTitles: (value) {
switch (value.toInt()) {
case 2:
return 'SEPT';
case 7:
return 'OCT';
case 12:
return 'DEC';
}
return '';
},
),
leftTitles: SideTitles(
showTitles: true,
textStyle: const TextStyle(
color: Color(0xff75729e),
fontWeight: FontWeight.bold,
fontSize: 14,
),
getTitles: (value) {
switch (value.toInt()) {
case 1:
return '1m';
case 2:
return '2m';
case 3:
return '3m';
case 4:
return '5m';
}
return '';
},
margin: 8,
reservedSize: 30,
),
),
borderData: FlBorderData(
show: true,
border: const Border(
bottom: BorderSide(
color: Color(0xff4e4965),
width: 4,
),
left: BorderSide(
color: Colors.transparent,
),
right: BorderSide(
color: Colors.transparent,
),
top: BorderSide(
color: Colors.transparent,
),
),
),
minX: 0,
maxX: 14,
maxY: 4,
minY: 0,
lineBarsData: linesBarData1(),
);
}
List<LineChartBarData> linesBarData1() {
final LineChartBarData lineChartBarData1 = LineChartBarData(
spots: [
FlSpot(1, 1),
FlSpot(3, 1.5),
FlSpot(5, 1.4),
FlSpot(7, 3.4),
FlSpot(10, 2),
FlSpot(12, 2.2),
FlSpot(13, 1.8),
],
isCurved: true,
colors: [
const Color(0xff4af699),
],
barWidth: 8,
isStrokeCapRound: true,
dotData: FlDotData(
show: false,
),
belowBarData: BarAreaData(
show: false,
),
);
final LineChartBarData lineChartBarData2 = LineChartBarData(
spots: [
FlSpot(1, 1),
FlSpot(3, 2.8),
FlSpot(7, 1.2),
FlSpot(10, 2.8),
FlSpot(12, 2.6),
FlSpot(13, 3.9),
],
isCurved: true,
colors: [
const Color(0xffaa4cfc),
],
barWidth: 8,
isStrokeCapRound: true,
dotData: FlDotData(
show: false,
),
belowBarData: BarAreaData(show: false, colors: [
const Color(0x00aa4cfc),
]),
);
final LineChartBarData lineChartBarData3 = LineChartBarData(
spots: [
FlSpot(1, 2.8),
FlSpot(3, 1.9),
FlSpot(6, 3),
FlSpot(10, 1.3),
FlSpot(13, 2.5),
],
isCurved: true,
colors: const [
Color(0xff27b6fc),
],
barWidth: 8,
isStrokeCapRound: true,
dotData: FlDotData(
show: false,
),
belowBarData: BarAreaData(
show: false,
),
);
return [
lineChartBarData1,
lineChartBarData2,
lineChartBarData3,
];
}
LineChartData sampleData2() {
return LineChartData(
lineTouchData: LineTouchData(
enabled: false,
),
gridData: FlGridData(
show: false,
),
titlesData: FlTitlesData(
bottomTitles: SideTitles(
showTitles: true,
reservedSize: 22,
textStyle: const TextStyle(
color: Color(0xff72719b),
fontWeight: FontWeight.bold,
fontSize: 16,
),
margin: 10,
getTitles: (value) {
switch (value.toInt()) {
case 2:
return 'SEPT';
case 7:
return 'OCT';
case 12:
return 'DEC';
}
return '';
},
),
leftTitles: SideTitles(
showTitles: true,
textStyle: const TextStyle(
color: Color(0xff75729e),
fontWeight: FontWeight.bold,
fontSize: 14,
),
getTitles: (value) {
switch (value.toInt()) {
case 1:
return '1m';
case 2:
return '2m';
case 3:
return '3m';
case 4:
return '5m';
case 5:
return '6m';
}
return '';
},
margin: 8,
reservedSize: 30,
),
),
borderData: FlBorderData(
show: true,
border: const Border(
bottom: BorderSide(
color: Color(0xff4e4965),
width: 4,
),
left: BorderSide(
color: Colors.transparent,
),
right: BorderSide(
color: Colors.transparent,
),
top: BorderSide(
color: Colors.transparent,
),
)),
minX: 0,
maxX: 14,
maxY: 6,
minY: 0,
lineBarsData: linesBarData2(),
);
}
List<LineChartBarData> linesBarData2() {
return [
LineChartBarData(
spots: [
FlSpot(1, 1),
FlSpot(3, 4),
FlSpot(5, 1.8),
FlSpot(7, 5),
FlSpot(10, 2),
FlSpot(12, 2.2),
FlSpot(13, 1.8),
],
isCurved: true,
curveSmoothness: 0,
colors: const [
Color(0x444af699),
],
barWidth: 4,
isStrokeCapRound: true,
dotData: FlDotData(
show: false,
),
belowBarData: BarAreaData(
show: false,
),
),
LineChartBarData(
spots: [
FlSpot(1, 1),
FlSpot(3, 2.8),
FlSpot(7, 1.2),
FlSpot(10, 2.8),
FlSpot(12, 2.6),
FlSpot(13, 3.9),
],
isCurved: true,
colors: const [
Color(0x99aa4cfc),
],
barWidth: 4,
isStrokeCapRound: true,
dotData: FlDotData(
show: false,
),
belowBarData: BarAreaData(show: true, colors: [
const Color(0x33aa4cfc),
]),
),
LineChartBarData(
spots: [
FlSpot(1, 3.8),
FlSpot(3, 1.9),
FlSpot(6, 5),
FlSpot(10, 3.3),
FlSpot(13, 4.5),
],
isCurved: true,
curveSmoothness: 0,
colors: const [
Color(0x4427b6fc),
],
barWidth: 2,
isStrokeCapRound: true,
dotData: FlDotData(show: true),
belowBarData: BarAreaData(
show: false,
),
),
];
}
}
您可以复制粘贴下面的运行完整代码
LineChart
上 https://github.com/dnfield/flutter_svg/blob/master/example/assets/dart.svg 的以下工作演示 Stack dart.svg 文件
您可以使用 Future<Uint8List> loadSvg() 和 FutureBuilder
代码片段
Future<Uint8List> loadSvg() async {
final String rawSvg =
...
final DrawableRoot svgRoot = await svg.fromSvgString(rawSvg, rawSvg);
final ui.Picture picture = svgRoot.toPicture();
ui.Image image = await picture.toImage(300, 300);
ByteData byteData =
await image.toByteData(format: ui.ImageByteFormat.png);
Uint8List bytes = byteData.buffer.asUint8List();
return bytes;
}
...
Stack(children: <Widget>[
LineChart(
isShowingMainData ? sampleData1() : sampleData2(),
swapAnimationDuration: const Duration(milliseconds: 250),
),
FutureBuilder(
future: _future,
builder: (context, AsyncSnapshot<Uint8List> snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.none:
return Text('none');
case ConnectionState.waiting:
return Center(child: CircularProgressIndicator());
case ConnectionState.active:
return Text('');
case ConnectionState.done:
if (snapshot.hasError) {
return Text(
'${snapshot.error}',
style: TextStyle(color: Colors.red),
);
} else {
return Image.memory(
snapshot.data,
width: 300,
height: 300,
);
}
}
})
]
工作演示
完整代码
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'dart:ui' as ui;
class LineChartSample1 extends StatefulWidget {
@override
State<StatefulWidget> createState() => LineChartSample1State();
}
class LineChartSample1State extends State<LineChartSample1> {
static const routeName = '/learn_screen';
Future<Uint8List> _future;
Future<Uint8List> loadSvg() async {
final String rawSvg =
'''
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 439 137.29" enable-background="new 0 0 439 137.29" xml:space="preserve">
<g>
<g opacity="0.54">
<path d="M207.08,20.2h27.55c9.35,0,17.51,1.93,24.49,5.8c6.97,3.87,12.33,9.25,16.07,16.13c3.74,6.89,5.61,14.79,5.61,23.72
s-1.87,16.83-5.61,23.72s-9.1,12.26-16.07,16.13c-6.97,3.87-15.13,5.8-24.49,5.8h-27.55V20.2z M234.63,101.19
c10.8,0,19.36-3.1,25.7-9.31c6.33-6.21,9.5-14.88,9.5-26.02s-3.17-19.81-9.5-26.02c-6.33-6.21-14.9-9.31-25.7-9.31H217.8v70.65
h16.83V101.19z"/>
<path d="M297.49,110.75c-3.74-1.87-6.63-4.44-8.67-7.72c-2.04-3.27-3.06-6.99-3.06-11.16c0-6.89,2.59-12.26,7.78-16.13
c5.18-3.87,11.73-5.8,19.64-5.8c3.91,0,7.54,0.43,10.9,1.28s5.93,1.83,7.72,2.93V70.2c0-4.85-1.7-8.74-5.1-11.67
c-3.4-2.93-7.7-4.4-12.88-4.4c-3.66,0-7.01,0.79-10.08,2.36c-3.06,1.57-5.48,3.76-7.27,6.57l-8.16-6.12
c2.55-3.91,6.06-6.97,10.52-9.18c4.46-2.21,9.42-3.32,14.86-3.32c8.84,0,15.79,2.32,20.85,6.95c5.06,4.64,7.59,10.95,7.59,18.94
v41.19H331.8v-9.31h-0.51c-1.87,3.15-4.68,5.82-8.42,8.03c-3.74,2.21-7.95,3.32-12.63,3.32
C305.49,113.56,301.24,112.62,297.49,110.75z M321.47,101.19c3.14-1.87,5.65-4.38,7.52-7.52s2.81-6.59,2.81-10.33
c-2.04-1.36-4.55-2.47-7.52-3.32c-2.98-0.85-6.12-1.28-9.44-1.28c-5.95,0-10.44,1.23-13.45,3.7c-3.02,2.47-4.53,5.66-4.53,9.56
c0,3.57,1.36,6.46,4.08,8.67c2.72,2.21,6.16,3.32,10.33,3.32C314.92,103.99,318.33,103.06,321.47,101.19z"/>
<path d="M353.57,47.5h10.33v10.33h0.51c1.53-3.83,4.12-6.8,7.78-8.93c3.65-2.12,7.65-3.19,11.99-3.19c1.87,0,3.44,0.13,4.72,0.38
v11.1c-1.45-0.34-3.4-0.51-5.87-0.51c-5.53,0-10.01,1.83-13.45,5.48c-3.44,3.66-5.17,8.42-5.17,14.28v36.09h-10.84V47.5
L353.57,47.5z M420.89,112.26c-2.25-0.86-4.14-2.03-5.68-3.51c-1.7-1.64-2.98-3.55-3.83-5.71c-0.85-2.16-1.28-4.8-1.28-7.92V56.3
h-11.35v-9.82h11.35V28.12h10.84v18.36h15.81v9.82h-15.81v36.24c0,3.65,0.68,6.34,2.04,8.08c1.61,1.91,3.95,2.87,7.01,2.87
c2.46,0,4.85-0.72,7.14-2.17v10.59c-1.28,0.59-2.57,1.02-3.89,1.28s-3,0.38-5.04,0.38C425.59,113.56,423.15,113.12,420.89,112.26z
"/>
</g>
<g>
<path fill="#01579B" d="M29.64,108.94L6.36,85.66c-2.76-2.84-4.48-6.84-4.48-10.75c0-1.81,1.02-4.64,1.79-6.27l21.49-44.77
L29.64,108.94z"/>
<path fill="#40C4FF" d="M109.34,28.35L86.06,5.07c-2.03-2.04-6.27-4.48-9.85-4.48c-3.08,0-6.1,0.62-8.06,1.79L25.17,23.87
L109.34,28.35z"/>
<polygon fill="#40C4FF" points="57.4,136.7 113.82,136.7 113.82,112.52 71.73,99.09 33.23,112.52 "/>
<path fill="#29B6F6" d="M25.17,96.41c0,7.18,0.9,8.95,4.48,12.54l3.58,3.58h80.59l-39.4-44.77L25.17,23.88V96.41z"/>
<path fill="#01579B" d="M96.8,23.87H25.16l88.65,88.65h24.18V57l-28.65-28.65C105.32,24.31,101.74,23.87,96.8,23.87z"/>
<path opacity="0.2" fill="#FFFFFF" enable-background="new " d="M30.54,109.84c-3.58-3.6-4.48-7.14-4.48-13.43V24.77l-0.9-0.9
V96.4C25.17,102.7,25.17,104.44,30.54,109.84l2.69,2.69l0,0L30.54,109.84z"/>
<polygon opacity="0.2" fill="#263238" enable-background="new " points="137.1,56.11 137.1,111.63 112.92,111.63
113.82,112.52 138,112.52 138,57.01 "/>
<path opacity="0.2" fill="#FFFFFF" enable-background="new " d="M109.34,28.35c-4.44-4.44-8.08-4.48-13.43-4.48H25.17l0.9,0.9
h69.85C98.58,24.77,105.33,24.32,109.34,28.35L109.34,28.35z"/>
<radialGradient id="SVGID_1_" cx="69.955" cy="60.8864" r="68.065" gradientTransform="matrix(1 0 0 -1 0 129.5328)" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.1"/>
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
</radialGradient>
<path opacity="0.2" fill="url(#SVGID_1_)" enable-background="new " d="M137.1,56.11l-27.76-27.76L86.06,5.07
c-2.03-2.04-6.27-4.48-9.85-4.48c-3.08,0-6.1,0.62-8.06,1.79L25.17,23.87L3.68,68.64c-0.77,1.63-1.79,4.46-1.79,6.27
c0,3.91,1.72,7.91,4.48,10.75l21.46,21.3c0.51,0.63,1.11,1.27,1.83,1.98l0.9,0.9l2.69,2.69l23.28,23.28l0.9,0.9h55.52h0.9v-24.18
h24.18v-0.06V57.01L137.1,56.11z"/>
</g>
</g>
</svg>
''';
final DrawableRoot svgRoot = await svg.fromSvgString(rawSvg, rawSvg);
final ui.Picture picture = svgRoot.toPicture();
ui.Image image = await picture.toImage(300, 300);
ByteData byteData =
await image.toByteData(format: ui.ImageByteFormat.png);
Uint8List bytes = byteData.buffer.asUint8List();
return bytes;
}
bool isShowingMainData;
@override
void initState() {
super.initState();
_future = loadSvg();
isShowingMainData = true;
}
@override
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: 1.23,
child: Container(
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(18)),
gradient: LinearGradient(
colors: const [
Color(0xff2c274c),
Color(0xff46426c),
],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
),
),
child: Stack(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
const SizedBox(
height: 37,
),
const Text(
'Unfold Shop 2018',
style: TextStyle(
color: Color(0xff827daa),
fontSize: 16,
),
textAlign: TextAlign.center,
),
const SizedBox(
height: 4,
),
const Text(
'Monthly Sales',
style: TextStyle(
color: Colors.white,
fontSize: 32,
fontWeight: FontWeight.bold,
letterSpacing: 2),
textAlign: TextAlign.center,
),
const SizedBox(
height: 37,
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(right: 16.0, left: 6.0),
child: Stack(children: <Widget>[
LineChart(
isShowingMainData ? sampleData1() : sampleData2(),
swapAnimationDuration: const Duration(milliseconds: 250),
),
FutureBuilder(
future: _future,
builder: (context, AsyncSnapshot<Uint8List> snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.none:
return Text('none');
case ConnectionState.waiting:
return Center(child: CircularProgressIndicator());
case ConnectionState.active:
return Text('');
case ConnectionState.done:
if (snapshot.hasError) {
return Text(
'${snapshot.error}',
style: TextStyle(color: Colors.red),
);
} else {
return Image.memory(
snapshot.data,
width: 300,
height: 300,
);
}
}
})
]),
)),
const SizedBox(
height: 10,
),
],
),
IconButton(
icon: Icon(
Icons.refresh,
color: Colors.white.withOpacity(isShowingMainData ? 1.0 : 0.5),
),
onPressed: () {
setState(() {
isShowingMainData = !isShowingMainData;
});
},
)
],
),
),
);
}
LineChartData sampleData1() {
return LineChartData(
lineTouchData: LineTouchData(
touchTooltipData: LineTouchTooltipData(
tooltipBgColor: Colors.blueGrey.withOpacity(0.8),
),
touchCallback: (LineTouchResponse touchResponse) {},
handleBuiltInTouches: true,
),
gridData: FlGridData(
show: false,
),
titlesData: FlTitlesData(
bottomTitles: SideTitles(
showTitles: true,
reservedSize: 22,
textStyle: const TextStyle(
color: Color(0xff72719b),
fontWeight: FontWeight.bold,
fontSize: 16,
),
margin: 10,
getTitles: (value) {
switch (value.toInt()) {
case 2:
return 'SEPT';
case 7:
return 'OCT';
case 12:
return 'DEC';
}
return '';
},
),
leftTitles: SideTitles(
showTitles: true,
textStyle: const TextStyle(
color: Color(0xff75729e),
fontWeight: FontWeight.bold,
fontSize: 14,
),
getTitles: (value) {
switch (value.toInt()) {
case 1:
return '1m';
case 2:
return '2m';
case 3:
return '3m';
case 4:
return '5m';
}
return '';
},
margin: 8,
reservedSize: 30,
),
),
borderData: FlBorderData(
show: true,
border: const Border(
bottom: BorderSide(
color: Color(0xff4e4965),
width: 4,
),
left: BorderSide(
color: Colors.transparent,
),
right: BorderSide(
color: Colors.transparent,
),
top: BorderSide(
color: Colors.transparent,
),
),
),
minX: 0,
maxX: 14,
maxY: 4,
minY: 0,
lineBarsData: linesBarData1(),
);
}
List<LineChartBarData> linesBarData1() {
final LineChartBarData lineChartBarData1 = LineChartBarData(
spots: [
FlSpot(1, 1),
FlSpot(3, 1.5),
FlSpot(5, 1.4),
FlSpot(7, 3.4),
FlSpot(10, 2),
FlSpot(12, 2.2),
FlSpot(13, 1.8),
],
isCurved: true,
colors: [
const Color(0xff4af699),
],
barWidth: 8,
isStrokeCapRound: true,
dotData: FlDotData(
show: false,
),
belowBarData: BarAreaData(
show: false,
),
);
final LineChartBarData lineChartBarData2 = LineChartBarData(
spots: [
FlSpot(1, 1),
FlSpot(3, 2.8),
FlSpot(7, 1.2),
FlSpot(10, 2.8),
FlSpot(12, 2.6),
FlSpot(13, 3.9),
],
isCurved: true,
colors: [
const Color(0xffaa4cfc),
],
barWidth: 8,
isStrokeCapRound: true,
dotData: FlDotData(
show: false,
),
belowBarData: BarAreaData(show: false, colors: [
const Color(0x00aa4cfc),
]),
);
final LineChartBarData lineChartBarData3 = LineChartBarData(
spots: [
FlSpot(1, 2.8),
FlSpot(3, 1.9),
FlSpot(6, 3),
FlSpot(10, 1.3),
FlSpot(13, 2.5),
],
isCurved: true,
colors: const [
Color(0xff27b6fc),
],
barWidth: 8,
isStrokeCapRound: true,
dotData: FlDotData(
show: false,
),
belowBarData: BarAreaData(
show: false,
),
);
return [
lineChartBarData1,
lineChartBarData2,
lineChartBarData3,
];
}
LineChartData sampleData2() {
return LineChartData(
lineTouchData: LineTouchData(
enabled: false,
),
gridData: FlGridData(
show: false,
),
titlesData: FlTitlesData(
bottomTitles: SideTitles(
showTitles: true,
reservedSize: 22,
textStyle: const TextStyle(
color: Color(0xff72719b),
fontWeight: FontWeight.bold,
fontSize: 16,
),
margin: 10,
getTitles: (value) {
switch (value.toInt()) {
case 2:
return 'SEPT';
case 7:
return 'OCT';
case 12:
return 'DEC';
}
return '';
},
),
leftTitles: SideTitles(
showTitles: true,
textStyle: const TextStyle(
color: Color(0xff75729e),
fontWeight: FontWeight.bold,
fontSize: 14,
),
getTitles: (value) {
switch (value.toInt()) {
case 1:
return '1m';
case 2:
return '2m';
case 3:
return '3m';
case 4:
return '5m';
case 5:
return '6m';
}
return '';
},
margin: 8,
reservedSize: 30,
),
),
borderData: FlBorderData(
show: true,
border: const Border(
bottom: BorderSide(
color: Color(0xff4e4965),
width: 4,
),
left: BorderSide(
color: Colors.transparent,
),
right: BorderSide(
color: Colors.transparent,
),
top: BorderSide(
color: Colors.transparent,
),
)),
minX: 0,
maxX: 14,
maxY: 6,
minY: 0,
lineBarsData: linesBarData2(),
);
}
List<LineChartBarData> linesBarData2() {
return [
LineChartBarData(
spots: [
FlSpot(1, 1),
FlSpot(3, 4),
FlSpot(5, 1.8),
FlSpot(7, 5),
FlSpot(10, 2),
FlSpot(12, 2.2),
FlSpot(13, 1.8),
],
isCurved: true,
curveSmoothness: 0,
colors: const [
Color(0x444af699),
],
barWidth: 4,
isStrokeCapRound: true,
dotData: FlDotData(
show: false,
),
belowBarData: BarAreaData(
show: false,
),
),
LineChartBarData(
spots: [
FlSpot(1, 1),
FlSpot(3, 2.8),
FlSpot(7, 1.2),
FlSpot(10, 2.8),
FlSpot(12, 2.6),
FlSpot(13, 3.9),
],
isCurved: true,
colors: const [
Color(0x99aa4cfc),
],
barWidth: 4,
isStrokeCapRound: true,
dotData: FlDotData(
show: false,
),
belowBarData: BarAreaData(show: true, colors: [
const Color(0x33aa4cfc),
]),
),
LineChartBarData(
spots: [
FlSpot(1, 3.8),
FlSpot(3, 1.9),
FlSpot(6, 5),
FlSpot(10, 3.3),
FlSpot(13, 4.5),
],
isCurved: true,
curveSmoothness: 0,
colors: const [
Color(0x4427b6fc),
],
barWidth: 2,
isStrokeCapRound: true,
dotData: FlDotData(show: true),
belowBarData: BarAreaData(
show: false,
),
),
];
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: "test",),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
LineChartSample1()
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
首先我想为不尊重问题的结构而道歉，这是我的第一个问题，我是初学者。
在 flutter 应用程序中，我正在尝试添加 svg。文件作为 fl_chart 包提供的示例折线图的背景，但我没有这样做，我不明白为什么。而且我也无法在包文档中找到明确的说明或示例。尝试添加 SizedPicture class 时，传递图片参数被拒绝。我尝试了很多不同的东西，但我找不到答案或不明白我错过了什么。
在此先感谢您的理解和帮助。
//flutter code
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
class LineChartSample1 extends StatefulWidget {
@override
State<StatefulWidget> createState() => LineChartSample1State();
}
class LineChartSample1State extends State<LineChartSample1> {
static const routeName = '/learn_screen';
Future<SizedPicture> loadSvg() async {
const String rawSvg = 'map';
final DrawableRoot svgRoot = await svg.fromSvgString(rawSvg, rawSvg);
final sizedPicture = SizedPicture(svgRoot.toPicture(), 14, 14);
return sizedPicture;
}
bool isShowingMainData;
@override
void initState() {
super.initState();
isShowingMainData = true;
}
@override
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: 1.23,
child: Container(
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(18)),
gradient: LinearGradient(
colors: const [
Color(0xff2c274c),
Color(0xff46426c),
],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
),
),
child: Stack(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
const SizedBox(
height: 37,
),
const Text(
'Unfold Shop 2018',
style: TextStyle(
color: Color(0xff827daa),
fontSize: 16,
),
textAlign: TextAlign.center,
),
const SizedBox(
height: 4,
),
const Text(
'Monthly Sales',
style: TextStyle(
color: Colors.white,
fontSize: 32,
fontWeight: FontWeight.bold,
letterSpacing: 2),
textAlign: TextAlign.center,
),
const SizedBox(
height: 37,
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(right: 16.0, left: 6.0),
child: LineChart(
isShowingMainData ? sampleData1() : sampleData2(),
swapAnimationDuration: const Duration(milliseconds: 250),
),SizedPicture( sizedPicture, 100, 100)
),
),
const SizedBox(
height: 10,
),
],
),
IconButton(
icon: Icon(
Icons.refresh,
color: Colors.white.withOpacity(isShowingMainData ? 1.0 : 0.5),
),
onPressed: () {
setState(() {
isShowingMainData = !isShowingMainData;
});
},
)
],
),
),
);
}
LineChartData sampleData1() {
return LineChartData(
lineTouchData: LineTouchData(
touchTooltipData: LineTouchTooltipData(
tooltipBgColor: Colors.blueGrey.withOpacity(0.8),
),
touchCallback: (LineTouchResponse touchResponse) {},
handleBuiltInTouches: true,
),
gridData: FlGridData(
show: false,
),
titlesData: FlTitlesData(
bottomTitles: SideTitles(
showTitles: true,
reservedSize: 22,
textStyle: const TextStyle(
color: Color(0xff72719b),
fontWeight: FontWeight.bold,
fontSize: 16,
),
margin: 10,
getTitles: (value) {
switch (value.toInt()) {
case 2:
return 'SEPT';
case 7:
return 'OCT';
case 12:
return 'DEC';
}
return '';
},
),
leftTitles: SideTitles(
showTitles: true,
textStyle: const TextStyle(
color: Color(0xff75729e),
fontWeight: FontWeight.bold,
fontSize: 14,
),
getTitles: (value) {
switch (value.toInt()) {
case 1:
return '1m';
case 2:
return '2m';
case 3:
return '3m';
case 4:
return '5m';
}
return '';
},
margin: 8,
reservedSize: 30,
),
),
borderData: FlBorderData(
show: true,
border: const Border(
bottom: BorderSide(
color: Color(0xff4e4965),
width: 4,
),
left: BorderSide(
color: Colors.transparent,
),
right: BorderSide(
color: Colors.transparent,
),
top: BorderSide(
color: Colors.transparent,
),
),
),
minX: 0,
maxX: 14,
maxY: 4,
minY: 0,
lineBarsData: linesBarData1(),
);
}
List<LineChartBarData> linesBarData1() {
final LineChartBarData lineChartBarData1 = LineChartBarData(
spots: [
FlSpot(1, 1),
FlSpot(3, 1.5),
FlSpot(5, 1.4),
FlSpot(7, 3.4),
FlSpot(10, 2),
FlSpot(12, 2.2),
FlSpot(13, 1.8),
],
isCurved: true,
colors: [
const Color(0xff4af699),
],
barWidth: 8,
isStrokeCapRound: true,
dotData: FlDotData(
show: false,
),
belowBarData: BarAreaData(
show: false,
),
);
final LineChartBarData lineChartBarData2 = LineChartBarData(
spots: [
FlSpot(1, 1),
FlSpot(3, 2.8),
FlSpot(7, 1.2),
FlSpot(10, 2.8),
FlSpot(12, 2.6),
FlSpot(13, 3.9),
],
isCurved: true,
colors: [
const Color(0xffaa4cfc),
],
barWidth: 8,
isStrokeCapRound: true,
dotData: FlDotData(
show: false,
),
belowBarData: BarAreaData(show: false, colors: [
const Color(0x00aa4cfc),
]),
);
final LineChartBarData lineChartBarData3 = LineChartBarData(
spots: [
FlSpot(1, 2.8),
FlSpot(3, 1.9),
FlSpot(6, 3),
FlSpot(10, 1.3),
FlSpot(13, 2.5),
],
isCurved: true,
colors: const [
Color(0xff27b6fc),
],
barWidth: 8,
isStrokeCapRound: true,
dotData: FlDotData(
show: false,
),
belowBarData: BarAreaData(
show: false,
),
);
return [
lineChartBarData1,
lineChartBarData2,
lineChartBarData3,
];
}
LineChartData sampleData2() {
return LineChartData(
lineTouchData: LineTouchData(
enabled: false,
),
gridData: FlGridData(
show: false,
),
titlesData: FlTitlesData(
bottomTitles: SideTitles(
showTitles: true,
reservedSize: 22,
textStyle: const TextStyle(
color: Color(0xff72719b),
fontWeight: FontWeight.bold,
fontSize: 16,
),
margin: 10,
getTitles: (value) {
switch (value.toInt()) {
case 2:
return 'SEPT';
case 7:
return 'OCT';
case 12:
return 'DEC';
}
return '';
},
),
leftTitles: SideTitles(
showTitles: true,
textStyle: const TextStyle(
color: Color(0xff75729e),
fontWeight: FontWeight.bold,
fontSize: 14,
),
getTitles: (value) {
switch (value.toInt()) {
case 1:
return '1m';
case 2:
return '2m';
case 3:
return '3m';
case 4:
return '5m';
case 5:
return '6m';
}
return '';
},
margin: 8,
reservedSize: 30,
),
),
borderData: FlBorderData(
show: true,
border: const Border(
bottom: BorderSide(
color: Color(0xff4e4965),
width: 4,
),
left: BorderSide(
color: Colors.transparent,
),
right: BorderSide(
color: Colors.transparent,
),
top: BorderSide(
color: Colors.transparent,
),
)),
minX: 0,
maxX: 14,
maxY: 6,
minY: 0,
lineBarsData: linesBarData2(),
);
}
List<LineChartBarData> linesBarData2() {
return [
LineChartBarData(
spots: [
FlSpot(1, 1),
FlSpot(3, 4),
FlSpot(5, 1.8),
FlSpot(7, 5),
FlSpot(10, 2),
FlSpot(12, 2.2),
FlSpot(13, 1.8),
],
isCurved: true,
curveSmoothness: 0,
colors: const [
Color(0x444af699),
],
barWidth: 4,
isStrokeCapRound: true,
dotData: FlDotData(
show: false,
),
belowBarData: BarAreaData(
show: false,
),
),
LineChartBarData(
spots: [
FlSpot(1, 1),
FlSpot(3, 2.8),
FlSpot(7, 1.2),
FlSpot(10, 2.8),
FlSpot(12, 2.6),
FlSpot(13, 3.9),
],
isCurved: true,
colors: const [
Color(0x99aa4cfc),
],
barWidth: 4,
isStrokeCapRound: true,
dotData: FlDotData(
show: false,
),
belowBarData: BarAreaData(show: true, colors: [
const Color(0x33aa4cfc),
]),
),
LineChartBarData(
spots: [
FlSpot(1, 3.8),
FlSpot(3, 1.9),
FlSpot(6, 5),
FlSpot(10, 3.3),
FlSpot(13, 4.5),
],
isCurved: true,
curveSmoothness: 0,
colors: const [
Color(0x4427b6fc),
],
barWidth: 2,
isStrokeCapRound: true,
dotData: FlDotData(show: true),
belowBarData: BarAreaData(
show: false,
),
),
];
}
}
您可以复制粘贴下面的运行完整代码
LineChart
上 https://github.com/dnfield/flutter_svg/blob/master/example/assets/dart.svg 的以下工作演示 Stack dart.svg 文件
您可以使用 Future<Uint8List> loadSvg() 和 FutureBuilder
代码片段
Future<Uint8List> loadSvg() async {
final String rawSvg =
...
final DrawableRoot svgRoot = await svg.fromSvgString(rawSvg, rawSvg);
final ui.Picture picture = svgRoot.toPicture();
ui.Image image = await picture.toImage(300, 300);
ByteData byteData =
await image.toByteData(format: ui.ImageByteFormat.png);
Uint8List bytes = byteData.buffer.asUint8List();
return bytes;
}
...
Stack(children: <Widget>[
LineChart(
isShowingMainData ? sampleData1() : sampleData2(),
swapAnimationDuration: const Duration(milliseconds: 250),
),
FutureBuilder(
future: _future,
builder: (context, AsyncSnapshot<Uint8List> snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.none:
return Text('none');
case ConnectionState.waiting:
return Center(child: CircularProgressIndicator());
case ConnectionState.active:
return Text('');
case ConnectionState.done:
if (snapshot.hasError) {
return Text(
'${snapshot.error}',
style: TextStyle(color: Colors.red),
);
} else {
return Image.memory(
snapshot.data,
width: 300,
height: 300,
);
}
}
})
]
工作演示
完整代码
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'dart:ui' as ui;
class LineChartSample1 extends StatefulWidget {
@override
State<StatefulWidget> createState() => LineChartSample1State();
}
class LineChartSample1State extends State<LineChartSample1> {
static const routeName = '/learn_screen';
Future<Uint8List> _future;
Future<Uint8List> loadSvg() async {
final String rawSvg =
'''
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 439 137.29" enable-background="new 0 0 439 137.29" xml:space="preserve">
<g>
<g opacity="0.54">
<path d="M207.08,20.2h27.55c9.35,0,17.51,1.93,24.49,5.8c6.97,3.87,12.33,9.25,16.07,16.13c3.74,6.89,5.61,14.79,5.61,23.72
s-1.87,16.83-5.61,23.72s-9.1,12.26-16.07,16.13c-6.97,3.87-15.13,5.8-24.49,5.8h-27.55V20.2z M234.63,101.19
c10.8,0,19.36-3.1,25.7-9.31c6.33-6.21,9.5-14.88,9.5-26.02s-3.17-19.81-9.5-26.02c-6.33-6.21-14.9-9.31-25.7-9.31H217.8v70.65
h16.83V101.19z"/>
<path d="M297.49,110.75c-3.74-1.87-6.63-4.44-8.67-7.72c-2.04-3.27-3.06-6.99-3.06-11.16c0-6.89,2.59-12.26,7.78-16.13
c5.18-3.87,11.73-5.8,19.64-5.8c3.91,0,7.54,0.43,10.9,1.28s5.93,1.83,7.72,2.93V70.2c0-4.85-1.7-8.74-5.1-11.67
c-3.4-2.93-7.7-4.4-12.88-4.4c-3.66,0-7.01,0.79-10.08,2.36c-3.06,1.57-5.48,3.76-7.27,6.57l-8.16-6.12
c2.55-3.91,6.06-6.97,10.52-9.18c4.46-2.21,9.42-3.32,14.86-3.32c8.84,0,15.79,2.32,20.85,6.95c5.06,4.64,7.59,10.95,7.59,18.94
v41.19H331.8v-9.31h-0.51c-1.87,3.15-4.68,5.82-8.42,8.03c-3.74,2.21-7.95,3.32-12.63,3.32
C305.49,113.56,301.24,112.62,297.49,110.75z M321.47,101.19c3.14-1.87,5.65-4.38,7.52-7.52s2.81-6.59,2.81-10.33
c-2.04-1.36-4.55-2.47-7.52-3.32c-2.98-0.85-6.12-1.28-9.44-1.28c-5.95,0-10.44,1.23-13.45,3.7c-3.02,2.47-4.53,5.66-4.53,9.56
c0,3.57,1.36,6.46,4.08,8.67c2.72,2.21,6.16,3.32,10.33,3.32C314.92,103.99,318.33,103.06,321.47,101.19z"/>
<path d="M353.57,47.5h10.33v10.33h0.51c1.53-3.83,4.12-6.8,7.78-8.93c3.65-2.12,7.65-3.19,11.99-3.19c1.87,0,3.44,0.13,4.72,0.38
v11.1c-1.45-0.34-3.4-0.51-5.87-0.51c-5.53,0-10.01,1.83-13.45,5.48c-3.44,3.66-5.17,8.42-5.17,14.28v36.09h-10.84V47.5
L353.57,47.5z M420.89,112.26c-2.25-0.86-4.14-2.03-5.68-3.51c-1.7-1.64-2.98-3.55-3.83-5.71c-0.85-2.16-1.28-4.8-1.28-7.92V56.3
h-11.35v-9.82h11.35V28.12h10.84v18.36h15.81v9.82h-15.81v36.24c0,3.65,0.68,6.34,2.04,8.08c1.61,1.91,3.95,2.87,7.01,2.87
c2.46,0,4.85-0.72,7.14-2.17v10.59c-1.28,0.59-2.57,1.02-3.89,1.28s-3,0.38-5.04,0.38C425.59,113.56,423.15,113.12,420.89,112.26z
"/>
</g>
<g>
<path fill="#01579B" d="M29.64,108.94L6.36,85.66c-2.76-2.84-4.48-6.84-4.48-10.75c0-1.81,1.02-4.64,1.79-6.27l21.49-44.77
L29.64,108.94z"/>
<path fill="#40C4FF" d="M109.34,28.35L86.06,5.07c-2.03-2.04-6.27-4.48-9.85-4.48c-3.08,0-6.1,0.62-8.06,1.79L25.17,23.87
L109.34,28.35z"/>
<polygon fill="#40C4FF" points="57.4,136.7 113.82,136.7 113.82,112.52 71.73,99.09 33.23,112.52 "/>
<path fill="#29B6F6" d="M25.17,96.41c0,7.18,0.9,8.95,4.48,12.54l3.58,3.58h80.59l-39.4-44.77L25.17,23.88V96.41z"/>
<path fill="#01579B" d="M96.8,23.87H25.16l88.65,88.65h24.18V57l-28.65-28.65C105.32,24.31,101.74,23.87,96.8,23.87z"/>
<path opacity="0.2" fill="#FFFFFF" enable-background="new " d="M30.54,109.84c-3.58-3.6-4.48-7.14-4.48-13.43V24.77l-0.9-0.9
V96.4C25.17,102.7,25.17,104.44,30.54,109.84l2.69,2.69l0,0L30.54,109.84z"/>
<polygon opacity="0.2" fill="#263238" enable-background="new " points="137.1,56.11 137.1,111.63 112.92,111.63
113.82,112.52 138,112.52 138,57.01 "/>
<path opacity="0.2" fill="#FFFFFF" enable-background="new " d="M109.34,28.35c-4.44-4.44-8.08-4.48-13.43-4.48H25.17l0.9,0.9
h69.85C98.58,24.77,105.33,24.32,109.34,28.35L109.34,28.35z"/>
<radialGradient id="SVGID_1_" cx="69.955" cy="60.8864" r="68.065" gradientTransform="matrix(1 0 0 -1 0 129.5328)" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.1"/>
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
</radialGradient>
<path opacity="0.2" fill="url(#SVGID_1_)" enable-background="new " d="M137.1,56.11l-27.76-27.76L86.06,5.07
c-2.03-2.04-6.27-4.48-9.85-4.48c-3.08,0-6.1,0.62-8.06,1.79L25.17,23.87L3.68,68.64c-0.77,1.63-1.79,4.46-1.79,6.27
c0,3.91,1.72,7.91,4.48,10.75l21.46,21.3c0.51,0.63,1.11,1.27,1.83,1.98l0.9,0.9l2.69,2.69l23.28,23.28l0.9,0.9h55.52h0.9v-24.18
h24.18v-0.06V57.01L137.1,56.11z"/>
</g>
</g>
</svg>
''';
final DrawableRoot svgRoot = await svg.fromSvgString(rawSvg, rawSvg);
final ui.Picture picture = svgRoot.toPicture();
ui.Image image = await picture.toImage(300, 300);
ByteData byteData =
await image.toByteData(format: ui.ImageByteFormat.png);
Uint8List bytes = byteData.buffer.asUint8List();
return bytes;
}
bool isShowingMainData;
@override
void initState() {
super.initState();
_future = loadSvg();
isShowingMainData = true;
}
@override
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: 1.23,
child: Container(
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(18)),
gradient: LinearGradient(
colors: const [
Color(0xff2c274c),
Color(0xff46426c),
],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
),
),
child: Stack(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
const SizedBox(
height: 37,
),
const Text(
'Unfold Shop 2018',
style: TextStyle(
color: Color(0xff827daa),
fontSize: 16,
),
textAlign: TextAlign.center,
),
const SizedBox(
height: 4,
),
const Text(
'Monthly Sales',
style: TextStyle(
color: Colors.white,
fontSize: 32,
fontWeight: FontWeight.bold,
letterSpacing: 2),
textAlign: TextAlign.center,
),
const SizedBox(
height: 37,
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(right: 16.0, left: 6.0),
child: Stack(children: <Widget>[
LineChart(
isShowingMainData ? sampleData1() : sampleData2(),
swapAnimationDuration: const Duration(milliseconds: 250),
),
FutureBuilder(
future: _future,
builder: (context, AsyncSnapshot<Uint8List> snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.none:
return Text('none');
case ConnectionState.waiting:
return Center(child: CircularProgressIndicator());
case ConnectionState.active:
return Text('');
case ConnectionState.done:
if (snapshot.hasError) {
return Text(
'${snapshot.error}',
style: TextStyle(color: Colors.red),
);
} else {
return Image.memory(
snapshot.data,
width: 300,
height: 300,
);
}
}
})
]),
)),
const SizedBox(
height: 10,
),
],
),
IconButton(
icon: Icon(
Icons.refresh,
color: Colors.white.withOpacity(isShowingMainData ? 1.0 : 0.5),
),
onPressed: () {
setState(() {
isShowingMainData = !isShowingMainData;
});
},
)
],
),
),
);
}
LineChartData sampleData1() {
return LineChartData(
lineTouchData: LineTouchData(
touchTooltipData: LineTouchTooltipData(
tooltipBgColor: Colors.blueGrey.withOpacity(0.8),
),
touchCallback: (LineTouchResponse touchResponse) {},
handleBuiltInTouches: true,
),
gridData: FlGridData(
show: false,
),
titlesData: FlTitlesData(
bottomTitles: SideTitles(
showTitles: true,
reservedSize: 22,
textStyle: const TextStyle(
color: Color(0xff72719b),
fontWeight: FontWeight.bold,
fontSize: 16,
),
margin: 10,
getTitles: (value) {
switch (value.toInt()) {
case 2:
return 'SEPT';
case 7:
return 'OCT';
case 12:
return 'DEC';
}
return '';
},
),
leftTitles: SideTitles(
showTitles: true,
textStyle: const TextStyle(
color: Color(0xff75729e),
fontWeight: FontWeight.bold,
fontSize: 14,
),
getTitles: (value) {
switch (value.toInt()) {
case 1:
return '1m';
case 2:
return '2m';
case 3:
return '3m';
case 4:
return '5m';
}
return '';
},
margin: 8,
reservedSize: 30,
),
),
borderData: FlBorderData(
show: true,
border: const Border(
bottom: BorderSide(
color: Color(0xff4e4965),
width: 4,
),
left: BorderSide(
color: Colors.transparent,
),
right: BorderSide(
color: Colors.transparent,
),
top: BorderSide(
color: Colors.transparent,
),
),
),
minX: 0,
maxX: 14,
maxY: 4,
minY: 0,
lineBarsData: linesBarData1(),
);
}
List<LineChartBarData> linesBarData1() {
final LineChartBarData lineChartBarData1 = LineChartBarData(
spots: [
FlSpot(1, 1),
FlSpot(3, 1.5),
FlSpot(5, 1.4),
FlSpot(7, 3.4),
FlSpot(10, 2),
FlSpot(12, 2.2),
FlSpot(13, 1.8),
],
isCurved: true,
colors: [
const Color(0xff4af699),
],
barWidth: 8,
isStrokeCapRound: true,
dotData: FlDotData(
show: false,
),
belowBarData: BarAreaData(
show: false,
),
);
final LineChartBarData lineChartBarData2 = LineChartBarData(
spots: [
FlSpot(1, 1),
FlSpot(3, 2.8),
FlSpot(7, 1.2),
FlSpot(10, 2.8),
FlSpot(12, 2.6),
FlSpot(13, 3.9),
],
isCurved: true,
colors: [
const Color(0xffaa4cfc),
],
barWidth: 8,
isStrokeCapRound: true,
dotData: FlDotData(
show: false,
),
belowBarData: BarAreaData(show: false, colors: [
const Color(0x00aa4cfc),
]),
);
final LineChartBarData lineChartBarData3 = LineChartBarData(
spots: [
FlSpot(1, 2.8),
FlSpot(3, 1.9),
FlSpot(6, 3),
FlSpot(10, 1.3),
FlSpot(13, 2.5),
],
isCurved: true,
colors: const [
Color(0xff27b6fc),
],
barWidth: 8,
isStrokeCapRound: true,
dotData: FlDotData(
show: false,
),
belowBarData: BarAreaData(
show: false,
),
);
return [
lineChartBarData1,
lineChartBarData2,
lineChartBarData3,
];
}
LineChartData sampleData2() {
return LineChartData(
lineTouchData: LineTouchData(
enabled: false,
),
gridData: FlGridData(
show: false,
),
titlesData: FlTitlesData(
bottomTitles: SideTitles(
showTitles: true,
reservedSize: 22,
textStyle: const TextStyle(
color: Color(0xff72719b),
fontWeight: FontWeight.bold,
fontSize: 16,
),
margin: 10,
getTitles: (value) {
switch (value.toInt()) {
case 2:
return 'SEPT';
case 7:
return 'OCT';
case 12:
return 'DEC';
}
return '';
},
),
leftTitles: SideTitles(
showTitles: true,
textStyle: const TextStyle(
color: Color(0xff75729e),
fontWeight: FontWeight.bold,
fontSize: 14,
),
getTitles: (value) {
switch (value.toInt()) {
case 1:
return '1m';
case 2:
return '2m';
case 3:
return '3m';
case 4:
return '5m';
case 5:
return '6m';
}
return '';
},
margin: 8,
reservedSize: 30,
),
),
borderData: FlBorderData(
show: true,
border: const Border(
bottom: BorderSide(
color: Color(0xff4e4965),
width: 4,
),
left: BorderSide(
color: Colors.transparent,
),
right: BorderSide(
color: Colors.transparent,
),
top: BorderSide(
color: Colors.transparent,
),
)),
minX: 0,
maxX: 14,
maxY: 6,
minY: 0,
lineBarsData: linesBarData2(),
);
}
List<LineChartBarData> linesBarData2() {
return [
LineChartBarData(
spots: [
FlSpot(1, 1),
FlSpot(3, 4),
FlSpot(5, 1.8),
FlSpot(7, 5),
FlSpot(10, 2),
FlSpot(12, 2.2),
FlSpot(13, 1.8),
],
isCurved: true,
curveSmoothness: 0,
colors: const [
Color(0x444af699),
],
barWidth: 4,
isStrokeCapRound: true,
dotData: FlDotData(
show: false,
),
belowBarData: BarAreaData(
show: false,
),
),
LineChartBarData(
spots: [
FlSpot(1, 1),
FlSpot(3, 2.8),
FlSpot(7, 1.2),
FlSpot(10, 2.8),
FlSpot(12, 2.6),
FlSpot(13, 3.9),
],
isCurved: true,
colors: const [
Color(0x99aa4cfc),
],
barWidth: 4,
isStrokeCapRound: true,
dotData: FlDotData(
show: false,
),
belowBarData: BarAreaData(show: true, colors: [
const Color(0x33aa4cfc),
]),
),
LineChartBarData(
spots: [
FlSpot(1, 3.8),
FlSpot(3, 1.9),
FlSpot(6, 5),
FlSpot(10, 3.3),
FlSpot(13, 4.5),
],
isCurved: true,
curveSmoothness: 0,
colors: const [
Color(0x4427b6fc),
],
barWidth: 2,
isStrokeCapRound: true,
dotData: FlDotData(show: true),
belowBarData: BarAreaData(
show: false,
),
),
];
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: "test",),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
LineChartSample1()
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}