无法理解如何在flutter中使用fl_chart中的SizedPicture类

编程问答 2022-07-26

问题描述

首先，我要为不尊重问题的结构表示歉意，这是我的第一个问题，我是一个开始。

在flutter应用程序中，im正在尝试添加svg。文件作为由fl_chart软件包提供的示例折线图的背景，但我无法这样做，我无法理解原因。而且我也无法在打包文档中找到明确的说明或示例。尝试添加SizedPicture类时，拒绝传递picture参数。我已经尝试了许多不同的方法，但是我找不到答案或不知道我在想什么。

预先感谢您的理解和帮助。

//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),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),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),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,2.8),1.2),2.6),3.9),colors: [
        const Color(0xffaa4cfc),belowBarData: BarAreaData(show: false,colors: [
        const Color(0x00aa4cfc),]),);
    final LineChartBarData lineChartBarData3 = LineChartBarData(
      spots: [
        FlSpot(1,1.9),FlSpot(6,3),1.3),2.5),colors: const [
        Color(0xff27b6fc),);
    return [
      lineChartBarData1,lineChartBarData2,lineChartBarData3,];
  }

  LineChartData sampleData2() {
    return LineChartData(
      lineTouchData: LineTouchData(
        enabled: false,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 '';
          },borderData: FlBorderData(
          show: true,border: const Border(
            bottom: BorderSide(
              color: Color(0xff4e4965),left: BorderSide(
              color: Colors.transparent,right: BorderSide(
              color: Colors.transparent,top: BorderSide(
              color: Colors.transparent,)),maxY: 6,lineBarsData: linesBarData2(),);
  }

  List<LineChartBarData> linesBarData2() {
    return [
      LineChartBarData(
        spots: [
          FlSpot(1,4),5),curveSmoothness: 0,colors: const [
          Color(0x444af699),barWidth: 4,dotData: FlDotData(
          show: false,belowBarData: BarAreaData(
          show: false,LineChartBarData(
        spots: [
          FlSpot(1,colors: const [
          Color(0x99aa4cfc),belowBarData: BarAreaData(show: true,colors: [
          const Color(0x33aa4cfc),3.8),3.3),4.5),colors: const [
          Color(0x4427b6fc),barWidth: 2,dotData: FlDotData(show: true),];
  }
}

解决方法

您可以在下面复制粘贴运行完整代码
来自Stack上https://github.com/dnfield/flutter_svg/blob/master/example/assets/dart.svg的以下工作演示dart.svg LineChart文件
您可以使用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,);
              }
          }
        })
  ]

工作演示

enter image description here

完整代码

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,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,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,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,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,15.79,2.32,20.85,6.95c5.06,4.64,7.59,10.95,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,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,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,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,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,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,23.87L3.68,68.64c-0.77,1.63-1.79,4.46-1.79,6.27
            c0,3.91,1.72,7.91,10.75l21.46,21.3c0.51,0.63,1.11,1.27,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,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),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(),FutureBuilder(
                        future: _future,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}',);
                              } else {
                                return Image.memory(
                                  snapshot.data,);
                              }
                          }
                        })
                  ]),)),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),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),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,2.8),1.2),2.6),3.9),colors: [
        const Color(0xffaa4cfc),belowBarData: BarAreaData(show: false,colors: [
        const Color(0x00aa4cfc),]),);
    final LineChartBarData lineChartBarData3 = LineChartBarData(
      spots: [
        FlSpot(1,1.9),FlSpot(6,3),1.3),2.5),colors: const [
        Color(0xff27b6fc),);
    return [
      lineChartBarData1,lineChartBarData2,lineChartBarData3,];
  }

  LineChartData sampleData2() {
    return LineChartData(
      lineTouchData: LineTouchData(
        enabled: false,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 '';
          },borderData: FlBorderData(
          show: true,border: const Border(
            bottom: BorderSide(
              color: Color(0xff4e4965),left: BorderSide(
              color: Colors.transparent,right: BorderSide(
              color: Colors.transparent,top: BorderSide(
              color: Colors.transparent,maxY: 6,lineBarsData: linesBarData2(),);
  }

  List<LineChartBarData> linesBarData2() {
    return [
      LineChartBarData(
        spots: [
          FlSpot(1,4),5),curveSmoothness: 0,colors: const [
          Color(0x444af699),barWidth: 4,dotData: FlDotData(
          show: false,belowBarData: BarAreaData(
          show: false,LineChartBarData(
        spots: [
          FlSpot(1,colors: const [
          Color(0x99aa4cfc),belowBarData: BarAreaData(show: true,colors: [
          const Color(0x33aa4cfc),3.8),3.3),4.5),colors: const [
          Color(0x4427b6fc),barWidth: 2,dotData: FlDotData(show: true),];
  }
}

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-packages

相关问答

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog....
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下...
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://bl...
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起...
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct...