Flutter界面美化插件smoothie的使用

smoothie

smoothie 是一个简单的曲线平滑工具。通过一行代码，你可以将一组数据点转化为一条平滑的Bézier曲线。

使用

假设你有一些任意的数据（例如一系列点）：

var _originalDataSeries = <Point>[
  Point(0, 5),
  Point(2, 15),
  Point(3, 10),
  Point(8, 6),
  Point(9, 13),
];

定义期望结果曲线上采样的点数：

int _sampleCount = 100;

导入 smoothie：

import 'package:smoothie/smoothie.dart';

创建一条平滑的曲线，使用 getSampledCurveFromPoints 扩展函数处理原始数据：

List<Point<num>> _sampledCurve = _originalDataSeries.smooth(_sampleCount);

查看过采样效果：

完整示例

下面是一个完整的示例，展示了如何在Flutter应用中使用 charts_flutter 包来展示平滑后的曲线。

import 'dart:math';

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Smoothie Demo',
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: SmoothieHomePage(),
    );
  }
}

class SmoothieHomePage extends StatefulWidget {
  SmoothieHomePage({Key? key}) : super(key: key);

  @override
  _SmoothieHomePageState createState() => _SmoothieHomePageState();
}

class _SmoothieHomePageState extends State<SmoothieHomePage> {
  int _samplingPointCount = 0;

  var _originalDataSeries = <Point>[
    Point(0, 5),
    Point(2, 15),
    Point(3, 10),
    Point(8, 6),
    Point(9, 13),
  ];

  @override
  void initState() {
    super.initState();
    _samplingPointCount = _originalDataSeries.length;
  }

  void _incrementCounter() {
    setState(() {
      _samplingPointCount++;
    });
  }

  void _decrementCounter() {
    setState(() {
      if (_samplingPointCount > _originalDataSeries.length)
        _samplingPointCount--;
    });
  }

  @override
  Widget build(BuildContext context) {
    var series = [
      new charts.Series(
        domainFn: (Point chartData, _) => chartData.x,
        measureFn: (Point chartData, _) => chartData.y,
        colorFn: (Point point, _) => charts.MaterialPalette.teal.shadeDefault,
        id: 'Example Series',
        data: _originalDataSeries.smooth(
          _samplingPointCount,
        ),
      ),
    ];

    var chart = new charts.LineChart(
      series,
      animate: false,
      defaultRenderer: new charts.LineRendererConfig(
        includeArea: true,
      ),
    );

    return Scaffold(
        appBar: AppBar(
          title: Text("Smoothie Demo"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'The smooth curve now has $_samplingPointCount points.',
              ),
              Container(
                height: 200,
                child: chart,
              ),
            ],
          ),
        ),
        floatingActionButton: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            FloatingActionButton(
              onPressed: _decrementCounter,
              tooltip: 'Decrement',
              child: Icon(Icons.remove),
            ),
            FloatingActionButton(
              onPressed: _incrementCounter,
              tooltip: 'Increment',
              child: Icon(Icons.add),
            ),
          ],
        ));
  }
}

如果你想要运行此示例并且正在使用空安全，你需要在构建命令中添加 --no-sound-null-safety 参数，因为当前版本的 charts_flutter 还不支持空安全：

cd example
flutter run --no-sound-null-safety