怎么在Flutter中實現漂亮的圖表

這篇文章主要介紹了怎么在Flutter中實現漂亮的圖表，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

設置 Flutter Charts 項目

首先，我們需要創建一個新的 Flutter 項目。為此，請確保正確安裝 Flutter SDK 和其他與 Flutter 應用程序開發相關的要求。如果一切設置正確，那么為了創建項目，我們可以簡單地在所需的本地目錄中運行以下命令：

java：

flutter create chartpost

項目設置完成后，我們可以在項目目錄中導航并在終端中執行以下命令，以在可用的模擬器或實際設備中運行項目：

java：

flutter run

創建主頁 UI

現在，我們將創建一個主頁Scaffold。為此，我們需要創建一個名為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小部件，其中包含一個應用欄和一個來自名為 的無狀態小部件類的主體HomePage。

現在，我們需要在 main.dart 文件中導入這個無狀態小部件類，并將其分配給小部件的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(),
    );
  }
}

現在，如果我們重新運行應用程序，我們將在模擬器屏幕中得到以下結果：

添加 charts_flutter 插件

由于我們要向我們的應用程序添加圖表，我們將使用名為charts_flutter的包。這個包是一個用 Dart 原生編寫的 Material Design 數據可視化庫。它為數據可視化提供了廣泛的圖表，這些圖表既輕巧又易于配置。現在為了將這個庫安裝到我們的 flutter 項目中，我們需要按照下面的代碼片段中的指示將該charts_flutter: ^0.8.1行添加到我們的pubspec.yaml文件中：

java：

dependencies:
  flutter:
    sdk: flutter
  charts_flutter: ^0.8.1

安裝成功后，我們就可以使用這個包提供的圖表小部件了。

Flutter 中的條形圖

在本節中，我們將學習如何向 Flutter 應用程序添加條形圖。首先，我們將創建一個模型文件，該文件定義要在條形圖中顯示的數據的屬性。在這里，我們將命名文件bitcoin_price_series.dart。在里面，我們將定義一個名為的類BitcoinPriceSeries，它接受三個參數：月份、價格和顏色。整體代碼實現如下面的代碼片段所示：

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)
    ];

現在，我們需要創建一個名為bitcoin_price_chart.dart的新文件來定義圖表結構。在這里，我們將實現一個名為的無狀態小部件BitcoinPriceChart，它返回帶有系列值的條形圖。庫Series提供的配置 charts幫助我們定義每個系列的數據。下面的代碼片段提供了如何配置系列值的確切實現：

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)),               
              )
            ],
          ),
        ),
      ),
    );
  }
}

現在我們有了保存條形圖系列數據的列表數據，我們可以將它應用到 UI 模板。現在，我們將返回一個Container小部件，其中Card小部件作為子部件，它包含BarChart以列表和animate布爾值作為參數的小部件。下面的代碼片段提供了整體實現：

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;

現在，我們要將條形圖添加到我們的主頁。為此，我們需要將BitcoinPriceChart無狀態類小部件導入 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;

導入后，我們可以根據BitcoinPriceSeries模型定義存儲數據的列表，如下面的代碼片段所示：

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在主頁如下圖所示的代碼片段繞過所需的列表數據：

Dart：

return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
        title: Text("Bitcoin price from Jan to March (2021) "),
      ),
      body: Center(
        child: BitcoinPriceChart(
      data: data,
    )
        ),
    );
  }

因此，我們將在主屏幕上獲得條形圖，如下面的模擬器屏幕截圖所示：

因此，我們已經成功地將條形圖添加到我們的 Flutter 應用程序中。

Flutter 中的餅圖

現在我們知道如何為條形圖配置數據，我們也可以使用完全相同的系列列表數據輕松添加餅圖。條形圖數據系列和餅圖數據系列共享相同的數據格式。因此，我們可以簡單地使用提供系列列表和動畫布爾參數PieChart的charts庫提供的小部件添加餅圖，如下面的代碼片段所示：

Dart： 

Expanded( 
  child:( charts.BarChart(series, animate: true)),
 ), Expanded(
    child:( charts.PieChart(series, animate: true)),
  )

請注意，此PieChart小部件直接添加到小部件內部小部件下方的bitcoin_price_chart.dart文件中。BarChartColumn

因此，我們也成功地將餅圖添加到我們的 Flutter 應用程序中。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“怎么在Flutter中實現漂亮的圖表”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!