Flutter渐变线条图表插件gradient_line_graph的使用

概述

GradientLineGraphWidget 是一个简单且可定制的动画连接按钮小部件。

源代码为 100% Dart。

动机

我在我的Flutter应用中需要一些动画图表。

开始使用

安装

在项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:  
  gradient_line_graph: ^1.0.0

引入库

在你的项目文件中引入 GradientLineGraph 库：

import 'package:gradient_line_graph/gradient_line_graph.dart';

使用示例

你可以直接在你的Widget树中使用该视图。下面是一个简单的例子：

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double downloadRate = 0;
  double downloadProgress = 0;

  [@override](/user/override)
  void initState() {
    super.initState();

    WidgetsBinding.instance?.addPostFrameCallback((timeStamp) {
      download();
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              child: GradientLineGraphView(
                min: 0,
                max: 100,
                value: downloadRate,
                precentage: downloadProgress,
                color: Color(0xFF4cbdbb).withOpacity(0.7),
                duration: Duration(milliseconds: 0),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Future<void> download() async {
    setState(() {
      downloadProgress = 0;
      downloadRate = 40;
    });

    Timer.periodic(Duration(milliseconds: 500), (timer) {
      print('current downloadProgress: $downloadProgress');
      print('current downloadRate: $downloadRate');

      if (downloadProgress >= 99) {
        timer.cancel();
      }

      var generated = generateRandom(30, 80).toDouble();
      goToDownloadValue(generated);
    });
  }

  void goToDownloadValue(double value) {
    var valueToAdd = (value - downloadRate) / 10;
    var counter = 0;
    Timer.periodic(Duration(milliseconds: 50), (timer) {
      if (counter == 9 || downloadRate == value) {
        timer.cancel();
      }

      counter++;
      setState(() {
        downloadRate += valueToAdd;
        downloadProgress += 0.5;
      });
    });
  }

  int generateRandom(int min, int max) {
    var rn = Random();
    return min + rn.nextInt(max - min);
  }
}