如何在flutter中的textField中添加可编辑文本和前缀图标之间的空间？

sqserrrh 于 2023-06-24 发布在 Flutter

关注(0)|答案(1)|浏览(156)

我是新来的Flutter和学习文本字段。我有一个文本字段，看起来像这样：

我想在前缀图标和可编辑文本之间添加一些填充。下面是我的代码：

TextField(
  style: const TextStyle(
    color: Color.fromARGB(125, 0, 0, 0),
  ),
  decoration: InputDecoration(
    border: const OutlineInputBorder(),
    hintText: 'Full Name',
    hintStyle: TextStyle(color: Colors.grey[300]),
    fillColor: Colors.white,
    filled: true,
    prefixIcon: Container(
      decoration: BoxDecoration(
        border: Border(
          right: BorderSide(
            color: Colors.grey[300]!,
          ),
        ),
      ),
      child: const Icon(
        Icons.person_outline,
        color: kPurple,
      ),
    ),
  ),
  cursorColor: kPurple,
)

flutter

来源：https://stackoverflow.com/questions/76539261/how-to-add-space-between-editable-text-and-prefix-icon-in-textfield-in-flutter

1条答案

按热度按时间

b4lqfgs41#

您可以使用填充包裹图标小部件。或者可替换地向容器添加填充物，
下一篇：The Code Below Work Fine on My Side

TextField(
          style: const TextStyle(
            color: Color.fromARGB(125, 0, 0, 0),
          ),
          decoration: InputDecoration(
            border: const OutlineInputBorder(),
            hintText: 'Full Name',
            hintStyle: TextStyle(color: Colors.grey[300]),
            fillColor: Colors.white,
            filled: true,
            prefixIcon: Container(
            margin: const EdgeInsets.only(
                  right: 40, top: 20, bottom: 20, left: 40),
              decoration: BoxDecoration(
                border: Border(
                  right: BorderSide(
                    color: Colors.grey[300]!,
                  ),
                ),
              ),
              child: const Icon(
                Icons.person_outline,
                color: Colors.purpleAccent,
              ),
            ),
          ),
          cursorColor: Colors.purple,
        ),

赞(0）回复(0）举报 2023-06-24

我来回答

如何在flutter中的textField中添加可编辑文本和前缀图标之间的空间？

1条答案

相关问题

热门标签

最新问答