如何在Flutter中实现类似Zomato应用的搜索栏圆角设计？

视觉差异分析 #

对比两张图的核心区别：Zomato的搜索栏是双层圆角+柔和阴影+内凹分层的复合设计，而你的版本是单一圆角边框，缺少悬浮感和层次：

• 外层容器带圆角+浅阴影，营造悬浮在页面上的效果
• 内部输入区域用同半径圆角+背景色差，形成内凹的视觉感
• 左右图标区域和整体圆角完全对齐，没有破坏视觉连贯性

代码实现示例 #

HTML结构

<div class="zomato-search-bar">
  <div class="search-icon">🔍</div>
  <input type="text" class="search-input" placeholder="搜索餐厅、美食...">
  <div class="filter-icon">⚙️</div>
</div>

CSS样式（带关键注释）

/* 外层容器：负责悬浮阴影和外层圆角 */
.zomato-search-bar {
  display: flex;
  align-items: center;
  width: 90%;
  max-width: 500px;
  border-radius: 12px; /* 外层圆角半径 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* 柔和外阴影，模拟悬浮 */
  background-color: #fff;
  padding: 2px; /* 留小间距，让内层和外层形成分层 */
}

/* 内部输入框：内圆角+背景色差 */
.search-input {
  flex: 1;
  border: none;
  border-radius: 10px; /* 比外层小2px，抵消外层padding的视觉差，保证圆角对齐 */
  padding: 12px 16px;
  font-size: 14px;
  background-color: #f8f8f8; /* 浅灰背景，和外层纯白形成内凹感 */
  outline: none;
}

/* 图标容器：配合布局，不破坏圆角 */
.search-icon, .filter-icon {
  padding: 0 12px;
  font-size: 18px;
  color: #666;
}

/* 聚焦状态优化：保持圆角完整性 */
.search-input:focus {
  background-color: #fff;
  box-shadow: inset 0 0 0 1px #ff5722; /* Zomato品牌橙边框，替代默认聚焦框 */
}

关键注意事项 #

• 圆角半径统一适配：外层容器圆角稍大，内层输入框圆角略小，抵消外层padding的影响，确保视觉上圆角完全对齐
• 阴影层次控制：外层用模糊的外阴影（低不透明度），避免厚重感；内部聚焦时用内阴影或细边框，不破坏圆角轮廓
• 背景色差营造分层：外层纯白，内部浅灰，不需要额外边框就能形成自然的内凹视觉
• 图标区域适配：图标容器的padding要和整体布局配合，保证左右两端的圆角不会被元素截断

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