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

大家晚上好，我正在try 创建共享浮动标签类型UX，但我在做正确的事情时遇到了很多问题.以下是我try 过的一些东西，但我无法释怀；

 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 翼的初学者，我已经try 了所有的方法，在过go 的两天里一直被困在这一点上.下面是codesen url:https://codepen.io/JonLehman/pen/JjYZVwO

任何帮助都将不胜感激.