如何使用Dart为Flutter开发无需第三方包的完全自定义Widget

Flutter框架本身的绘制、布局、交互API已经覆盖全场景自定义Widget的开发需求，全程不需要引入任何第三方包即可实现从简单业务组件到复杂视觉组件的所有需求。

两种核心实现方式 #

两种方式都完全基于Flutter SDK原生能力，无任何外部依赖 #

方式1：组合式自定义Widget #

适合业务组件封装场景，通过组合Flutter自带的基础Widget实现自定义效果，是最常用的自定义方式：

• 继承StatelessWidget（无状态）或StatefulWidget（有状态）作为自定义Widget的父类
• 在build方法中返回你组合完成的组件树
• 通过类的构造参数开放配置能力，满足多场景复用需求

示例：自定义带图标的确认按钮

import 'package:flutter/material.dart';

class CustomConfirmButton extends StatelessWidget {
  // 开放可配置参数
  final String text;
  final VoidCallback onTap;
  final Color backgroundColor;
  final IconData prefixIcon;

  const CustomConfirmButton({
    super.key,
    required this.text,
    required this.onTap,
    this.backgroundColor = Colors.blueAccent,
    this.prefixIcon = Icons.check_circle,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
        decoration: BoxDecoration(
          color: backgroundColor,
          borderRadius: BorderRadius.circular(8),
          boxShadow: [
            BoxShadow(
              color: backgroundColor.withOpacity(0.3),
              blurRadius: 4,
              offset: const Offset(0, 2),
            )
          ],
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(prefixIcon, color: Colors.white, size: 18),
            const SizedBox(width: 8),
            Text(
              text,
              style: const TextStyle(
                color: Colors.white,
                fontSize: 16,
                fontWeight: FontWeight.w500,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

方式2：完全自绘式自定义Widget #

适合特殊视觉效果、复杂交互的场景，完全不依赖现有组件的视觉样式，自己通过Canvas API实现所有绘制逻辑：

• 继承CustomPainter类，重写paint和shouldRepaint两个核心方法
• 在paint方法中通过Canvas自带的绘制API实现线条、形状、路径、文字、渐变、阴影等所有视觉效果
• shouldRepaint方法控制重绘时机，减少不必要的性能消耗
• 将自定义Painter传入CustomPaint组件即可封装为可直接使用的Widget

示例：自定义圆形进度条

import 'dart:math';
import 'package:flutter/material.dart';

// 自定义绘制逻辑
class CircularProgressPainter extends CustomPainter {
  final double progress; // 取值范围0~1
  final Color bgColor;
  final Color progressColor;
  final double strokeWidth;

  CircularProgressPainter({
    required this.progress,
    this.bgColor = Colors.grey.shade200,
    this.progressColor = Colors.greenAccent,
    this.strokeWidth = 10,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final center = size.center(Offset.zero);
    final radius = size.width / 2;

    // 绘制背景圆环
    final bgPaint = Paint()
      ..color = bgColor
      ..style = PaintingStyle.stroke
      ..strokeWidth = strokeWidth
      ..isAntiAlias = true;
    canvas.drawCircle(center, radius, bgPaint);

    // 绘制进度圆弧
    final progressPaint = Paint()
      ..color = progressColor
      ..style = PaintingStyle.stroke
      ..strokeWidth = strokeWidth
      ..strokeCap = StrokeCap.round
      ..isAntiAlias = true;
    canvas.drawArc(
      Rect.fromCircle(center: center, radius: radius),
      -pi / 2,
      2 * pi * progress.clamp(0, 1),
      false,
      progressPaint,
    );

    // 绘制进度文字
    final textPainter = TextPainter(
      text: TextSpan(
        text: "${(progress * 100).toInt()}%",
        style: const TextStyle(
          color: Colors.black87,
          fontSize: 18,
          fontWeight: FontWeight.bold,
        ),
      ),
      textDirection: TextDirection.ltr,
    );
    textPainter.layout();
    textPainter.paint(
      canvas,
      center - Offset(textPainter.width / 2, textPainter.height / 2),
    );
  }

  @override
  bool shouldRepaint(covariant CircularProgressPainter oldDelegate) {
    // 仅参数变化时触发重绘
    return oldDelegate.progress != progress ||
        oldDelegate.bgColor != bgColor ||
        oldDelegate.progressColor != progressColor ||
        oldDelegate.strokeWidth != strokeWidth;
  }
}

// 封装为可直接调用的Widget
class CustomCircularProgress extends StatelessWidget {
  final double progress;
  final double size;

  const CustomCircularProgress({
    super.key,
    required this.progress,
    this.size = 120,
  });

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: size,
      height: size,
      child: CustomPaint(
        painter: CircularProgressPainter(progress: progress),
      ),
    );
  }
}

交互能力扩展 #

如果需要给自定义Widget添加点击、滑动、长按等交互，直接使用Flutter自带组件即可实现：

• 基础手势监听：用GestureDetector包裹自定义Widget，监听对应手势回调即可
• 复杂形状精准点击判定：重写CustomPainter的hitTest方法，自定义点击区域的判定逻辑，实现不规则形状的精准交互响应

内容的提问来源于stack exchange，提问作者Rahul Raj