flutter条形码_Flutter：使用Charts_flutter创建条形图

flutter条形码

Bar charts are useful ways to display data to a user, and with the use of the charts_flutter charting library, it’s easier than ever!

条形图是向用户显示数据的有用方法，并且通过使用charts_flutter图表库，它比以往任何时候都更容易！

This article will see us mapping World of Warcraft subscriber numbers between the years of 2008-2015.

本文将使我们了解到2008-2015年间的《魔兽世界》用户数量。

创建一个新的Flutter项目 (Creating a New Flutter Project)

As always, we’ll start off by setting up a new project and adding the charts_flutter plugin:

与往常一样，我们将从建立一个新项目并添加charts_flutter插件开始：

# New Flutter project
$ flutter create bar_wow

# Open this up inside of VS Code
$ cd bar_wow && code .

添加Charts_flutter插件 (Adding the charts_flutter plugin)

Next up, we’ll need to add the charts_flutter plugin within our pubspec.yaml:

接下来，我们需要添加charts_flutter我们中的插件pubspec.yaml ：

dependencies:
  flutter:
    sdk: flutter

  charts_flutter: ^0.8.1

We can now go ahead and run this on the iOS or Android simulator/device of your choice.

现在，我们可以继续在您选择的iOS或Android模拟器/设备上运行此程序。

脚手架的应用 (Scaffolding Our Application)

Let’s replace everything inside of main.dart with a MaterialApp that points at a HomePage which can be found at home.dart:

让我们用一个指向HomePage的MaterialApp替换main.dart内部的所有内容，该HomePage可以在home.dart找到：

main.dart

main.dart

import 'package:bar_wow/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(),
    );
  }
}

Next up, we’ll need to create the HomePage:

接下来，我们需要创建HomePage ：

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
        title: Text("World of Warcraft Subscribers"),
      ),
      body: Center(
          child: Text("Hello, Charts!"),
        ),
    );
  }
}

Now that we’ve established a base application, we can go ahead and create the model for our bar chart data.

现在，我们已经建立了基本应用程序，我们可以继续为条形图数据创建模型。

订户模型 (Subscriber Model)

Our bar chart will be focused on showing the amount of World of Warcraft subscribers for a particular year, therefore, our model would look something like this:

我们的条形图将专注于显示特定年份的《魔兽世界》用户数量，因此，我们的模型将如下所示：

subscriber_series.dart

subscription_series.dart

import 'package:charts_flutter/flutter.dart' as charts;
import 'package:flutter/foundation.dart';

class SubscriberSeries {
  final String year;
  final int subscribers;
  final charts.Color barColor;

  SubscriberSeries(
      {@required this.year,
      @required this.subscribers,
      @required this.barColor});
}

This allows us to represent our data in the most simplistic form.

这使我们能够以最简单的形式表示数据。

创建数据 (Creating the Data)

For example’s sake, we’re going to be creating the data inside of the HomePage as a List<SubscriberSeries>:

例如，我们将在HomePage中将数据创建为List<SubscriberSeries> ：

import 'package:bar_wow/subscriber_chart.dart';
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:bar_wow/subscriber_series.dart';
import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  final List<SubscriberSeries> data = [
    SubscriberSeries(
      year: "2008",
      subscribers: 10000000,
      barColor: charts.ColorUtil.fromDartColor(Colors.blue),
    ),
    SubscriberSeries(
      year: "2009",
      subscribers: 11000000,
      barColor: charts.ColorUtil.fromDartColor(Colors.blue),
    ),
    SubscriberSeries(
      year: "2010",
      subscribers: 12000000,
      barColor: charts.ColorUtil.fromDartColor(Colors.blue),
    ),
    SubscriberSeries(
      year: "2011",
      subscribers: 10000000,
      barColor: charts.ColorUtil.fromDartColor(Colors.blue),
    ),
    SubscriberSeries(
      year: "2012",
      subscribers: 8500000,
      barColor: charts.ColorUtil.fromDartColor(Colors.blue),
    ),
    SubscriberSeries(
      year: "2013",
      subscribers: 7700000,
      barColor: charts.ColorUtil.fromDartColor(Colors.blue),
    ),
    SubscriberSeries(
      year: "2014",
      subscribers: 7600000,
      barColor: charts.ColorUtil.fromDartColor(Colors.blue),
    ),
    SubscriberSeries(
      year: "2015",
      subscribers: 5500000,
      barColor: charts.ColorUtil.fromDartColor(Colors.red),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
        title: Text("World of Warcraft Subscribers"),
      ),
      body: Center(
          child: Text("Hello, Charts!"),
        ),
    );
  }
}

Now that we’ve got our data, all we need to is create the bar chart!

现在我们有了数据，我们所要做的就是创建条形图！

创建条形图 (Creating the Bar Chart)

Inside of subscriber_chart.dart, create a new StatelessWidget named SubscriberChart that takes in the SubscriberSeries as a prop:

在subscriber_chart.dart内部，创建一个名为SubscriberChart的新StatelessWidget ，它以SubscriberSeries作为prop ：

subscriber_chart.dart

subscription_chart.dart

import 'package:charts_flutter/flutter.dart' as charts;
import 'package:bar_wow/subscriber_series.dart';
import 'package:flutter/material.dart';

class SubscriberChart extends StatelessWidget {
  final List<SubscriberSeries> data;

  SubscriberChart({@required this.data});
}

We can then use this data to build our charts.Series like so:

然后，我们可以使用这些data来构建charts.Series 。

@override
Widget build(BuildContext context) {
  List<charts.Series<SubscriberSeries, String>> series = [
    charts.Series(
      id: "Subscribers",
      data: data,
      domainFn: (SubscriberSeries series, _) => series.year,
      measureFn: (SubscriberSeries series, _) => series.subscribers,
      colorFn: (SubscriberSeries series, _) => series.barColor)
  ];
}

The domainFn and measureFn is used to compare the subscribers data for that year. We’re also using the colorFn to potentially pass a barColor which we did like so:

该domainFn和measureFn用来比较subscribers数据为 year 。 我们还使用colorFn潜在地传递了barColor ，我们这样做是这样的：

SubscriberSeries(
  year: "2008",
  subscribers: 10000000,
  barColor: charts.ColorUtil.fromDartColor(Colors.blue),
),

We may want to make the barColor optional with a default of Colors.blue (or a color of your choice) in a production application, I’ve opted to make one bar red and the rest blue in this instance.

我们可能希望在生产应用程序中将barColor设置为可选，默认设置为Colors.blue (或您选择的颜色)，在这种情况下，我选择将一个条形设置为红色，将其余的条形设置为蓝色。

Let’s update the build function to return our chart:

让我们更新build函数以返回图表：

import 'package:charts_flutter/flutter.dart' as charts;
import 'package:bar_wow/subscriber_series.dart';
import 'package:flutter/material.dart';

class SubscriberChart extends StatelessWidget {
  final List<SubscriberSeries> data;

  SubscriberChart({@required this.data});

  @override
  Widget build(BuildContext context) {
    List<charts.Series<SubscriberSeries, String>> series = [
      charts.Series(
          id: "Subscribers",
          data: data,
          domainFn: (SubscriberSeries series, _) => series.year,
          measureFn: (SubscriberSeries series, _) => series.subscribers,
          colorFn: (SubscriberSeries series, _) => series.barColor)
    ];

    return Container(
      height: 400,
      padding: EdgeInsets.all(20),
      child: Card(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: <Widget>[
              Text(
                "World of Warcraft Subscribers by Year",
                style: Theme.of(context).textTheme.body2,
              ),
              Expanded(
                child: charts.BarChart(series, animate: true),
              )
            ],
          ),
        ),
      ),
    );
  }
}

What did we do here? We added some markup to our charts.BarChart by surrounding it with a Card. The key thing to note is that we’re passing the series as a required parameter to charts.BarChart:

我们在这里做了什么？ 我们通过在charts.BarChart周围加上Card来添加一些标记。 需要注意的关键是我们将series作为required参数传递给charts.BarChart ：

charts.BarChart(
  series,
  animate: true
)

全部接线！ (Wiring it All Up!)

Finally, head over to home.dart and change the build to use the SubscriberChart like so:

最后，转到home.dart并更改build以使用SubscriberChart如下所示：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      backgroundColor: Colors.red,
      title: Text("World of Warcraft Subscribers"),
    ),
    body: Center(
        child: SubscriberChart(
      data: data,
    )),
  );
}

This gives us the following chart:

这给出了以下图表：

翻译自: https://www.digitalocean.com/community/tutorials/flutter-bar-charts

flutter条形码