请教如何在Flutter中创建如图所示的自定义Widget？

从你提供的Widget样式来看，这是一个带侧边标识的卡片布局，用Stack组件并不适配这种横向排列的结构，更适合用Row结合Container来实现，以下是完整的代码示例：

Container(
  margin: const EdgeInsets.all(16),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(8),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.2),
        spreadRadius: 1,
        blurRadius: 3,
        offset: const Offset(0, 2),
      ),
    ],
  ),
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      // 左侧彩色侧边条
      Container(
        width: 4,
        decoration: BoxDecoration(
          color: Colors.blueAccent, // 可自定义颜色
          borderRadius: const BorderRadius.only(
            topLeft: Radius.circular(8),
            bottomLeft: Radius.circular(8),
          ),
        ),
      ),
      // 右侧内容区域
      const Expanded(
        child: Padding(
          padding: EdgeInsets.all(12),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                '标题内容',
                style: TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.w600,
                ),
              ),
              SizedBox(height: 8),
              Text(
                '这里是Widget的详细描述文本，可根据需求修改内容和样式',
                style: TextStyle(
                  fontSize: 14,
                  color: Colors.grey,
                ),
              ),
            ],
          ),
        ),
      ),
    ],
  ),
)

代码说明 #

• 外层Container实现卡片的阴影、圆角和间距效果
• Row组件实现横向布局：左侧固定宽度的彩色容器作为侧边标识，右侧用Expanded占据剩余空间
• 内容区域通过Column垂直排列标题和详情文本，配合Padding控制内边距，保证布局美观

内容的提问来源于stack exchange，提问作者SABARINATH P S