Flutter Packages 第三方包把玩Demos聚合地

洋小洋同學發表於2019-11-28
FlutterPackage

序言

在寫Flutter過程中，藉助了一些給力的第三方包，欣賞了一些原始碼，很有吸引力，那麼本篇章就來帶大傢伙梳理一下價效比高，耐用的packages。Flutter 之旅會持續Update。希望你在下班上班的路上看到。

寫在前面

  • 本篇暫且放演示示例及完整的程式碼
  • 每個Demo，同步更新github
  • 擠出時間會為每個packages出掘金專欄

1.spider_chart

  • 當前版本：spider_chart 0.1.4

  • 功能特點：用起來很方便的一個雷達圖，只需傳資料就可

  • 關鍵詞：雷達圖，radar

  • 特點：UI簡易、功能薄弱

  • Demo 演示

    QuwiY4.md.png

  • 主介面完整程式碼

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 演示
    Flutter Packages 第三方包把玩Demos聚合地
  • 主介面完整程式碼
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,
      )
    ];
  }
}

複製程式碼

不妨看看

我絕對不會像某站的UP主一樣，逢人就喊“一鍵三連”，直到我遇見你……，所以，start呢

--END--

相關文章