远程遥控界面编写

lib/features/remote_control/presentation/widgets/emergency_stop_button.dart

@@ -1,11 +1,16 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_svg/svg.dart';
 
 import '../bloc/remote_control_cubit.dart';
 
 class EmergencyStopButton extends StatefulWidget {
-  const EmergencyStopButton({super.key});
+  final double width;
+  const EmergencyStopButton({
+    Key? key,
+    this.width = 120,
+  }) : super(key: key);
 
   @override
   State<EmergencyStopButton> createState() => _EmergencyStopButtonState();
@@ -19,7 +24,6 @@ class _EmergencyStopButtonState extends State<EmergencyStopButton>
   @override
   void initState() {
     super.initState();
-    // 对应 Compose 中的 durationMs = 3000L
     _progressController = AnimationController(
       vsync: this,
       duration: const Duration(seconds: 3),
@@ -40,6 +44,9 @@ class _EmergencyStopButtonState extends State<EmergencyStopButton>
         .state
         .isEmergency;
 
+    final width = widget.width * 0.65;
+    final double indicatorSize = width + 10;
+
     return GestureDetector(
       // 1. 处理点击：仅在未急停时触发
       onTap: () {
@@ -75,20 +82,19 @@ class _EmergencyStopButtonState extends State<EmergencyStopButton>
           // 对应 Compose 的 Canvas 绘制进度环
           if (_isPressing)
             SizedBox(
-              width: 130,
-              height: 130,
+              width: indicatorSize,
+              height: indicatorSize,
               child: CircularProgressIndicator(
                 value: _progressController.value,
                 strokeWidth: 10,
                 color: Colors.red.withOpacity(0.8),
-                backgroundColor: Colors.red.withOpacity(0.2),
+                backgroundColor: Colors.red.withValues(alpha: 0.2),
               ),
             ),
 
-          // 按钮本体 (对应 Android 的 120.dp Box)
           Container(
-            width: 120,
-            height: 120,
+            width: width,
+            height: width,
             decoration: BoxDecoration(
               shape: BoxShape.circle,
               // 根据状态切换颜色，对应 Color(0x80C53030)
@@ -98,7 +104,7 @@ class _EmergencyStopButtonState extends State<EmergencyStopButton>
               boxShadow: isEmergencyActive
                   ? [
                       BoxShadow(
-                        color: Colors.red.withOpacity(0.5),
+                        color: Colors.red.withValues(alpha: 0.5),
                         blurRadius: 20,
                       ),
                     ]
@@ -107,16 +113,12 @@ class _EmergencyStopButtonState extends State<EmergencyStopButton>
             child: Column(
               mainAxisAlignment: MainAxisAlignment.center,
               children: [
-                const Icon(
-                  Icons.report_problem_outlined, // 对应 remote_alert 图标
-                  color: Colors.white,
-                  size: 45,
-                ),
+                SvgPicture.asset('assets/svgs/remote_alert.svg',width: width * 0.4,color: Colors.white.withValues(alpha: 0.5),),
                 const SizedBox(height: 6),
                 Text(
                   isEmergencyActive ? "急停中" : "急停",
-                  style: const TextStyle(
-                    color: Colors.white,
+                  style: TextStyle(
+                    color: Colors.white.withValues(alpha: 0.5),
                     fontSize: 14,
                     fontWeight: FontWeight.w900,
                   ),