Flutter图表绘制插件charts_fl的使用

特性

此Flutter包可用于显示图表和图形。
可能包括图像、GIF或视频。

开始使用

列出使用该包所需的先决条件，并提供或指向有关如何开始使用该包的信息。

使用方法

为用户提供简洁且有用的示例。将较长的示例添加到/example文件夹中。

const like = 'sample';

额外信息

告诉用户更多关于该包的信息：在哪里可以找到更多信息、如何为该包做贡献、如何提交问题、用户可以期望从包作者那里获得什么响应等。

示例代码

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:charts_fl/charts_fl.dart'; // 引入charts_fl包

void main() {
  runApp(const MyApp()); // 应用程序入口
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo', // 应用名称
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), // 主题颜色
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'), // 主页
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title}); // 定义页面标题

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState(); // 初始化状态
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0; // 计数器变量

  void _incrementCounter() {
    setState(() { // 更新UI
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar( // 设置顶部导航栏
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title), // 页面标题
      ),
      body: Center( // 页面主体居中布局
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center, // 子元素垂直居中
          children: [
            const Text(
              '你已经点击了按钮多少次:', // 提示文本
            ),
            Text(
              '$_counter', // 动态计数显示
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            FloatingActionButton( // 浮动按钮
              onPressed: () async {
                await CustomAlertBox.showCustomAlertBox(
                  context: context, // 上下文
                  willDisplayWidget: const Text('我的自定义弹框，来自示例！') // 自定义弹框内容
                );
              },
              tooltip: '显示自定义弹框', // 按钮提示
              child: const Icon(Icons.message), // 图标
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton( // 另一个浮动按钮
        onPressed: _incrementCounter, // 点击增加计数
        tooltip: '增加计数', // 按钮提示
        child: const Icon(Icons.add), // 图标
      ),
    );
  }
}