How to create custom material textfield in flutter

Question

I am not able to customize the input label to be shown inside the text field. Below I have attached the sample mockup for your reference. How can I rectify my issue? Thanks in advance.

Answer 1

If you want your label always at the top (even with empty textfield) then one way of doing it is to create your custom textfield widget and stack all your visuals there like this

    Stack(
        children: <Widget>[
          Container(
            width: double.infinity,
            height: 60,
            decoration: BoxDecoration(
              color: Colors.white,
              border: Border.all(color: Colors.grey),
              borderRadius: BorderRadius.circular(30),
            ),
          ),
          Positioned(
            top: 3,
            left: 30,
            child: Text(
              'Email Address',
              style: TextStyle(fontSize: 14, color: Colors.grey),
            ),
          ),
          Positioned(
            left: 30,
            bottom: 3,
            right: 30,
            child: TextField(
              decoration: InputDecoration(
                  border: InputBorder.none, hintText: 'Enter email'),
              onChanged: (s) {
                text = s;
              },
            ),
          )
        ],
      ),

OUTPUT