hukusuke1007 · August 25, 2023 23:56 · Aug 25, 2023 · Aug 25, 2023 · Aug 25, 2023 · Aug 25, 2023
diff --git a/main.dart b/main.dart
@@ -138,7 +138,8 @@ class TachometerPainter extends CustomPainter {
   }
 
   @override
-  bool shouldRepaint(covariant CustomPainter oldDelegate) {
-    return true;
+  bool shouldRepaint(TachometerPainter oldDelegate) {
+    print("oldDelegate.rpmValue ${oldDelegate.rpmValue}");
+    return oldDelegate.rpmValue != rpmValue;
   }
 }
diff --git a/index.html b/index.html
@@ -1,5 +0,0 @@
-<h2>速度のタコメーター</h2>
-
-<div>
-  <canvas id="canvas" width="300" height="300"></canvas>
-</div>

diff --git a/index.html b/index.html
@@ -0,0 +1,5 @@
+<h2>速度のタコメーター</h2>
+
+<div>
+  <canvas id="canvas" width="300" height="300"></canvas>
+</div>
diff --git a/main.dart b/main.dart
@@ -95,6 +95,7 @@ class TachometerPainter extends CustomPainter {
     const endAngle = 1.9 * pi; // 終了角度を調整
 
     for (int i = 0; i <= totalMarks; i++) {
+      // メモリの線を描画
       var angle = startAngle + (endAngle - startAngle) * (i / totalMarks);
       final start = Offset(
         center.dx + (radius - 10) * cos(angle),
@@ -106,7 +107,7 @@ class TachometerPainter extends CustomPainter {
       );
       canvas.drawLine(start, end, memPaint);
 
-      // ラベルの描画
+      // メモリの数値ラベルの描画
       textPainter.text = TextSpan(
         text: '${i * 20}',
         style: const TextStyle(color: Colors.white, fontSize: 12.0),

diff --git a/main.dart b/main.dart
@@ -31,21 +31,16 @@ class MyHomePage extends StatelessWidget {
   }
 }
 
-class AnimatedEngineMeter extends StatefulWidget {
+class AnimatedEngineMeter extends StatelessWidget {
+  const AnimatedEngineMeter({required this.targetValue});
+
   final double targetValue;
 
-  AnimatedEngineMeter({required this.targetValue});
-
-  @override
-  _AnimatedEngineMeterState createState() => _AnimatedEngineMeterState();
-}
-
-class _AnimatedEngineMeterState extends State<AnimatedEngineMeter> {
   @override
   Widget build(BuildContext context) {
     return TweenAnimationBuilder<double>(
-      tween: Tween(begin: 0.0, end: widget.targetValue),
-      duration: Duration(seconds: 2),
+      tween: Tween(begin: 0.0, end: targetValue),
+      duration: const Duration(seconds: 2),
       builder: (context, value, child) {
         return Tachometer(rpmValue: value);
       },
@@ -54,59 +49,83 @@ class _AnimatedEngineMeterState extends State<AnimatedEngineMeter> {
 }
 
 class Tachometer extends StatelessWidget {
-  final double rpmValue; // 0.0から1.0までの値。例：0.5は50%のRPMを示す
+  const Tachometer({required this.rpmValue});
 
-  Tachometer({required this.rpmValue});
+  final double rpmValue; // 0.0から1.0までの値。例：0.5は50%のRPMを示す
 
   @override
   Widget build(BuildContext context) {
     return CustomPaint(
       painter: TachometerPainter(rpmValue),
-      size: Size(200, 200), // こちらのサイズは適宜調整してください
+      size: const Size(300, 200), // こちらのサイズは適宜調整してください
     );
   }
 }
 
 class TachometerPainter extends CustomPainter {
+  const TachometerPainter(this.rpmValue);
+
   final double rpmValue;
 
-  TachometerPainter(this.rpmValue);
-
   @override
   void paint(Canvas canvas, Size size) {
-    final center = Offset(size.width / 2, size.height / 2);
+    final center = Offset(size.width / 2, size.height);
     final radius = size.width / 2 - 20;
 
-    // 背景の描画
-    final bgPaint = Paint()..color = Colors.grey[300]!;
-    canvas.drawCircle(center, radius, bgPaint);
+    // 半円背景の描画
+    final bgPaint = Paint()..color = Colors.black;
+    canvas.drawArc(
+      Rect.fromCircle(center: center, radius: radius),
+      pi,
+      pi,
+      false,
+      bgPaint,
+    );
 
-    // 数値メモリの描画
+    // 数値メモリとラベルの描画
     final memPaint = Paint()
-      ..color = Colors.black
+      ..color = Colors.white
       ..strokeWidth = 2.0;
+    final textPainter = TextPainter(
+      textDirection: TextDirection.ltr,
+    );
+
+    const totalMarks = 9; 
+    const startAngle = 1.1 * pi; // 開始角度を調整
+    const endAngle = 1.9 * pi; // 終了角度を調整
 
-    final int totalMarks = 10; // 10のメモリを想定
     for (int i = 0; i <= totalMarks; i++) {
-      double angle = -150 + 300 * (i / totalMarks);
-      double radians = angle * pi / 180;
+      var angle = startAngle + (endAngle - startAngle) * (i / totalMarks);
       final start = Offset(
-        center.dx + (radius - 10) * cos(radians),
-        center.dy + (radius - 10) * sin(radians),
+        center.dx + (radius - 10) * cos(angle),
+        center.dy + (radius - 10) * sin(angle),
       );
       final end = Offset(
-        center.dx + radius * cos(radians),
-        center.dy + radius * sin(radians),
+        center.dx + radius * cos(angle),
+        center.dy + radius * sin(angle),
       );
       canvas.drawLine(start, end, memPaint);
+
+      // ラベルの描画
+      textPainter.text = TextSpan(
+        text: '${i * 20}',
+        style: const TextStyle(color: Colors.white, fontSize: 12.0),
+      );
+      textPainter.layout();
+      textPainter.paint(
+        canvas,
+        Offset(
+          center.dx + (radius - 30) * cos(angle) - textPainter.width / 2,
+          center.dy + (radius - 30) * sin(angle) - textPainter.height / 2,
+        ),
+      );
     }
 
     // 針の描画
-    final angle = -150 + 300 * rpmValue;
-    final radians = angle * pi / 180;
+    final angle = startAngle + (endAngle - startAngle) * rpmValue;
     final needleEnd = Offset(
-      center.dx + (radius - 20) * cos(radians),
-      center.dy + (radius - 20) * sin(radians),
+      center.dx + (radius - 20) * cos(angle),
+      center.dy + (radius - 20) * sin(angle),
     );
 
     final needlePaint = Paint()
@@ -121,4 +140,4 @@ class TachometerPainter extends CustomPainter {
   bool shouldRepaint(covariant CustomPainter oldDelegate) {
     return true;
   }
-}
+}
diff --git a/main.dart b/main.dart
@@ -0,0 +1,124 @@
+import 'package:flutter/material.dart';
+import 'dart:math';
+
+void main() {
+  runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      debugShowCheckedModeBanner: false,
+      title: 'Flutter Demo',
+      theme: ThemeData(
+        primarySwatch: Colors.blue,
+      ),
+      home: MyHomePage(),
+    );
+  }
+}
+
+class MyHomePage extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Padding(
+        padding: EdgeInsets.all(16),
+        child: AnimatedEngineMeter(targetValue: 0.3),
+      ),
+    );
+  }
+}
+
+class AnimatedEngineMeter extends StatefulWidget {
+  final double targetValue;
+
+  AnimatedEngineMeter({required this.targetValue});
+
+  @override
+  _AnimatedEngineMeterState createState() => _AnimatedEngineMeterState();
+}
+
+class _AnimatedEngineMeterState extends State<AnimatedEngineMeter> {
+  @override
+  Widget build(BuildContext context) {
+    return TweenAnimationBuilder<double>(
+      tween: Tween(begin: 0.0, end: widget.targetValue),
+      duration: Duration(seconds: 2),
+      builder: (context, value, child) {
+        return Tachometer(rpmValue: value);
+      },
+    );
+  }
+}
+
+class Tachometer extends StatelessWidget {
+  final double rpmValue; // 0.0から1.0までの値。例：0.5は50%のRPMを示す
+
+  Tachometer({required this.rpmValue});
+
+  @override
+  Widget build(BuildContext context) {
+    return CustomPaint(
+      painter: TachometerPainter(rpmValue),
+      size: Size(200, 200), // こちらのサイズは適宜調整してください
+    );
+  }
+}
+
+class TachometerPainter extends CustomPainter {
+  final double rpmValue;
+
+  TachometerPainter(this.rpmValue);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final center = Offset(size.width / 2, size.height / 2);
+    final radius = size.width / 2 - 20;
+
+    // 背景の描画
+    final bgPaint = Paint()..color = Colors.grey[300]!;
+    canvas.drawCircle(center, radius, bgPaint);
+
+    // 数値メモリの描画
+    final memPaint = Paint()
+      ..color = Colors.black
+      ..strokeWidth = 2.0;
+
+    final int totalMarks = 10; // 10のメモリを想定
+    for (int i = 0; i <= totalMarks; i++) {
+      double angle = -150 + 300 * (i / totalMarks);
+      double radians = angle * pi / 180;
+      final start = Offset(
+        center.dx + (radius - 10) * cos(radians),
+        center.dy + (radius - 10) * sin(radians),
+      );
+      final end = Offset(
+        center.dx + radius * cos(radians),
+        center.dy + radius * sin(radians),
+      );
+      canvas.drawLine(start, end, memPaint);
+    }
+
+    // 針の描画
+    final angle = -150 + 300 * rpmValue;
+    final radians = angle * pi / 180;
+    final needleEnd = Offset(
+      center.dx + (radius - 20) * cos(radians),
+      center.dy + (radius - 20) * sin(radians),
+    );
+
+    final needlePaint = Paint()
+      ..color = Colors.red
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = 5.0;
+
+    canvas.drawLine(center, needleEnd, needlePaint);
+  }
+
+  @override
+  bool shouldRepaint(covariant CustomPainter oldDelegate) {
+    return true;
+  }
+}
No results found