flutter 充电气泡

在Flutter中创建一个充电气泡组件可以通过自定义CustomPainter来实现。以下是一个简单的示例，展示了如何创建一个类似于iOS的充电气泡效果。

import 'package:flutter/material.dart';
 
class ChargingBubble extends CustomPainter {
  final double progress; // 充电进度 0.0 到 1.0
  final Color color; // 充电气泡颜色
 
  ChargingBubble({this.progress = 0.0, this.color = Colors.blue});
 
  @override
  void paint(Canvas canvas, Size size) {
    final double radius = size.width / 2;
    final Rect rect = Rect.fromLTWH(0.0, 0.0, size.width, size.height);
    final Paint paint = Paint()..color = color;
 
    // 绘制底部圆角矩形
    final RRect roundedRect = RRect.fromRectAndRadius(rect, Radius.circular(size.width / 2));
    canvas.drawRRect(roundedRect, paint);
 
    // 绘制顶部圆形
    canvas.drawCircle(Offset(radius, 0.0), radius, paint);
 
    // 绘制进度圆弧
    final double progressRadius = radius * 0.8;
    final Rect progressRect = Rect.fromLTWH(size.width / 2 - progressRadius, size.height / 2 - progressRadius, progressRadius * 2, progressRadius * 2);
    final Paint progressPaint = Paint()
      ..color = color
      ..strokeWidth = 2.0
      ..style = PaintingStyle.stroke
      ..strokeCap = StrokeCap.round;
 
    canvas.drawArc(progressRect, -pi / 2, progress * pi, false, progressPaint);
  }
 
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}
 
void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: CustomPaint(
          size: Size(100, 180),
          painter: ChargingBubble(progress: 0.5, color: Colors.green),
        ),
      ),
    ),
  ));
}

这段代码定义了一个ChargingBubble类，它继承自CustomPainter。在paint方法中，我们首先绘制了一个圆角矩形作为充电气泡的底部，然后在其上绘制了一个圆形代表充电气泡的顶部，最后绘制了一个圆弧表示充电进度。

在main函数中，我们创建了一个ChargingBubble对象，并通过CustomPaint控件将其绘制在屏幕上。你可以通过调整progress和color属性来改变充电气泡的进度和颜色。