有没有办法在 Flutter 中创建这个浮动标签表单？

Question

大家晚上好，我正在尝试在 flutter 中创建共享的浮动标签类型 UX，但我遇到了很多问题，无法正确处理。这是我尝试过但无法通过的东西；

 Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 10.0),
      child: TextField(
        style: const TextStyle(height: 1.25),
        decoration: InputDecoration(
          contentPadding: const EdgeInsets.symmetric(
            horizontal: 14.0,
            vertical: 20.0,
          ),
          focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(12),
            borderSide: const BorderSide(
              width: 3.0,
              color: Colors.black,
            ),
          ),
          label: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(12),
              color: Colors.transparent,
            ),
            padding: const EdgeInsets.symmetric(vertical: 6, horizontal: 14),
            child: Text(
              widget.textFieldLabel,
              style: const TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.w500,
              ),
            ),
          ),
          labelStyle: const TextStyle(
            color: Colors.grey,
          ),
          floatingLabelStyle: const TextStyle(
            color: Colors.white,
          ),
          enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(12),
            borderSide: BorderSide(
              width: 2.0,
              color: Colors.grey.shade400,
            ),
          ),
        ),
      ),
    );
  }

作为 flutter 的初学者，我已经尝试了一切，并且在过去的 2 天里一直停留在这个地方。这是代码笔网址：https://codepen.io/JonLehman/pen/JjYZVwO

任何帮助将不胜感激。