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

---

序言

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

寫在前面

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

1.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完整程式碼

不妨看看

• Flutter實際專案開發中踩坑大合集（持續更新..）
• Flutter實戰 從頭擼一個「孤島」APP（No.2、閃屏Splash Page、引導頁）
• Flutter實戰 從頭擼一個「孤島」APP（No.1、專案初始化、螢幕適配）

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

---

--END--