update demo.

lib/main.dart

@@ -1,5 +1,7 @@
+import 'dart:async';
 import 'dart:math';
 
+import 'package:fl_chart/fl_chart.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_ring_indicator/ring_indicator.dart';
 
@@ -37,15 +39,25 @@ class _MyHomePageState extends State<MyHomePage> {
   double value2 = 50;
   double value3 = 10;
 
+  List<double> points = [0];
+
   void _incrementCounter() {
     setState(() {
       value1 = Random().nextDouble() * 100;
       value2 = Random().nextDouble() * 100;
       value3 = Random().nextDouble() * 100;
+      points.add(value2 - 20);
+      if (points.length > 20) points.removeAt(0);
     });
   }
 
   @override
+  void initState() {
+    Timer.periodic(const Duration(seconds: 1), (timer) => _incrementCounter());
+    super.initState();
+  }
+
+  @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
@@ -56,7 +68,7 @@ class _MyHomePageState extends State<MyHomePage> {
           mainAxisAlignment: MainAxisAlignment.center,
           children: <Widget>[
             SizedBox.square(
-              dimension: 200,
+              dimension: 240,
               child: RingIndicator(
                 ringColor: Colors.deepPurpleAccent,
                 startAngel: pi * -0.7,
@@ -76,9 +88,12 @@ class _MyHomePageState extends State<MyHomePage> {
                       child: Column(
                         mainAxisSize: MainAxisSize.min,
                         children: [
-                          Text(values.level(0)?.toStringAsFixed(1) ?? '/', style: const TextStyle(fontSize: 18)),
-                          Text(values.level(1)?.toStringAsFixed(1) ?? '/', style: const TextStyle(fontSize: 24)),
-                          Text(values.level(2)?.toStringAsFixed(1) ?? '/', style: const TextStyle(fontSize: 18)),
+                          Text('温度 ${values.level(1)?.toStringAsFixed(1) ?? '/'} ℃',
+                              style: const TextStyle(fontSize: 18)),
+                          Text('频率 ${((values.level(0) ?? 0) / 20).toStringAsFixed(1)} GHz',
+                              style: const TextStyle(fontSize: 24)),
+                          Text('利用率 ${values.level(2)?.toStringAsFixed(1) ?? '/'} %',
+                              style: const TextStyle(fontSize: 18)),
                         ],
                       ),
                     ),
@@ -102,7 +117,7 @@ class _MyHomePageState extends State<MyHomePage> {
             ),
             const SizedBox(height: 50),
             SizedBox.square(
-              dimension: 200,
+              dimension: 240,
               child: RingIndicator(
                 ringColor: Colors.teal,
                 startAngel: halfPi,
@@ -138,6 +153,58 @@ class _MyHomePageState extends State<MyHomePage> {
                 ),
               ),
             ),
+            const SizedBox(height: 50),
+            SizedBox.square(
+              dimension: 240,
+              child: RingIndicator(
+                ringColor: Colors.blueAccent,
+                startAngel: -0.8 * pi,
+                endAngel: 0.8 * pi,
+                maxValue: 100,
+                value: value2,
+                labelBuilder: (values) => [
+                  const Align(
+                    alignment: Alignment.bottomCenter,
+                    child: Text('占用率', style: TextStyle(fontSize: 28, height: 1.8)),
+                  ),
+                  Center(
+                    child: FractionallySizedBox(
+                      widthFactor: 0.8,
+                      heightFactor: 0.4,
+                      child: LineChart(
+                        LineChartData(
+                          maxX: 20,
+                          minX: 0,
+                          maxY: 50,
+                          minY: -50,
+                          lineBarsData: [
+                            LineChartBarData(
+                              spots: <FlSpot>[
+                                ...List.generate(20 - points.length, (index) => FlSpot.nullSpot),
+                                ...points.reversed
+                                    .toList()
+                                    .asMap()
+                                    .entries
+                                    .map((e) => FlSpot(20 - e.key.toDouble(), e.value)),
+                              ].reversed.toList(),
+                              isCurved: true,
+                              dotData: FlDotData(show: false),
+                              barWidth: 3,
+                              belowBarData: BarAreaData(
+                                show: false,
+                              ),
+                            ),
+                          ],
+                          titlesData: FlTitlesData(show: false),
+                          borderData: FlBorderData(show: false),
+                        ),
+                        swapAnimationDuration: Duration.zero,
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ),
           ],
         ),
       ),

linux/my_application.cc

@@ -47,7 +47,7 @@ static void my_application_activate(GApplication* application) {
     gtk_window_set_title(window, "flutter_ring_indicator");
   }
 
-  gtk_window_set_default_size(window, 1080, 1920);
+  gtk_window_set_default_size(window, 720, 1080);
   gtk_widget_show(GTK_WIDGET(window));
 
   g_autoptr(FlDartProject) project = fl_dart_project_new();

pubspec.yaml

@@ -36,6 +36,7 @@ dependencies:
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.
   cupertino_icons: ^1.0.2
+  fl_chart: ^0.55.2
 
 dev_dependencies:
   flutter_test: