Flutter Packages 第三方包把玩Demos聚合地在写Flutter过程中，借助了一些给力的第三方包，欣赏了

序言

在写Flutter过程中，借助了一些给力的第三方包，欣赏了一些源码，很有吸引力，那么本篇章就来带大家伙梳理一下性价比高，耐用的packages。Flutter 之旅会持续Update。希望你在下班上班的路上看到。

写在前面

本篇暂且放演示示例及完整的代码
每个Demo，同步更新github
挤出时间会为每个packages出掘金专栏

1.spider_chart

当前版本：spider_chart 0.1.4
功能特点：用起来很方便的一个雷达图，只需传数据就可
关键词：雷达图，radar
特点：UI简易、功能薄弱
Demo 演示
主界面完整代码

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Spider Chart Example',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Spider Chart Example'),
      ),
      body: Center(
        child: Container(
          width: 300,
          height: 300,
          child: SpiderChart(
              data: [49.98, 2.44, 0.82, 41.47, 5.29],
              maxValue: 100,
              colors: <Color>[
                Colors.red,
                Colors.orange,
                Colors.green,
                Colors.yellow,
                Colors.indigo,
              ],
              labels: <String>[
                "吃",
                "喝",
                "玩",
                "乐",
                "学",
              ]),
        ),
      ),
    );
  }
}

2.charts_flutter

当前版本：charts_flutter 0.8.1
功能特点：bar可以点击显示详情，及阴影遮罩，
关键词：条形图，单y轴,百分比图，percentage
Demo 演示
主界面完整代码

import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;
import './show_detail_page.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class Test extends StatefulWidget {
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  String year;
  int sales;
  bool flag = false; // 定义是否点击
  //点击柱状图触发的函数
  _onSelectionChanged(charts.SelectionModel model) {
    final selectedDatum = model.selectedDatum;
    print(selectedDatum.first.datum.year);
    print(selectedDatum.first.datum.sales);
    print(selectedDatum.first.series.displayName);
    setState(() {
      // 改变标记状态
      flag = true;
      //改变两个显示的数值
      year = selectedDatum.first.datum.year;
      sales = selectedDatum.first.datum.sales;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: ScreenUtil.getInstance().setWidth(700),
      height: ScreenUtil.getInstance().setHeight(500),
      decoration:
          BoxDecoration(border: Border.all(width: 1, color: Colors.red)),
      child: Stack(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
                border: Border.all(width: 1, color: Colors.blueAccent)),
            width: double.infinity,
            height: ScreenUtil.getInstance().setHeight(500),
            child: charts.BarChart(
              //通过下面获取数据传入
              ChartFlutterBean.createSampleData(),
              //配置项，以及设置触发的函数
              selectionModels: [
                charts.SelectionModelConfig(
                  type: charts.SelectionModelType.info,
                  changedListener: _onSelectionChanged,
                )
              ],
            ),
          ),
          _showMask(flag, 4.0)
        ],
      ),
    );
  }

  // 自定义方式显示蒙层
  _showMask(bool flag, double index) {
    var widthOffset = ScreenUtil.getInstance().setWidth(63);
    var initWidth = ScreenUtil.getInstance().setWidth(28);
    return flag == true
        ? Positioned(
            bottom: 22,
            left: initWidth * index + widthOffset,
            child: Container(
              color: Color.fromRGBO(0, 0, 0, 0.2),
              width: ScreenUtil.getInstance().setWidth(90),
              height: ScreenUtil.getInstance().setHeight(410),
            ),
          )
        : Container();
  }
}

//一下为组合柱状图数据部分
class OrdinalSales {
  final String year;
  final int sales;

  OrdinalSales(this.year, this.sales);
}

class ChartFlutterBean {
  static List<charts.Series<OrdinalSales, String>> createSampleData() {
    final data = [
      new OrdinalSales('吃', 0),
      new OrdinalSales('喝', 1),
      new OrdinalSales('玩', 0),
      new OrdinalSales('乐', 11),
      new OrdinalSales('学', 28),
    ];

    return [
      new charts.Series<OrdinalSales, String>(
        id: 'Sales',
        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
        domainFn: (OrdinalSales sales, _) => sales.year,
        measureFn: (OrdinalSales sales, _) => sales.sales,
        data: data,
      )
    ];
  }
}

完整代码：竖形图github完整代码

不妨看看

我绝对不会像某站的UP主一样，逢人就喊“一键三连”，直到我遇见你……，所以，start呢

--END--