Flutter实现Card仅右侧1/3区域可点击的最优方案

最直接且贴合你需求的做法，是让右侧GestureDetector的子组件占满整个Flexible分配的空间，这样整个右侧1/3区域（包括外层Container内边距对应的空白区域）都能响应点击。具体只需给GestureDetector内部套一个充满空间的Container即可，不用改动外层内边距，也无需给文本单独设置外边距。

修改后的完整代码：

return Card(
  margin: const EdgeInsets.symmetric(vertical: 2),
  elevation: 0,
  child: Container(
    padding: const EdgeInsets.symmetric(
      horizontal: 8,
      vertical: 60,
    ),
    width: double.infinity,
    child: Row(children: [
      Flexible(
        flex: 2,
        fit: FlexFit.tight,
        child: Text("foooo"),
      ),
      Flexible(
        flex: 1,
        fit: FlexFit.tight,
        child: GestureDetector(
          onTap: someFunction,
          child: Container(
            width: double.infinity,
            height: double.infinity,
            child: Text(
              "baaar",
              textAlign: TextAlign.right,
            ),
          ),
        ),
      ),
    ]),
  ),
);

关键说明 #

• 给GestureDetector的子组件添加Container并设置width: double.infinity和height: double.infinity，让这个Container完全填充Flexible分配的右侧1/3空间，这样GestureDetector的点击区域就覆盖了整个右侧区域，包括外层Container内边距带来的空白部分。
• 保留了外层Container的统一内边距，无需拆分或单独给左右文本设置外边距，维持布局的简洁性。

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