怎么在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中实现漂亮的图表”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!