Flutter中如何自定义SearchBar组件的圆角形状

你当前使用CircleBorder()会让搜索框变成圆形，不符合你要的轻微圆角矩形需求。要实现自定义圆角的矩形SearchBar，只需将shape参数替换为RoundedRectangleBorder，并通过borderRadius设置你需要的圆角半径即可：

SearchBar(
  leading: Icon(Icons.search),
  hintText: "Search by ID, Store name & etc",
  shape: MaterialStatePropertyAll<RoundedRectangleBorder>(
    RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(8), // 数值可按需调整，比如6、10等，越小越接近纯矩形
    ),
  ),
),

• 核心修改逻辑：用RoundedRectangleBorder替代圆形边框，通过BorderRadius.circular()指定具体圆角大小，数值越小圆角弧度越平缓，更接近矩形形态。
• 你可以根据UI设计需求，灵活调整BorderRadius.circular()里的参数值，找到最匹配的轻微圆角效果。

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