在本文中,我們將學(xué)習(xí)如何在 Flutter 中實(shí)現(xiàn)漂亮的圖表。圖表是表示任何類型數(shù)據(jù)的絕佳視覺方式,無論是統(tǒng)計數(shù)據(jù)、財務(wù)數(shù)據(jù)還是統(tǒng)計數(shù)據(jù)。我們在很多 Flutter 應(yīng)用程序模板中使用圖表,我們將描述我們?nèi)绾螌?shí)現(xiàn)它們。
當(dāng)談到任何領(lǐng)域的數(shù)據(jù)可視化或表示時,我們首先想到的是圖表。圖表是一種顯示統(tǒng)計數(shù)據(jù)的有效且高效的機(jī)制,它不僅可以使數(shù)據(jù)更易于閱讀,還可以進(jìn)行比較和對比。它有助于以信息豐富的方式顯示數(shù)據(jù),使讀者更容易理解整體數(shù)據(jù)。
既然我們知道圖表在統(tǒng)計世界中的重要性,我們也應(yīng)該知道圖表對于在移動應(yīng)用程序中顯示復(fù)雜數(shù)據(jù)也非常有用。在這里,我們將學(xué)習(xí)如何向 Flutter 移動應(yīng)用程序添加圖表。
Flutter 移動應(yīng)用程序開發(fā)框架在當(dāng)前背景下蓬勃發(fā)展,它肯定會在不久的將來成為最先進(jìn)的移動應(yīng)用程序開發(fā)技術(shù)的中心舞臺。在本教程中,我們將使用charts_flutter包將不同的圖表添加到我們的 Flutter 應(yīng)用程序 UI。這個想法是安裝庫并使用它提供的不同圖表小部件。我們還將學(xué)習(xí)如何定義圖表小部件使用的系列列表值來直觀地表示數(shù)據(jù)。
那么,讓我們開始吧!
設(shè)置 Flutter Charts 項目
首先,我們需要創(chuàng)建一個新的 Flutter 項目。為此,請確保正確安裝 Flutter SDK 和其他與 Flutter 應(yīng)用程序開發(fā)相關(guān)的要求。如果一切設(shè)置正確,那么為了創(chuàng)建項目,我們可以簡單地在所需的本地目錄中運(yùn)行以下命令:
java:
flutter create chartpost
項目設(shè)置完成后,我們可以在項目目錄中導(dǎo)航并在終端中執(zhí)行以下命令,以在可用的模擬器或?qū)嶋H設(shè)備中運(yùn)行項目:
java:
flutter run
創(chuàng)建主頁 UI
現(xiàn)在,我們將創(chuàng)建一個主頁Scaffold。為此,我們需要創(chuàng)建一個名為home_page.dart的文件。在文件中,我們可以使用以下代碼片段中的代碼:
Dart:
import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;
class HomePage extends StatelessWidget {
@override
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.red,
title: Text("Bitcoin price from Jan to March (2021) "),
),
body: Center(
child: Text("Hello, Charts!")
),
);
}
}
在這里,我們返回了一個簡單的Scaffold小部件,其中包含一個應(yīng)用欄和一個來自名為 的無狀態(tài)小部件類的主體HomePage。
現(xiàn)在,我們需要在 main.dart 文件中導(dǎo)入這個無狀態(tài)小部件類,并將其分配給小部件的home選項,MaterialApp如下面的代碼片段所示:
Dart:
import 'package:chartpost/home.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
現(xiàn)在,如果我們重新運(yùn)行應(yīng)用程序,我們將在模擬器屏幕中得到以下結(jié)果:
添加 charts_flutter 插件
由于我們要向我們的應(yīng)用程序添加圖表,我們將使用名為charts_flutter的包。這個包是一個用 Dart 原生編寫的 Material Design 數(shù)據(jù)可視化庫。它為數(shù)據(jù)可視化提供了廣泛的圖表,這些圖表既輕巧又易于配置?,F(xiàn)在為了將這個庫安裝到我們的 flutter 項目中,我們需要按照下面的代碼片段中的指示將該charts_flutter: ^0.8.1行添加到我們的pubspec.yaml文件中:
java:
dependencies:
flutter:
sdk: flutter
charts_flutter: ^0.8.1
安裝成功后,我們就可以使用這個包提供的圖表小部件了。
Flutter 中的條形圖
在本節(jié)中,我們將學(xué)習(xí)如何向 Flutter 應(yīng)用程序添加條形圖。首先,我們將創(chuàng)建一個模型文件,該文件定義要在條形圖中顯示的數(shù)據(jù)的屬性。在這里,我們將命名文件bitcoin_price_series.dart。在里面,我們將定義一個名為的類BitcoinPriceSeries,它接受三個參數(shù):月份、價格和顏色。整體代碼實(shí)現(xiàn)如下面的代碼片段所示:
Dart:
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:chartpost/bitcoin_price_series.dart';
import 'package:flutter/material.dart';
class BitcoinPriceChart extends StatelessWidget {
final List<BitcoinPriceSeries> data;
BitcoinPriceChart({@required this.data});
@override
Widget build(BuildContext context) {
List<charts.Series<BitcoinPriceSeries, String>> series = [
charts.Series(
id: "Price",
data: data,
domainFn: (BitcoinPriceSeries series, _) => series.month,
measureFn: (BitcoinPriceSeries series, _) => series.price,
colorFn: (BitcoinPriceSeries series, _) => series.barColor)
];
現(xiàn)在,我們需要創(chuàng)建一個名為bitcoin_price_chart.dart的新文件來定義圖表結(jié)構(gòu)。在這里,我們將實(shí)現(xiàn)一個名為的無狀態(tài)小部件BitcoinPriceChart,它返回帶有系列值的條形圖。庫Series提供的配置 charts幫助我們定義每個系列的數(shù)據(jù)。下面的代碼片段提供了如何配置系列值的確切實(shí)現(xiàn):
Dart:
return Container(
height: 400,
padding: EdgeInsets.all(20),
child: Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Text(
"Bitcoin price from Jan to March (2021) ",
),
Expanded(
child:( charts.BarChart(series, animate: true)),
)
],
),
),
),
);
}
}
現(xiàn)在我們有了保存條形圖系列數(shù)據(jù)的列表數(shù)據(jù),我們可以將它應(yīng)用到 UI 模板?,F(xiàn)在,我們將返回一個Container小部件,其中Card小部件作為子部件,它包含BarChart以列表和animate布爾值作為參數(shù)的小部件。下面的代碼片段提供了整體實(shí)現(xiàn):
Dart:
import 'package:flutter/material.dart';
import 'package:chartpost/bitcoin_price_series.dart';
import 'package:chartpost/bitcoin_price_chart.dart';
import 'package:charts_flutter/flutter.dart' as charts;
現(xiàn)在,我們要將條形圖添加到我們的主頁。為此,我們需要將BitcoinPriceChart無狀態(tài)類小部件導(dǎo)入 home_page.dart 文件,如下面的代碼片段所示:
import 'package:flutter/material.dart'; import 'package:chartpost/bitcoin_price_series.dart'; import 'package:chartpost/bitcoin_price_chart.dart'; import 'package:charts_flutter/flutter.dart' as charts;
導(dǎo)入后,我們可以根據(jù)BitcoinPriceSeries模型定義存儲數(shù)據(jù)的列表,如下面的代碼片段所示:
Dart:
@override
Widget build(BuildContext context) {
final List<BitcoinPriceSeries> data = [
BitcoinPriceSeries(
month: "Jan",
price: 50000,
barColor: charts.ColorUtil.fromDartColor(Colors.red),
),
BitcoinPriceSeries(
month: "Feb",
price: 60000,
barColor: charts.ColorUtil.fromDartColor(Colors.blue),
),
BitcoinPriceSeries(
month: "March",
price: 58000,
barColor: charts.ColorUtil.fromDartColor(Colors.green),
),
];
最后,我們需要添加的BitcoinPriceChart窗口小部件到body的Scaffold在主頁如下圖所示的代碼片段繞過所需的列表數(shù)據(jù):
Dart:
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.red,
title: Text("Bitcoin price from Jan to March (2021) "),
),
body: Center(
child: BitcoinPriceChart(
data: data,
)
),
);
}
因此,我們將在主屏幕上獲得條形圖,如下面的模擬器屏幕截圖所示:
因此,我們已經(jīng)成功地將條形圖添加到我們的 Flutter 應(yīng)用程序中。
Flutter 中的餅圖
現(xiàn)在我們知道如何為條形圖配置數(shù)據(jù),我們也可以使用完全相同的系列列表數(shù)據(jù)輕松添加餅圖。條形圖數(shù)據(jù)系列和餅圖數(shù)據(jù)系列共享相同的數(shù)據(jù)格式。因此,我們可以簡單地使用提供系列列表和動畫布爾參數(shù)PieChart的charts庫提供的小部件添加餅圖,如下面的代碼片段所示:
Dart:
Expanded(
child:( charts.BarChart(series, animate: true)),
), Expanded(
child:( charts.PieChart(series, animate: true)),
)
請注意,此PieChart小部件直接添加到小部件內(nèi)部小部件下方的bitcoin_price_chart.dart文件中。BarChartColumn
因此,我們也成功地將餅圖添加到我們的 Flutter 應(yīng)用程序中。
結(jié)論
本教程的主要目標(biāo)是演示如何在 Flutter 中實(shí)現(xiàn)各種圖表。charts_flutter庫的可用性使向我們的 Flutter 應(yīng)用程序添加圖表變得更加容易?;谙盗械臄?shù)據(jù)配置以及用于各種小部件的輕量級小部件也使這個庫非常強(qiáng)大和高效。在這里,我們學(xué)習(xí)了如何添加條形圖和餅圖。我們還學(xué)習(xí)了如何配置基于系列的數(shù)據(jù)以提供給圖表小部件。
現(xiàn)在的挑戰(zhàn)是向 Flutter 應(yīng)用程序添加其他類型的圖表。添加圖表小部件的概念是相同的,但數(shù)據(jù)配置可能略有不同。