flutter - 如何在颤动中设计带有图标的曲线文本字段？

Question

我有这个设计，我想将它用于我的应用程序，但我不太确定如何在文本字段的开头添加曲线和图标。

Answer 1

也许是这样的：

Container(
          padding: const EdgeInsets.symmetric(horizontal: 20),
          height: 50,
          child: Stack(
            clipBehavior: Clip.none,
            children: [
              ClipRRect(
                borderRadius: const BorderRadius.only(topRight: Radius.circular(20)),
                child: TextField(
                  decoration: InputDecoration(
                    fillColor: Colors.grey.shade300,
                    filled: true,
                    prefixText: '       ',
                    hintText: 'Email'
                  ),
                ),
              ),
              Positioned(
                left: -20,
                top: 0,
                child: Container(
                  height: 50,
                  width: 50,
                  padding: const EdgeInsets.all(5),
                  decoration: const ShapeDecoration(
                    color: Colors.white,
                    shape: CircleBorder(),
                  ),
                  child: Container(
                    decoration: ShapeDecoration(
                      color: Colors.grey.shade300,
                      shape: const CircleBorder(),
                    ),
                    padding: const EdgeInsets.all(5),
                    child: const Icon(Icons.mail),
                  ),
                ),
              )
            ],
          ),
        ),