如何在Flutter中创建图示的验证码验证组件？

从你提供的设计图来看，这是一个带阴影、圆角的卡片式交互组件，内部包含图标和文字，以下是具体实现方案：

核心实现代码 #

import 'package:flutter/material.dart';

class CustomCardComponent extends StatelessWidget {
  final IconData icon;
  final String title;
  final VoidCallback onTap;

  const CustomCardComponent({
    super.key,
    required this.icon,
    required this.title,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onTap,
      borderRadius: BorderRadius.circular(16),
      child: Container(
        padding: const EdgeInsets.symmetric(vertical: 24, horizontal: 16),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(16),
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.2),
              spreadRadius: 2,
              blurRadius: 8,
              offset: const Offset(0, 3),
            ),
          ],
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              icon,
              size: 48,
              color: Colors.blue.shade600,
            ),
            const SizedBox(height: 12),
            Text(
              title,
              style: const TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.w500,
                color: Colors.black87,
              ),
              textAlign: TextAlign.center,
            ),
          ],
        ),
      ),
    );
  }
}

// 使用示例
class ExampleScreen extends StatelessWidget {
  const ExampleScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey.shade100,
      padding: const EdgeInsets.all(20),
      body: GridView.count(
        crossAxisCount: 2,
        crossAxisSpacing: 16,
        mainAxisSpacing: 16,
        children: [
          CustomCardComponent(
            icon: Icons.shopping_cart,
            title: "购物车",
            onTap: () {
              // 点击逻辑
            },
          ),
          CustomCardComponent(
            icon: Icons.favorite,
            title: "收藏夹",
            onTap: () {
              // 点击逻辑
            },
          ),
        ],
      ),
    );
  }
}

关键细节说明 #

• 阴影效果：通过BoxDecoration的boxShadow属性实现，调整blurRadius、spreadRadius和offset可以适配设计图的阴影深浅和方向
• 交互反馈：使用InkWell包裹容器，点击时会有水波纹效果，同时设置borderRadius保证水波纹和容器圆角匹配
• 布局灵活性：通过GridView可以快速实现多列排列，也可以用Row/Column实现单行或单列布局
• 样式自定义：可以根据设计需求修改容器颜色、图标颜色、文字样式、圆角大小等参数

内容的提问来源于stack exchange，提问作者khaldoun badreah